UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」


TightenLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。

Little UI Details
https://twitter.com/i/moments/880688233641848832

明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。


色相を両方向に10度から20度程度調整することで、グラデーションがより鮮やかに見えるようになります。


Stripeのサイト上のボタンにマウスオーバーするとボタンが少しだけホバーするのが本当に好き、というものも。ボタンにマウスオーバーすると、ボタンは1ピクセルだけ上方向に移動し、ドロップシャドウが負荷されます。


ボックスシャドウにわずかな垂直オフセットを加えると、より自然に見えるようになります。


テキストを揃えることは、デザインをきれいにし、コンテンツを見やすくするための簡単な方法です。


純粋な灰色のテキストは、色のついた背景では常に見えづらくなります。簡単な修正方法は、背景色の色相をテキストに加えることです。


テキストより目立つアイコンを使用している場合は、アイコンが非アクティブ状態の場合はテキストよりもわずかに明るくなるように設定します。


標準的な箇条書きではなく、矢印やチェックマークのようなアイコンを使用すると、順序付けられていないリストに視覚的な興味を持たせることができます。


サイトの一番上に4~6ピクセルほどの太さの線を追加することで、デザインに活気を加えることができます。


2色のグラデーションを使うことで素敵な見た目に変化します。


タイトルと本文の間にキーラインを引くのではなく、微妙に背景色のコントラストを変えることでこれを示しています。


サイズと太さに加えて、色とコントラストを使用することが、活字体の階層を作成するのに最適な方法です。


決まっていない場合、1.5行の高さの16pxのフォントをボディコピーに使用することが最適です。


全てが太字のテキストは時には読みにくく感じることがあります。文章に少しでも呼吸する余地を与えるために、文字間隔を調整することを検討してみてください。


グラフィックデザインのスキルがなくてもスタイリッシュな地図を作るテクニック。


キーラインはコンテンツを分割するだけでなく、分断されたコンテンツをよりつながりやすくすることもできます。


倍数を使ってスペーシングを定義することは、縦方向のリズムを得るための優れた方法です。


彩度を落とした写真+大胆な配色+CSSのブレンドモード(blend-mode: multiply)は、ヒーローバナーとテキストのコントラストを高めるのに最適です。


ページ上の要素の重なりは、深みを作り、ユーザーにスクロールを促す素晴らしい方法です


ネガティブセカンダリアクションボタンは、通常のボタンよりもよく機能します。


ボタンに階層を作ることで押してもらいたいボタンをより目立たせることが可能。


境界線が多すぎるとデザインが忙しく見えることがあります。


2列のフォームレイアウトは、無意味に長いフォームを整理したり、広い画面を適したサイズのフォームやテキストで埋めるのに最適です

・関連記事
実例とユーザーテストからわかってきたよりよいUIのデザインとUXの条件 - GIGAZINE

マルチプレイヤーゲームのレベルデザインの基礎を誰にでも理解できるように説明するとこうなる - GIGAZINE

無料で商用利用も可能なシンプルなデザインのアイコンセット「Feather」 - GIGAZINE

Appleが過去20年のデザインを振り返る写真集「Designed by Apple in California」を発表、アイブ氏が語るそこに込められた意味とは? - GIGAZINE

・関連コンテンツ

297

in デザイン, Posted by logu_ii