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.

デザイン初心者に色々教えたらこうなった

78 views

Published on

第15回ゆるはち.it: 地味にスゴイ! Webデザインテクニックについてゆるく話す にて紹介した資料。中で紹介した実際のデザインはお出しできないので、枠のみでのご提供です。

Published in: Design
  • Be the first to comment

  • Be the first to like this

デザイン初心者に色々教えたらこうなった

  1. 1. デザイン初⼼者に ⾊々教えたらこうなった📚 2019/10/30(wed) 第15回ゆるはち.it: 「地味にスゴイ! Webデザインテクニックについてゆるく話す」
  2. 2. ⾃⼰紹介 ・損保SIer@多摩センター  ┗保険代理店のCRM開発 ・出没:BA、UI/UXデザイン、RPA ・趣味:バイオリン  ┗稲城フィルハーモニー管弦楽団 マツキヨ セイヤ @matsukiyo_s
  3. 3. まずはじめに・・・ デザインって 結局センスでしょ?😔
  4. 4. デザインは センスだけじゃない。 学問的な要素も多い📚 まずはじめに・・・
  5. 5. まずはじめに・・・ 何となくいい感じ 理論的に説明できる
  6. 6. お伝えしたいこと 『何から学べば良い??』 デザイン初学者に伝えたコト・モノ
  7. 7. 『ペット保険の試算サイト』をデザイン
  8. 8. (⼀番最初のデザイン)
  9. 9. (⼀番最初のデザイン) 余⽩ ボタンの感覚や、アイコンと枠との間が 詰まりすぎており、窮屈な印象を与えてしまう。 パターン認識 ⽂字の⼤きさや、図形の形に規則性が無い。 ⼀貫性があることで認知しやすくなる。 配⾊ルール 3⾊くらいに抑えると良い (ベース、メイン、アクセント)
  10. 10. ノンデザイナーズ・デザインブック📚 ヒューマンインターフェースガイドライン(Apple) マテリアルデザインガイドライン(Google) COLOR SUPPLY🎨 教えたコト・モノ
  11. 11. (改善後のデザイン)
  12. 12. (改善後のデザイン) コンテンツの分離 写真とコンテンツが重なっていることで、 分かりにくさと煩雑さが出てしまっている。 ⼊⼒インターフェース ボタンであることの⽰唆がなされておらず ユーザーが動きを予測しづらい。 パターン認識 フォントが統⼀されておらず統⼀性のない 印象になっている。
  13. 13. インターフェースデザインの⼼理学📚 Pinterest📱 教えたコト・モノ
  14. 14. (最終のデザイン)
  15. 15. (最終のデザイン) ⾮対称レイアウト 写真とコンテンツをずらすことで写真も コンテンツもしっかりと⾒せることができる。 また、写真とコンテンツを重ねることで 動きを持たせることもできる。 ミニマリズム コンテンツ量を少なくすることで フォーカスが定まりやすくなる。
  16. 16. クレショフ効果 ただペットのイメージを並べるのではなく、 意味のあるイメージに変更する。 キーメッセージ 意味のあるイメージと共に、主に伝えたい メッセージを追加する(ここでは保険) (最終のデザイン) 余⽩ 上部のヘッダーを取り除くことで、開放的な 印象にする。同時に全体の明度が上がった ことでナチュラルな印象になる。
  17. 17. Before・After Before After
  18. 18. まとめ ・デザインに説得⼒を(学問) ・基本だけでもデザインは良くなる ・アウトプット+評価
  19. 19. デザインはセンスだけじゃない。 ⾝近なことから始めてみよう。
  20. 20. 参考 マテリアルデザインガイドライン https://material.io/design/ Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/ COLOR SUPPLY https://colorsupplyyy.com/app Pinterest https://www.pinterest.jp/

×