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.

実践して学ぶデザインの要素 by Life is Tech !

3,283 views

Published on

実践して学ぶデザインの要素 by Life is Tech !
2015/4/20 @ TECH LAB PAAK
http://techlabpaak.com/events/480

Published in: Design
  • Be the first to comment

実践して学ぶデザインの要素 by Life is Tech !

  1. 1. 金澤直毅 Naoki Kanazawa 1982 WEB & GRAPHIC Rikkyo Univ. > Design Company > Instructor > Freelance > Life is Tech ! life-is-tech.com DESIGNER designless.net
  2. 2. SUMMER CAMP 2015 中高生向け IT & プログラミングキャンプ
  3. 3. TECH LAUNCH AUDITION 中学生・高校生・学生のための起業・開発支援オーディション
  4. 4. HATSUNE MIKU ONEDAY クリプトン・フューチャーメディア × Life is Tech ! illustration by iXima © Crypton Future Media, INC. www.piapro.net
  5. 5. Be Startup Be Startup 中学生・高校生のための起業体験プログラム
  6. 6. Code Girls 女子中学生・高校生のための IT ワークショップ
  7. 7. TECH for TEACHERS 先生に、最先端の「情報」の授業を。
  8. 8. Life is Tech ! Singapore シンガポール支社
  9. 9. どんなデザインも 要 素 の 組 み合 わ せ
  10. 10. 組 み合 わ せ 方      デザインの 原 則 http://lit.sh/design20150318
  11. 11. 1. デザインの要素 2. フォントと色 3. アイコン実践 Menu
  12. 12. 1.デザインの要素
  13. 13. 要 素を知る Step1
  14. 14. 成り立たせているもの 「全体」の中の「部分」 要 素
  15. 15. 代 表 的 な デ ザ イン の 要 素 形 文字 空 間 色線 質感
  16. 16. 形 S H A P E
  17. 17. 形 の 役 割 物体 領域
  18. 18. 線 L I N E
  19. 19. 線 の 役 割 分割 方向 輪郭
  20. 20. 空 間 S P A C E
  21. 21. 空 間 の 役 割 2次元 3次元 図と地
  22. 22. 文 字 A あ 亜 T Y P O G R A P H Y
  23. 23. 文 字 の 役 割 言語 情報
  24. 24. 質 感 T E X T U R E
  25. 25. 質 感 の 役 割 素材 模様
  26. 26. 色 C O L O R
  27. 27. 色 の 役 割 光 印象 文化
  28. 28. Step2 要 素に分 解 する
  29. 29. lit.sh/design0420 Materials
  30. 30. 要 素 に分 解 せよ WORKSHOP
  31. 31. 形 空 間 色
  32. 32. Step3 必 要な要 素を見 極める
  33. 33. 大きさ・配置はそのままでデザインせよ WORKSHOP 世界で一番、ココロ躍る夏を。 さあ、一緒に始めよう。 冒険的で、刺激的で、ちょっぴり切ない夏を。 全力で、疾走する数日間を。 Life is Tech ! SUMMER CAMP が もうまもなく始まります。 PRE ENTRY SUMMER CAMP 2015 500pt プレゼント!
  34. 34. 世界で一番、ココロ躍る夏を。 さあ、一緒に始めよう。 冒険的で、刺激的で、ちょっぴり切ない夏を。 全力で、疾走する数日間を。 Life is Tech ! SUMMER CAMP が もうまもなく始まります。 PRE ENTRY SUMMER CAMP 2015 500pt プレゼント!
  35. 35. 世界で一番、ココロ躍る夏を。 さあ、一緒に始めよう。 冒険的で、刺激的で、ちょっぴり切ない夏を。 全力で、疾走する数日間を。 Life is Tech ! SUMMER CAMP が もうまもなく始まります。 PRE ENTRY SUMMER CAMP 2015 500pt プレゼント!
  36. 36. 世界で一番、ココロ躍る夏を。 さあ、一緒に始めよう。 冒険的で、刺激的で、ちょっぴり切ない夏を。 全力で、疾走する数日間を。 Life is Tech ! SUMMER CAMP が もうまもなく始まります。 PRE ENTRY SUMMER CAMP 2015 500pt プレゼント!
  37. 37. 全 体は 部 分の 総 和より 大きい Point
  38. 38. Google ゲシュタルト心理学
  39. 39. 2.フォントと色
  40. 40. フォント 書 体+ファミリー+背 景 = に お い
  41. 41. フォントファミリー Avenir Next Ultra Light Avenir Next Regular Avenir Next Medium Avenir Next Demi Bold Avenir Next Bold Avenir Next Heavy
  42. 42. 小塚ゴシック Pro EL 小塚ゴシック Pro L 小塚ゴシック Pro R 小塚ゴシック Pro M 小塚ゴシック Pro B 小塚ゴシック Pro H フォントファミリー
  43. 43. フォント の 背 景 歴史 コーポレート・ロゴ ユニバーサル・デザイン
  44. 44. うす いフォント Helvetica Neue Ultra Light Avenir Next Regular ヒラギノ角ゴ Pro W3 Times
  45. 45. か お るフォント Futura Gill Sans Didot DIN Condensed Bold 游ゴシック Bold
  46. 46. つ よ いフォント TrajanIMPACT Copperplate ���fino勘亭流
  47. 47. 色 相+ 彩 度+明 度 = トーン 色
  48. 48. ライトト ーン
  49. 49. ダ ルト ーン
  50. 50. ビ ビッドト ーン
  51. 51. ビ ビッドト ーン rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255)
  52. 52. 3.アイコン実践
  53. 53. 正 円の みを使って 「チャットアプリ」の アイコンをデザインせよ WORKSHOP
  54. 54. Example
  55. 55. 線・円・C(文字 ) を使って 「時計アプリ」の アイコンをデザインせよ WORKSHOP
  56. 56. Example C
  57. 57. 円・矩形・O(文字 ) を使って 「食」をテーマとするアプリの アイコンをデザインせよ WORKSHOP
  58. 58. Example O
  59. 59. Design?
  60. 60. Books
  61. 61. Books ポール・ランド、デザインの授業 ポール・ランドのデザイン思想 教育スケッチブックby パウル・クレー
  62. 62. RELATIONSHIPBETWEEN FORM & CONTENT by Paul Rand Design?
  63. 63. 洞 察 力 要 素を知り、 分 解し、 見 極める
  64. 64. Thankyou!
  65. 65. 19:00 - 21:3019:00 - 21:30 SHIBUYASHIBUYA presented bypresented by T E C H L A B PA A K デザインの 要 素 実 践して 学 ぶ 0420

×