Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
下北沢オープンソース Cafe        デザイニング・インターフェース勉強会              第11章 - 視覚的なスタイルと美学                        安川 要平 / @yasulab         ...
デザイニング・インターフェース 第2版                パターンによる実践的インタラクションデザイン                      http://amzn.to/LfZuHZ12年9月18日火曜日
今日の発表について                              @yasulab              UIデザインを勉強したいエンジニア              勉強会詳細は Facebook グループで ↓       ...
第11章で学ぶこと形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する.12年9月18日火曜日
Visual Design の基礎 (外装・Look & Feel)について学ぶ.              Visual Design における     具体的なデザインパターンを学ぶ.12年9月18日火曜日
Visual Design の基礎 (外装・Look & Feel)について学ぶ.              Visual Design における     具体的なデザインパターンを学ぶ.12年9月18日火曜日
“ユーザは,素人が作ったように    見えるサイトを信頼しなかった”                                                 P. 477              http://credibility....
“スタイル的な要素はあなたの製品    についてのメッセージを伝える.”                              P. 478       スタイルを通じて,信頼感,刺激性,愉快さ,活力,       落ち着き,力強さ,緊張感...
同じ内容,違うスタイル                 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✓ 寒色: professional12年9月18日火曜日
Design #5✓ Georgia: 温もり感12年9月18日火曜日
Design #6✓ 暖色: 熱さ✓ ゆとりのある空間12年9月18日火曜日
Design #7✓ 様々な角度12年9月18日火曜日
Design #8✓ sans-seirf/bold: cool✓ たった1つの楕円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. 色              5. 質感とリズム     2. タイポグラフィ        6. 画像     3. 空間的なゆとり        7. 文化的参照     4. 角度と形状 ...
1. 色      暖色/寒色,暗い/明るい背景,強い/弱いコントラスト,        高い/低い彩度,色相の組み合わせ,などを意識する.12年9月18日火曜日
2. タイポグラフィ              どんな声で語られるのかを決める.      大きい/小さい,親しい/堅苦しい,口語的/権威的,など.12年9月18日火曜日
3. 空間的なゆとり              Design #2                Design #6         空間的なゆとり↑:開放性,静けさ,落ち着き,自由              空間的なゆとり↓:切迫感,緊張感1...
4. 角度と曲線              Design #7                 Design #8                          直線や直角で構成: 安定した印象                       ...
5. 質感とリズム              Design #6              Design #8                  フォントは質感を左右する最も重要な要素.  スクリーン上でテキストの背景にテクスチャを使う時は注意...
6. 画像      デザインの雰囲気作りを支える存在.ただしアプリでは,              スタイルより,内容と使いやすさの方が重要.12年9月18日火曜日
6. 画像      デザインの雰囲気作りを支える存在.ただしアプリでは,              スタイルより,内容と使いやすさの方が重要.12年9月18日火曜日
7. 文化的参照  よく親しまれているモノの参照は,強烈な感情を呼び覚ます.  ただし,ターゲットユーザが誰なのか,十分に意識すること.12年9月18日火曜日
8. 繰り返す視覚的モチーフ              Design #4        Design #5   Design #8                よいデザインには統一性がある.各要素が,   構造的/感情的に支え合って,全体が...
感情的・生理的な反応に作用する要因     1. 色              5. 質感とリズム     2. タイポグラフィ        6. 画像     3. 空間的なゆとり        7. 文化的参照     4. 角度と形状 ...
Visual Design の基礎 (外装・Look & Feel)について学ぶ.              Visual Design における     具体的なデザインパターンを学ぶ.12年9月18日火曜日
Visual Design の基礎 (外装・Look & Feel)について学ぶ.              Visual Design における     具体的なデザインパターンを学ぶ.12年9月18日火曜日
Visual Design の7つのデザインパターン 1. Deep Background           5. Hairlines 2. Few Hues, Many Values     6. Contrasting Font Weig...
Visual Design の7つのデザインパターン 1. Deep Background           5. Hairlines 2. Few Hues, Many Values     6. Contrasting Font Weig...
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 ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用するワザ.12年9月18日火曜日
6. Contrasting Font Weights / Font Weight の Contrast                       Waterlife.nfb.ca                   2 種類の対照的なフォン...
Visual Design の7つのデザインパターン 1. Deep Background           5. Hairlines 2. Few Hues, Many Values     6. Contrasting Font Weig...
7. Skins and Themes / スキンとテーマ                       WordPress Theme                アーキテクチャを公開し,ユーザやサードパーティが,              ...
Visual Design の7つのデザインパターン 1. Deep Background           5. Hairlines 2. Few Hues, Many Values     6. Contrasting Font Weig...
Visual Design の基礎 (外装・Look & Feel)について学ぶ.              Visual Design における     具体的なデザインパターンを学ぶ.12年9月18日火曜日
第11章で学ぶこと形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する.12年9月18日火曜日
今日の発表について                              @yasulab              UIデザインを勉強したいエンジニア              勉強会詳細は Facebook グループで ↓       ...
下北沢オープンソース Cafe        デザイニング・インターフェース勉強会              第11章 - 視覚的なスタイルと美学                        安川 要平 / @yasulab         ...
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

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

Download to read offline

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

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

    Sep. 8, 2014
  • HiroshiShiobara

    Jun. 16, 2014

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Views

Total views

1,841

On Slideshare

0

From embeds

0

Number of embeds

455

Actions

Downloads

7

Shares

0

Comments

0

Likes

2

×