UI向けビジュアルデザインの基礎 by 矢野 りん [CSS Nite LP11]
CSS Nite LP11の矢野さんのセッション「UI向けビジュアルデザインの基礎」のメモ的まとめ。twitterも合わせてチェック!
Webサイトは何次元デザイン?
- 2D(点/線/面>平面)
- 3D(面/奥行き/高さ>空間)
- 4D(面/空間/時間>モーション)
ウェブの種類もいろいろ・デザインもいろいろ
- 変わらないもの 情報をわかりやすく整えること
- つまり、Webデザインとは 「人間に情報を伝えること」が最低条件
2Dデザインの基本セオリー
- 優位性・ヒエラルキーの法則
- 大きさ(大きいほど重要・重要な情報を絞り込む)
- コントラストの法則
- 大小・明暗・遠近(表現の差)
- 背景色と前景色の差
- リズムの法則
- 情報を法則性を持って配置する
- 余白・サイズ・目安
- 構造の法則
- モジュール
- グリッド
- ガイドライン
人間に情報を伝わりやすくする。
- みやすい
- 余白による強調(まわりに余計なものを置かない)
- ジャンプ率(文字サイズの違い)
- 白ヌキ文字(背景色の協調)
- よみやすい
- 色によるグループ化
- コントラストの活用(4つ以内)
- 使いやすい
- 整列の法則(位置を揃える)
- リズムの法則(余白を揃える)
- 移動範囲の制限(操作の範囲は最小限・プルダウンメニュー)
- わかりやすい
- 法則性を感じる(グリッドレイアウト・サイズの規格化)
- アイコン・イメージ(人の顔・フォーカルポイント)
まとめ
強調と整列の法則はいつも意識しよう
最終的には自分の感覚をたよりに
読みやすいサイトはそれなりにかっこよくなるもの
スポンサードリンク
«Web Directions East 2010 | メイン | Webデザイナーのためのタイポグラフィと文字組版 by 鷹野 雅弘 [CSS Nite LP11]»