はじめに
『7 Practical Tips for Cheating at Design』と『10 cheat codes for designing User Interfaces』を読んで、学んだことを整理する。
It’s easy to throw your hands up and say, “I’ll never be able to make this look good, I’m not an artist!” but it turns out there are a ton of tricks you can use to level up your work that don’t require a background in graphic design. (7 Practical Tips for Cheating at Design)
見やすいデザインパターンにはルールがあるということ。
Findings
文字の「color」と「weight」を操る
文の構成に強弱をつけたい場合、文字サイズだけを調整するのでなく、「color」と「weight」に強弱をつけて表現する。
文字色を背景色に近づけることで強弱をつける
背景色がある場合、その色に近づけることで弱めの文字を表現することができる。
文字色の強弱はopacityで調整
文字のベースカラーを決め、強弱はopacityで調整する。
カラーコンビネーションはHSBのHを固定する
カラーコンビネーションを決めるときは、HSBのH（色相）は固定し、S（彩度）とB（明るさ）だけを調整するといい感じになる。
HSBとは
色相(Hue)・彩度(Saturation)・明度(ValueまたはBrightness)の3つの要素からなるカラーモデル。（カラースライダーを変えると色選びが楽になるかも！RGBとHSB(HSV)カラーのお話）
ボックスシャドーは右と下
ボックスシャドーは全体に加えるのではなく、薄めで右と下だけに加える。
線を減らす
線が多いとダサい。
ボーダの代わりにボックスシャドー
ボーダの代わりに違う背景色
ボーダの代わりにマージン
アイコンのサイズ感に気をつける
小さいサイズ用のアイコンを大きくしすぎない。大きいサイズを用いたい時は、もう少しデザインが細かい大きいサイズ用のアイコンを使うか、別の背景色で囲うことでアイコンのサイズを小さく保つ方法を考える。
ブランドカラーはアクセントで使う
ブランドカラーが too much にならないように、アクセントとして使うように心がける。
アクセントボーダを上手く使う
強調したいヘッダなどにはアクセントボーダを用いて、強調しつつシンプルさも保つ。
全てのボタンを囲う必要はない
サブアクションについては、ボタンのボーダを取り除くことを検討する。
所感
いい感じのUIを作るために、普段から以下の3点を意識しようと思った。
- 線を減らす
- 色味はアクセントとして加える
- 文体の強弱は文字色を調整する
Sources
- 7 Practical Tips for Cheating at Design
- 10 cheat codes for designing User Interfaces
- カラースライダーを変えると色選びが楽になるかも！RGBとHSB(HSV)カラーのお話
