読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

デザインのチェック項目(パクリ)

Design

スポンサードリンク

パクリはいけないけど、、、参考にさせてください!(>< 


引用 - http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/


webdesignrecipes.com


今後のチェック項目として使いたい

基本原則

  1. グルーピングして近づけるものは近づけ、離すものは離す – 視覚的な情報の組織化
  2. まずは揃える – 揃えてレイアウトの基礎のルール作りをする
  3. ルールは繰り返す – 繰り返すことでより一層ルールが明白になる
  4. コントラスト – 主役はきっちり目立たせる。優先順位がはっきりする

レイアウトの基本

  1. 要素と要素は視覚的につながっている – ひとつ要素を置くから、次の要素が置けるようになる
  2. 視覚的なつながりを繰り返してルールを明確にする – 2つより 3つ、3つより 4つ
  3. ルールを破ってリズムを作る – 退屈な印象を壊して変化、メリハリを作ることも大事

イメージに合わせたレイアウト

  1. 版面率(余白の大きさ)でイメージは変わる – 高級感を出したいなら余白を大きくとるなど
  2. 図版率で親しみやすさ、とっつきやすさが変わる – 写真や図形を入れると親しみやすいが、写真ばかりだと突き放した感じにもなる
  3. 文字のジャンプ率でイメージは変わる – ジャンプ率が大きいと気軽さ、元気な感じ。小さいと高級な感じ
  4. 写真のジャンプ率でメリハリをつけられる – 写真の大きさだけじゃなくて、トリミングにも注意!

ホワイトスペース

  1. ばらばらの余白はまとめてみる – 余白を使って何を目立たせるかが重要!
  2. 余白によって生まれる流れを考慮 – コントラストをつけて優先順位をはっきりさせないと混乱する