View
717
Download
5
Category
Preview:
DESCRIPTION
Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/
Citation preview
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
12年9月18日火曜日
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ
12年9月18日火曜日
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
12年9月18日火曜日
第11章で学ぶこと
形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する．
12年9月18日火曜日
Visual Design の基礎（外装・Look & Feel）について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
Visual Design の基礎（外装・Look & Feel）について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
http://credibility.stanford.edu/
“ユーザは，素人が作ったように 見えるサイトを信頼しなかった”
P. 477
12年9月18日火曜日
“スタイル的な要素はあなたの製品 についてのメッセージを伝える.”
P. 478
スタイルを通じて，信頼感，刺激性，愉快さ，活力，落ち着き，力強さ，緊張感，喜びなどを伝えられる．
あなたはその製品を通して，何を伝えたいのだろうか？
12年9月18日火曜日
同じ内容，違うスタイル
CSS Zen Garden
http://csszengarden.com/12年9月18日火曜日
Design #1
✓空間的なゆとり
✓ font: 筆記体
12年9月18日火曜日
Design #2
✓空間詰め込み型
12年9月18日火曜日
Design #3
✓ leaf/greenの繰返し
12年9月18日火曜日
Design #4
✓寒色: professional
12年9月18日火曜日
Design #5
✓Georgia: 温もり感
12年9月18日火曜日
Design #6
✓暖色: 熱さ
✓ゆとりのある空間
12年9月18日火曜日
Design #7
✓様々な角度
12年9月18日火曜日
Design #8
✓ sans-seirf/bold: cool
✓たった１つの楕円
12年9月18日火曜日
同じ内容，違うスタイル
CSS Zen Garden
http://csszengarden.com/12年9月18日火曜日
Visual Design の基礎
認知的な反応 感情的な反応
12年9月18日火曜日
Visual Design の基礎
認知的な反応
今日の話はこっち
感情的な反応
12年9月18日火曜日
感情的・生理的な反応
非常に多くの要因に左右される.
適切に調整するには豊富な実践が必要.12年9月18日火曜日
1. 色
2. タイポグラフィ
3. 空間的なゆとり
4. 角度と形状
5. 質感とリズム
6. 画像
7. 文化的参照
8. 繰り返す視覚的モチーフ
感情的・生理的な反応に作用する要因
12年9月18日火曜日
暖色/寒色，暗い/明るい背景，強い/弱いコントラスト，高い/低い彩度，色相の組み合わせ，などを意識する．
1. 色
12年9月18日火曜日
2. タイポグラフィ
どんな声で語られるのかを決める．大きい/小さい，親しい/堅苦しい，口語的/権威的，など.
12年9月18日火曜日
3. 空間的なゆとり
空間的なゆとり↑：開放性，静けさ，落ち着き，自由空間的なゆとり↓：切迫感，緊張感
Design #2 Design #6
12年9月18日火曜日
4. 角度と曲線
直線や直角で構成: 安定した印象様々な角度で構成: 躍動感・活力
Design #7 Design #8
12年9月18日火曜日
5. 質感とリズム
フォントは質感を左右する最も重要な要素.スクリーン上でテキストの背景にテクスチャを使う時は注意.
Design #8
Design #6
12年9月18日火曜日
6. 画像
デザインの雰囲気作りを支える存在．ただしアプリでは,スタイルより，内容と使いやすさの方が重要.
12年9月18日火曜日
6. 画像
デザインの雰囲気作りを支える存在．ただしアプリでは,スタイルより，内容と使いやすさの方が重要.
12年9月18日火曜日
7. 文化的参照
よく親しまれているモノの参照は，強烈な感情を呼び覚ます.ただし，ターゲットユーザが誰なのか，十分に意識すること.
12年9月18日火曜日
8. 繰り返す視覚的モチーフ
よいデザインには統一性がある．各要素が,構造的/感情的に支え合って，全体が１つにまとまっている.
Design #4 Design #5 Design #8
12年9月18日火曜日
1. 色
2. タイポグラフィ
3. 空間的なゆとり
4. 角度と形状
5. 質感とリズム
6. 画像
7. 文化的参照
8. 繰り返す視覚的モチーフ
感情的・生理的な反応に作用する要因
12年9月18日火曜日
Visual Design の基礎（外装・Look & Feel）について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
Visual Design の基礎（外装・Look & Feel）について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の７つのデザインパターン
12年9月18日火曜日
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の７つのデザインパターン
12年9月18日火曜日
1. Deep Background / 深みのある背景
Firefox Download画像またはグラデーションカラーを,
前面にある要素より奥まって見えるページ背景として配置するワザ.
12年9月18日火曜日
1. Deep Background / 深みのある背景
注意：注目点（Focul Point）は分散させないこと.画像またはグラデーションカラーを,
前面にある要素より奥まって見えるページ背景として配置するワザ.
12年9月18日火曜日
2. Few Hues, Many Values / 少色相・多明度
Mintインターフェイス上で使用する色相を3つ以下に絞る.
その後，選んだ色相の明度を変更して，カラーパレットを作成する.
12年9月18日火曜日
2. Few Hues, Many Values / 少色相・多明度
Mint のインターフェイスで用いられている色インターフェイス上で使用する色相を3つ以下に絞る.
その後，選んだ色相の明度を変更して，カラーパレットを作成する.
12年9月18日火曜日
3. Corner Treatments / コーナー処理
JetBlueインターフェイス上の Box のコーナーに曲線または斜線を用いるワザ.用いた曲線または斜線は，インターフェイス全体を通して一貫させる.
12年9月18日火曜日
4. Borders That Echo Fonts / font を反映した border
MoMA, Online Exhibition in 2002ボーダーやその他の線などに，主要なフォントのデザインと同じデザイン（色・太さ・曲がり具合など）を適用する.
12年9月18日火曜日
5. Hairlines / ヘアライン
ex
1 ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用するワザ.
12年9月18日火曜日
6. Contrasting Font Weights / Font Weight の Contrast
Waterlife.nfb.ca2 種類の対照的なフォントを用いて,
レベルが異なる情報を区別し，見た目に味わいを増すワザ.
12年9月18日火曜日
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の７つのデザインパターン
12年9月18日火曜日
7. Skins and Themes / スキンとテーマ
WordPress Themeアーキテクチャを公開し，ユーザやサードパーティが,
独自のグラフィックやスタイルをデザインできるようにするワザ.
12年9月18日火曜日
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の７つのデザインパターン
12年9月18日火曜日
Visual Design の基礎（外装・Look & Feel）について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
第11章で学ぶこと
形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する．
12年9月18日火曜日
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
12年9月18日火曜日
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
12年9月18日火曜日
Recommended