デザイニング・インターフェイス勉強会第11章「視覚的なスタイルと美学」

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学

安川要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/

12年9月18日火曜日

https://www.facebook.com/groups/di2e.study/


デザイニング・インターフェース第2版

パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ


http://amzn.to/LfZuHZ

http://amzn.to/LfZuHZ

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について




第11章で学ぶこと

形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する．


Visual Design の基礎（外装・Look & Feel）について学ぶ.

Visual Design における具体的なデザインパターンを学ぶ.





http://credibility.stanford.edu/

“ユーザは，素人が作ったように見えるサイトを信頼しなかった”

P. 477


http://credibility.stanford.edu

http://credibility.stanford.edu

“スタイル的な要素はあなたの製品についてのメッセージを伝える.”

P. 478

スタイルを通じて，信頼感，刺激性，愉快さ，活力，落ち着き，力強さ，緊張感，喜びなどを伝えられる．

あなたはその製品を通して，何を伝えたいのだろうか？


同じ内容，違うスタイル

CSS Zen Garden

http://csszengarden.com/12年9月18日火曜日

http://csszengarden.com


Design #1

✓空間的なゆとり

✓ font: 筆記体


Design #2

✓空間詰め込み型


Design #3

✓ leaf/greenの繰返し


Design #4

✓寒色: professional


Design #5

✓Georgia: 温もり感


Design #6

✓暖色: 熱さ

✓ゆとりのある空間


Design #7

✓様々な角度


Design #8

✓ sans-seirf/bold: cool

✓たった１つの楕円


同じ内容，違うスタイル

CSS Zen Garden

http://csszengarden.com/12年9月18日火曜日



Visual Design の基礎

認知的な反応感情的な反応


Visual Design の基礎

認知的な反応

今日の話はこっち

感情的な反応


感情的・生理的な反応

非常に多くの要因に左右される.

適切に調整するには豊富な実践が必要.12年9月18日火曜日

1. 色

2. タイポグラフィ

3. 空間的なゆとり

4. 角度と形状

5. 質感とリズム

6. 画像

7. 文化的参照

8. 繰り返す視覚的モチーフ

感情的・生理的な反応に作用する要因


暖色/寒色，暗い/明るい背景，強い/弱いコントラスト，高い/低い彩度，色相の組み合わせ，などを意識する．

1. 色



どんな声で語られるのかを決める．大きい/小さい，親しい/堅苦しい，口語的/権威的，など.



空間的なゆとり↑：開放性，静けさ，落ち着き，自由空間的なゆとり↓：切迫感，緊張感

Design #2 Design #6


4. 角度と曲線

直線や直角で構成: 安定した印象様々な角度で構成: 躍動感・活力

Design #7 Design #8



フォントは質感を左右する最も重要な要素.スクリーン上でテキストの背景にテクスチャを使う時は注意.

Design #8

Design #6


6. 画像

デザインの雰囲気作りを支える存在．ただしアプリでは,スタイルより，内容と使いやすさの方が重要.


6. 画像

デザインの雰囲気作りを支える存在．ただしアプリでは,スタイルより，内容と使いやすさの方が重要.


7. 文化的参照

よく親しまれているモノの参照は，強烈な感情を呼び覚ます.ただし，ターゲットユーザが誰なのか，十分に意識すること.



よいデザインには統一性がある．各要素が,構造的/感情的に支え合って，全体が１つにまとまっている.

Design #4 Design #5 Design #8


1. 色



4. 角度と形状


6. 画像

7. 文化的参照


感情的・生理的な反応に作用する要因








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 の７つのデザインパターン


1. Deep Background




5. Hairlines


7. Skins and Themes



1. Deep Background / 深みのある背景

Firefox Download画像またはグラデーションカラーを,

前面にある要素より奥まって見えるページ背景として配置するワザ.


1. Deep Background / 深みのある背景

注意：注目点（Focul Point）は分散させないこと.画像またはグラデーションカラーを,

前面にある要素より奥まって見えるページ背景として配置するワザ.


2. Few Hues, Many Values / 少色相・多明度

Mintインターフェイス上で使用する色相を3つ以下に絞る.

その後，選んだ色相の明度を変更して，カラーパレットを作成する.


2. Few Hues, Many Values / 少色相・多明度

Mint のインターフェイスで用いられている色インターフェイス上で使用する色相を3つ以下に絞る.

その後，選んだ色相の明度を変更して，カラーパレットを作成する.


3. Corner Treatments / コーナー処理

JetBlueインターフェイス上の Box のコーナーに曲線または斜線を用いるワザ.用いた曲線または斜線は，インターフェイス全体を通して一貫させる.


4. Borders That Echo Fonts / font を反映した border

MoMA, Online Exhibition in 2002ボーダーやその他の線などに，主要なフォントのデザインと同じデザイン（色・太さ・曲がり具合など）を適用する.


5. Hairlines / ヘアライン

ex

1 ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用するワザ.


6. Contrasting Font Weights / Font Weight の Contrast

Waterlife.nfb.ca2 種類の対照的なフォントを用いて,

レベルが異なる情報を区別し，見た目に味わいを増すワザ.


1. Deep Background




5. Hairlines


7. Skins and Themes



7. Skins and Themes / スキンとテーマ

WordPress Themeアーキテクチャを公開し，ユーザやサードパーティが,

独自のグラフィックやスタイルをデザインできるようにするワザ.


1. Deep Background




5. Hairlines


7. Skins and Themes






第11章で学ぶこと

形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する．


@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について




下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学

安川要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/




Documents

デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」

デザイニング・インターフェイス勉強会第11章「視覚的なスタイルと美学」