HackerNoon のピクセル アイコン ライブラリの構築について

デザインが急速に進化する現在のデジタル時代では、あらゆる些細な点が全体的なユーザー エクスペリエンス (UX) に大きな影響を与える可能性があります。たとえば、アイコンは製品の視覚的な魅力を著しく高めることができます。

サードパーティのリソースへの依存を減らす取り組みとして始まった取り組みは、より重要な事業へと変わりました。

このピクセル化されたアイコンのオープンソース コレクションは、完璧な位置合わせと一貫性を実現するために 24 ピクセルのグリッドを使用して設計されており、それによって Web/アプリ/製品/ページ/ライフ エクスペリエンスが豊かになります。 HackerNoon のレトロなデザインの雰囲気からインスピレーションを得たこれらのアイコンは、インターネットの黄金時代のエッセンスを凝縮しています。

ピクセル アイコン ライブラリの背後にあるコンセプト

デザイナーとして、私たちはプロセスを合理化するためのソリューションを探すことがよくあります。

HackerNoon では、サイトに必要な機能と美しさを追加するために、最初は Font Awesome アイコンに注目しました。これらのアイコンは、一貫性と幅広いオプションを提供することで、私たちに役立ちました。しかし、既存のライブラリに依存すると、ブランド アイデンティティの進化に応じてサービスを提供できなくなりました。

当社の創設者、 DavidとLinh は、製品会議中に社内のアイコン ライブラリに移行するというアイデアを最初に提案しました。最初のフェーズでは、HackerNoon 上の既存の Font Awesome アイコンを独自のものに置き換えることに焦点を当てました。後者は、これらのアイコンをコミュニティのアイコン ライブラリとして共有することに重点を置いています。

この移行により、私たちは創造的に自分自身に挑戦することができました。この旅には課題がなかったわけではありませんが、私たちが作成したピクセル化されたアイコンのそれぞれが、ブランドの個性を輝かせることができました。これらのピクセル化されたアイコンは、単なる視覚要素以上のものになっています。これらは現在、HackerNoon を反映しています。

社内アイコンのデザイン: コンセプトから作成まで

アイコン ライブラリの作成は、創造性、精度、問題解決を通じた爽快な旅でした。ここでは、HackerNoon のエッセンスが吹き込まれた、これらのピクセル化されたアイコンの作成の背後にあるプロセスを覗いてみましょう。

1. デザイン言語の定義

2. アイデアとスケッチ

3. アイデアをデザインして実現する

4. コミュニティ公開の準備: Figma と GitHub

   
   

デザイン言語の定義

私たちの旅は、一貫したデザイン言語を定義することから始まりました。これには、アイコンで伝えたい詳細のレベル、イラストのスタイル、雰囲気を決定することが含まれます。この基盤を確立することで、ライブラリ全体の一貫性が確保されました。

• 詳細レベルについては、ミニマリストのアプローチを選択し、クリーンなアイコンを目指しました。アイコンを拡大縮小したときに視覚的に乱雑にならないようにすることで、不必要な詳細を排除することができました。

• 私たちのイラスト スタイルは、特にHackerNoon のロゴからインスピレーションを受けました。 80 年代にインスパイアされたレトロなピクセル ブロックのデザイン スタイルは、当社のブランドと完全に一致しています。これにより、デザイン言語が全体的なビジュアルアイデンティティと一貫していることが保証されました。私たちはそれらをピクセル化されたアイコンと呼んでいます。

  
  

  
  

  

• 一貫性を維持するために、24 ピクセルのグリッドを選択しました。 (ほとんどのシステム アイコンは 24x24 で表示されるため、アイコンをデザインする場合は 24 ピクセルのグリッドが理想的であると考えられます)。これにより、以下を提供することで、ピクセル完璧な精度で 100% のスケールで表示するアイコンを作成できるようになりました。

  
  

  • アイコンコンテンツ用の22ピクセルのライブエリア

  • ライブエリアを囲む1ピクセルのパディング

    
    

    

    
    

    
    

アイデアとスケッチ

アイデア作成のプロセスは、現在のアイコンで表される機能とそれぞれの使用例をリストすることから始まりました。次に、これらの機能のアイコンをどのように再設計できるかをブレインストーミングしました。その後、簡単な落書きやスケッチを続けました。これらの大まかなスケッチは、より小さなスケールでアイコンを視覚化するのに役立ち、より迅速な反復と適合しないアイデアの破棄を可能にしました。

ピクセル化されたアイコンのデザイン

次の重要なステップは、これらの手描きのコンセプトをピクセル化されたアイコンに変換することでした。このフェーズでは主に、Adobe Illustrator を使用してこれらのピクセル化されたアイコンを作成し、その後、それらをさまざまな形式とサイズでエクスポートしてスケーラビリティをテストしました。

• まずはこれらのラフスケッチをIllustratorに読み込むことから始めました。

  
  

  

• 次に、グリッド ツールを使用して 24 ピクセルのグリッドを作成し、ピクセル化プロセスを開始しました。

• ライブ ペイント ツールを使用して、占有スペースの 50% を超える各四角形を塗りつぶしました。

  
  

• デザインに満足したら、ライブ ペイントを展開して (オブジェクト メニュー → 展開)、図形を形成します。

• 次に、シェイプ ビルダー ツールを使用してこれらのシェイプを単純化しました。これで、出来上がりです。ピクセル化されたアイコンが準備できました。

  
  

• 次に、アイコンを 12 ピクセル、16 ピクセル、24 ピクセル、および 48 ピクセルの SVG、PNG としてエクスポートしました。 (これらのサイズは、構想段階でリストしたユースケースに基づいて選択しました)

  
  

• さらに、アイコンの種類など、アイコンに関する具体的な詳細を文書化しました。現在、ソリッド(塗りつぶし)、標準、およびライトアイコンの 3 つのタイプがあります。最初の 3 つに当てはまらないアイコンには、ブランド ロゴという別のタイプがあります。 (アイコンを文書化すると、デザインの一貫性が維持され、将来の更新が容易になります)

  
  

コミュニティ公開の準備: Figma と GitHub

すべてのアイコンを目的の形式でエクスポートしたら、これらのアイコンを整理し、コミュニティで公開できるように準備しました。この目的のために、Figma コミュニティ ファイルと GitHub リポジトリを選択しました。

すべてを準備する方法は次のとおりです。

• グループ化と整理:アイコンをタイプに基づいて 4 つのセット (ソリッド、通常、ライト、ブランド ロゴ) に整理し、ユーザーが特定のアイコンを検索しやすくしました。

  
  

• 命名規則とフォルダー構造:ユーザーがアイコンを簡単に識別できるように、明確で説明的な命名規則を確立しました。 GitHub リポジトリの場合、次のようなフォルダー構造を選択しました:ファイル タイプ/カラー テーマ(存在する場合)/サイズ/アイコン タイプ/アイコン名.ファイル拡張子(例: PNG/ダーク モード用/24px/)ソリッド/Ad.pngおよびSVG/ソリッド/Ad.svg )

  
  

• Figma でのコンポーネント ライブラリの作成とバリアントの定義: Figma のコンポーネント システムを使用して、各アイコンのマスター コンポーネントを作成できました。すべてのアイコンにサイズのバリエーションを作成し、ユーザーが手間をかけずにインスタンスを介してアイコンを直接拡大縮小できるようにしました。これにより、アイコンの更新プロセスが合理化され、さまざまなデザイン ファイル間での一貫性が確保されました。

• GitHub リポジトリのセットアップ:ピクセル アイコン ライブラリ専用の GitHub リポジトリを作成しました。これにより、アイコンを管理し、より広範なデザインおよび開発コミュニティと共有できるようになります。

  
  

• Github 上のドキュメント: GitHub リポジトリに包括的な README ファイルを作成しました。これには、ピクセル アイコン ライブラリの紹介、これらのピクセル化されたアイコンをプロジェクトで使用するためのすべての方法に関する情報、ライセンスの詳細、明確に定義された貢献ガイドライン、その他の特別な考慮事項が含まれます。

  
  

  
  

• Figma のドキュメント: Figma については、ピクセル アイコン ライブラリの詳細な紹介と、コンポーネント ライブラリとバリアントの使用に関するチュートリアルを含む、別の概要ページを作成しました。簡単に参照できるように、アイコンとその名前のリストも含まれています。

  
  

• ライセンス:アイコン ライブラリのライセンス条項を明確に定義しました。 Pixel Icon Library GitHub Repo および Figma File は、CC BY 4.0 License に基づいてライセンス供与されており、HackerNoon への適切な帰属を示した上で使用することが許可されています。

完成品:

Pixel Icon Library を作成するための私たちの旅は、創造的な探求、挑戦、成長に満ちていました。 Font Awesome アイコンを使用するというささやかな始まりから、サイト全体での社内アイコンの使用、そして最終的には独自の Pixel Icon Library の作成に至るまで。

このプロセスは、アイコンが単なるシンボルではなく、それ自体がストーリーテラーであることを私たちに教えてくれました。

このクリエイティブな旅に参加して、HackerNoon のピクセル アイコン ライブラリを誰よりも早く試してみましょう。

クリエイティブであり続け、象徴的であり続ける。