omohayui blog

web開発のことやら絵のことやら日常のことやらを、たまに書き出します。

OMOHAYUI.

おも‐はゆ・い【面映ゆい】[形][文]おもはゆ・し[ク]《顔を合わせるとまばゆく感じられる意》きまりが悪い。てれくさい。

ノンデザイナーズ・デザインブック勉強会(1)

1.ジョシュア・ツリーの悟り

近所にあるジョシュア・ツリーに気付かなかった作者
 ⇒ 問題や原則、ものごとには名前がないと意識することができない

4つの基本原則

4つの基本原則は互いに関連してあっている

2.近接

ロビンの近接の原則

関連する項目をまとめてグループ化する

類似の要素をグループ化して視覚的ユニットを作成
 ⇒ ページが組織化される
 ⇒ 情報をより明確に伝えられる

コントラストとの組み合わせ
 ⇒ 見出しを強調することで、より組織化する

整列との組み合わせ
 ⇒ インデントで余白を操作する

まとめ

  • 知覚的に関連するものは視覚的にも組織化させる
  • 視線の流れを意識する
  • 要素間に均等の空白をつくらない
  • 見出し、小見出し、キャプション、画像などで要素間の関連をつくる

3.整列

ロビンの整列の原則

ページ上のすべてのものを意識的に配置しなければならない

共通の境界線を作成することで、各要素を結びつける
 ⇒ より組織的に情報を伝える
 ⇒ レイアウトに強さを与える

ありがちな中央揃え
 ⇒ 安心感を与えるが、退屈に見えがち
 ⇒ 洗練されたデザインにはあまり使われていない
 ⇒ 中央揃えにひねりを加えることで洗練させることもできる

1ページに1種類の文字揃え
 ⇒ 左揃えの要素と右揃えの要素が関連していればOK
 ⇒ 訓練積んでいる人ならOK

強い線を意識する
 ⇒ 強い線を意識できればそこを基準に全体のレイアウトがくめる
 ⇒ 強い整列が存在すれば”意図的”にくずした要素も入れられる

まとめ

  • 基準となる線で一体化、組織化させる
  • 空間的に離れていても意識的に揃える要素を見つけて配置する
  • 同じページ内で2種類以上の文字揃えを使用しない