bo-tech

heart and tech with love.

良いUIを生み出す7つのルール その1

要約してみた

medium.com

いちいちグーグルとかでサイトの構成となりそうなものを探したりするのがめんどくさいから良いUI, UXの基本というものを理解するというのが趣旨。

1. 光は空から降る

下から来ると不気味だよねって話が載っている。

あとはボタンに上から光が当たっているから下に影ができるとか、

2. 白黒を先に

要はグレイスケールで先にデザインを考えろと。

アーティストやデザイナーはもちろん色を使って、コミカルな感じとか柔らかい感じとかを表現するが

webアプリやアプリにおける良いUIという点においては重要なことではない。

色の塗り方は、まずシンプルに一つの色で、その次にグレイスケール+2の色、複数の色という風に考えたほうがよいと。

色を探すときにはRGBではなくHSBのカラースケールがつかいやすいとのこと。

一つのHSBの色調から明度や彩度を変更して、複数の色を取得することができるがあまり効果的ではない。

良い選び方としては、一つの色をベースとした色調、もしくは二つの色をベースとした色調から色を選ぶと良いと。

これをやるとデザインを崩さず配色ができる。

TIPS!!

黒は使わない。真っ黒という色は自然界ではほぼ存在しないためである。違和感が生まれる。

Adobe Color CC これはいいツールである。

典型的な色を探す。一つの色を決めたら他の多くのデザイナーがその色に対してどんな色を使っているのかなどを確認する。

3. 二倍の空白

無から考えろ。ブランクページを作るときには、ホワイトスペース以外は何もないものとして考えるのだ。

スタイルがないhtmlについては、コンテンツから考えるのだ。 スペースは後付けで、htmlは完全に定まっていなくてはならない。

行間にスペースを(行の高さの二倍)

要素ごとにスペースを

要素グループごとにスペースを

一ページ目はこんな感じ。