Non-Designer’s Design

Keisuke Tada

対象

デザイン感度

ロジック組立力

デザイン技術

対象 目標

デザイン感度

ロジック組立力

デザイン技術

Agenda

デザインとは何か なぜデザインが重要か

ビジュアルデザインの基礎

プレゼンテーション資料のデザイン

Web デザインのトレンド

What is Design?!Why is it Important?

デザイン =

デザイン かっこいい おしゃれ ≠

デザイン 問題解決のための手段 =

デザイン 問題解決のための手段 =

考えていること、やったことを!正しく、魅力的に伝える!

コンテンツ

コンテンツ

デザイン

コンテンツ

デザイン 目的!

中身を伝わりやすくする

手段!

見た目を良くする

デザイン

コンテンツ

デザイン

コンテンツ

デザイン 手段!

見た目を整理する

目的!

中身が洗練される

Basics in Design

Font

Sans Serif Serif

明朝 ゴシック

Sans Serif! Serif

Color

Hue

Saturation

Value

色相

彩度

明度

Color Tools •  HUE / 360

http://hue360.herokuapp.com/

•  Color Scheme Designer 3 http://colorschemedesigner.com/

•  ColorHexa http://www.colorhexa.com/

Alignment This text is flush left. Some people call it quad left, or you can say it is left aligned.

This text is flush right. Some people call it

quad right, or you can say it is right aligned.

This text is centered. If you are going to

center text, make it obvious.

Design in Presentation Slide

流れ ＞ 詳細度

注目ポイントを明確に ! 目立たせるところは少なく ! コントラストをはっきりさせる（大きさ、太さ、色、余白）

! 表、グラフ、図などは特に注意 ! 箇条書きはなるべく避ける ! 一枚のスライドに収めるべき内容か熟慮する

ノイズを少なく ! テキストは少なく ! フォントは慣れ親しまれたものが無難 ! アニメーションを無駄に使わない ! 無駄なグラデーション、シャドウ、枠線は禁止 ! むやみやたらに枠で囲わない ! 使う色の数は抑える ! グラフの不要なテキスト、線は消す

Web Design Trends

Flat

Circle

Blur

References •  ノンデザイナーズ・デザインブック

http://www.amazon.co.jp/dp/4839928401

•  伝わるデザイン http://tsutawarudesign.web.fc2.com/

•  Hack Design http://hackdesign.org/

易

易

難