ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
流行りのUIをコード付で紹介しているサイト「CodeMyUI」 | ライフハッカー・ジャパン
「CodeMyUI」は流行りのUIをコード付で紹介しているサイトです。GIFアニメでUIの動きを見ることができ、さらにそれを実現させるソースコードもリンクされています。デザイナーの方には重宝するサイトですね。 以下に使ってみた様子を載せておきます。まずCodeMyUIへアクセスしましょう。 このようにGIF画像とともにさまざまなUIが紹介されています。実際に動きを確かめることができるので、どんなUIなのかひと目で分かりますね。 詳細ページでは、そのUIを実現させるためのコードも閲覧できます。実際に動くサンプルがあるので、すぐに導入ができますね。デザイン段階でインスピレーションを受けたいときなどに、ぜひ覗いてみてください。 CodeMyUI （カメきち）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
Redirecting to Animate.css
