優れたUXのための220+マテリアルにインスパイアされたアイコン

アイコンは、アプリや Web サイト上の情報を簡単にナビゲートするだけでなく、コンテンツを要約してコンテンツの読みやすさを向上させ、コンテンツをエキサイティングにし、Web プロジェクトの最も重要な部分にユーザーの注意を引き付けるためにも、ユーザー エクスペリエンスを向上させる上で常に重要でした。

ツールバーやパレットのスペースを節約し、海外のユーザー向けにアイコンを翻訳する必要がありません。

​Infragisticsでさまざまなサンプルやアプリに取り組んでいる間、私たちのデザイン チームは、Google のマテリアル アイコンがユーザー インターフェース デザインに最適であるにもかかわらず、特に財務や健康などの分野では制限されていると常に感じていました。そこで、いくつかの議論の後、Googleが提供する公式のマテリアルデザインアイコンセットを、私たちだけでなく、私たちの製品を使用する素晴らしい人々にとって価値のある5つのカテゴリのアイコンの非公式のサブセットで拡張することにしました。

​世界的なパンデミックの影響で数ヶ月間在宅勤務をしながら、同時に家族の世話をするプロダクトデザイナーになるのは簡単なことではありません。特に、好奇心旺盛な6歳の男の子がいて、あなたの仕事についてもっと知りたいと思っていて、それがモノポリーやサッカーをすることよりも重要である理由を知りたいと思っている場合。

私はこれを一緒に時間を過ごす機会と捉え、息子が絵を描くのが本当に好きなので、これを達成することに決めたのは、次の数日間、デザインチームが開始することを決めた5つのカテゴリーのアイデアをスケッチする共同作業の時間を楽しむことで、これを達成することにしました。

​私たちは鉛筆を手にして一緒に座り、私はいくつかのデザインコンセプトを説明しようとしました。適切なメタファーや現実世界のオブジェクトについて考え、思い描いていた可能性のあるシンボルの関連性をいくつか書き留め、その後、私がデザインした新しいマテリアルに触発されたアイコンのセットとなるもののプロトタイプを作成しました。

私の息子はよく質問をし、彼がスケッチで聞いたことを実行しようとしました。受精や避妊などのいくつかのアイコンの意味をどのように説明したかは聞かないでください、なぜならアイコンに対する人の理解は主に以前の経験に基づいているからです。やりませんでした。それらのシンボルは、私の目だけに残しました。マスクやウイルスは、私たち全員が直面している困難な時期のために、はるかに把握しやすくなりました(そして難しい質問をせずに話し合うこともできました)。息子との交流は、実際に私が自分のアイデアをさらに発展させ、検証するきっかけとなりました。今では、6歳の子供にとってアイコンを思い出深いものにすることができれば、素晴らしい仕事をしたことになると思います。

貴重で生産的な時間でした!

​Angularマテリアルにインスパイアされたアイコンセット用のIgniteUIには、デザインで遭遇する可能性のあるさまざまな状況に対応する220以上のアイコンが含まれています。これらすべてのアイコンを5つのカテゴリで配布しています。

ファイナンス

金融アイコンの拡張セットは、銀行、現金、貯蓄、ショッピング、電子商取引に関連する一般的なニーズをカバーしています。

健康

健康アイコンのセットは、歯科治療、医学のシンボル、医療施設や施設、健康関連の問題など、さまざまなトピックをカバーしています。

ロゴ

このアイコンのセットは、Apple Pay、Dropbox、Googleドライブ、PayPal、さまざまなブラウザのロゴ、Word、Excel、Outlookなどの最新のMicrosoft製品のロゴなど、デザインで使用したい最も人気のあるロゴの一部で構成されています。

プログラミング

git commit、git compare、git merge、repository、inspect code、consoleなどのプログラミング関連の資料アイコンを探しているなら、ここで見つけることができます。

ソーシャルメディア

Facebook、TikTok、Instagram、YouTube、LinkedInなどのソーシャルメディア素材に触発されたアイコンがなければ、私たちは逃げることができませんでした。

各アイコンは、最新のブラウザー全体で広くサポートされているため、SVG ファイルとして利用でき、さらにアイコンをJavaScript オブジェクトとしてエクスポートしたため、Angular / React /Vueアプリにインポートできます。