UX/UI – デザインパターンのチートシート

はじめに

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」に強弱をつけて表現する。

文字の「color」と「weight」を操る

文字色を背景色に近づけることで強弱をつける

背景色がある場合、その色に近づけることで弱めの文字を表現することができる。

文字色を背景色に近づけることで強弱をつける

文字色の強弱はopacityで調整

文字のベースカラーを決め、強弱はopacityで調整する。

文字色の強弱調整はopacityでやる

カラーコンビネーションはHSBのHを固定する

カラーコンビネーションを決めるときは、HSBのH(色相)は固定し、S(彩度)とB(明るさ)だけを調整するといい感じになる。

カラーコンビネーションはHSBのHを固定する

HSBとは

色相(Hue)・彩度(Saturation)・明度(ValueまたはBrightness)の3つの要素からなるカラーモデル。(カラースライダーを変えると色選びが楽になるかも!RGBとHSB(HSV)カラーのお話

ボックスシャドーは右と下

ボックスシャドーは全体に加えるのではなく、薄めで右と下だけに加える。

ボックスシャドーは右と下

線を減らす

線が多いとダサい。

線を減らす

ボーダの代わりにボックスシャドー

ボーダの代わりにボックスシャドー

ボーダの代わりに違う背景色

ボーダの代わりに違う背景色

ボーダの代わりにマージン

ボーダの代わりにマージン

アイコンのサイズ感に気をつける

小さいサイズ用のアイコンを大きくしすぎない。大きいサイズを用いたい時は、もう少しデザインが細かい大きいサイズ用のアイコンを使うか、別の背景色で囲うことでアイコンのサイズを小さく保つ方法を考える。

アイコンのサイズ感に気をつける

ブランドカラーはアクセントで使う

ブランドカラーが too much にならないように、アクセントとして使うように心がける。

ブランドカラーはアクセントで使う

アクセントボーダを上手く使う

強調したいヘッダなどにはアクセントボーダを用いて、強調しつつシンプルさも保つ。

アクセントボーダを上手く使う

全てのボタンを囲う必要はない

サブアクションについては、ボタンのボーダを取り除くことを検討する。

全てのボタンを囲う必要はない

所感

いい感じのUIを作るために、普段から以下の3点を意識しようと思った。

  • 線を減らす
  • 色味はアクセントとして加える
  • 文体の強弱は文字色を調整する

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です