[B! まとめ][UI] yuki_2021のブックマーク

2021年、最も注目されたUIデザインのテクニックのまとめ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行

yuki_2021 2021/12/23

リンク

プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。第9弾は見出しや本文など、テキストのデザインのテクニックです。 UI & UX Micro-Tips: Volume Nine. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. ホワイトスペースはデザイン要素 2. 明るいテキストと画像のコントラスト比を適切に保つ 3. 見出しや本文にぴったりな垂直のリズム 4. 書体の読みやすさは、x-heightまたはIl1で確認 5. テキストブロックのサイズに応じてline-heightを調整 6. テキストのカラーパレットはシンプルにし、濃淡だけを変えるはじめ

yuki_2021 2021/12/15

リンク

2020年、Web制作・デザインに役立つ記事の総まとめ

2020年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。

yuki_2021 2020/12/25

リンク

個人的UIデザインの情報源まとめ

どうも。最近エンジニアからデザイナーになったものです。最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple

yuki_2021 2020/10/14

リンク

サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。ボタン、テキスト、コピーなどボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしないボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

yuki_2021 2014/04/16

リンク

デザイン制作のインスピレーションになるRSSまとめ | Arch

最近Emberを買って、RSSを整理したのでまとめてみました。 Webデザインが中心ですが、UIデザイン、アイコンや紙ものも参考になるので登録しています。どれもクオリティが高くデザインのインスピレーションを得られそうなものばかりです。デザインギャラリー Awwwards – Sites of the day

yuki_2021 2013/09/06

リンク

jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。１）3D表示プラグインサンプルデモ今年のトレンドと言えば3D。というわけでこちら。まずはサンプルデモを確認。触ってわかる通りですが、2枚の画像が3D表示されます。呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;