Adam Wathan 著

クソ高いので会社に買ってもらった

$99

15,000円ぐらいしたぞ...

200ページ程度しかなく、図も多いので割とさくさく進む

全体を通してNG例、OK例の具体例をちゃんと示しているのが良い

目次

Starting from Scratch

著者がエンジニアというのもあってか、エンジニアリングと親和性が高い

デザインから考えるのではなく、機能から考えろ

デザインの個性

フォントとか色とかの要素の選択の積み重ね

だが、常に無限の選択肢の中から選択するのは骨が折れる

だから、予め選択肢を制限しておいて、その中から選ぶようにする

つまり、Design Systemのこと

Hierarchy is Everything

UIのメリハリの付け方

情報に優先順位をつけて表示しよう、ということ

Layout and Spacing

Designing Text

Working with Color

HSLは人間の目が直感的に感じる属性を使って色を指定できる

HSLを気にしたカラーパレットの作り方

ただ単純に機械的に決めても上手く行かず、ちょっとコツが要る

面白いけど、HSLに馴染みにがないので頭に入りづらかった

『色彩検定 公式テキスト 3級編』とか読んでから再読したほうが良さそう

Creating Depth

Emulate a light source

要素が背景から浮き上がっていたり、はめ込まれているように見えるUIについて

絵を描ける人なら当然知ってるだろうみたいな内容だな

それと、最近のweb designだとあまりそういう凹凸つけないよなあ

Use shadows to convey elevation

Shadows can have two parts

フラットデザインにも奥行きはある

Working with Images

Use good photos

174

Text needs consistent contrast

176

Everything has an intended size

181

Beware user-uploaded content

187

Finishing Touches

もっと各要素をメリハリつけようぜ、みたいな章かな

Supercharge the defaults

192

Add color with accent borders

195

Decorate your backgrounds

198

Don’t overlook empty states

203

Use fewer borders

Think outside the box

先入観にとらわれるな！

Leveling Up

Leveling up