[B! design][guide] astk_fのブックマーク

アイコンデザイン 7つの原則、優れたアイコンをデザインするために

Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさアイコンのリソース Clarity -アイコンは分か

astk_f 2020/02/21

リンク

UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。１、進めそう感２、戻れそう感３、進めそう＆戻れそう感４、開きそう感（ドロップダウン）５、開きそう感（アコーディオン）６、開きそう感（モーダル１）７、開きそう感（モーダル２）８、カレンダーが開きそう感９、メニューが開きそう感（ハンバーガー）１０、検索できそう感１１、入力できそう感１２、検索できそう＋入力できそう感１３、パスワード入力できそう感１４、パスワード感（強め）１５、間違えた感（エラー）１６、合ってる感（OK）１７、電話かかる感

astk_f 2019/06/12

リンク

Webデザインやイラストで、色の効果的な組み合わせ方がよく分かる便利なオンラインサービス -Color Supply

デザインやイラストにおいて、色は非常に大切なツールです。初心者だとつい多くの色を使いがちになり、失敗してしまうこともあります。 Webデザインやイラストで色を選ぶ時、効果的な色の組み合わせ方がよく分かる便利なオンラインツールを紹介します。 Color Supply Color Supplyの使い方色の組み合わせ方色の組み合わせが分かる無料PDF Color Supplyの使い方色を選ぶ時には、3つのポイントを理解しておくことが重要です。コンセプトブランドあなた自身の好みコンセプトサイトやイラストのコンセプトを理解していないと、色を選ぶことはできません。そしてコンセプトを理解することで、色の選択の幅を狭めることができます。例えばコンセプトが「水」であるなら、レッドを使うことはないでしょう。水とレッドは異なる世界です。色はコンセプトを支持すべきか、少なくとも対立は避けるよう

astk_f 2017/01/15

リンク

フロントエンドスタイルガイド：定義と要件、コンポーネントチェックリスト

フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開フロントエンドスタイルガイドとは何かフロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。定義：フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ

astk_f 2016/06/25

リンク

Web制作者がチェックしておきたい！デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ

Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。 Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。