Über den Aufbau der Pixel-Icon-Bibliothek von HackerNoon

Im aktuellen digitalen Zeitalter sich schnell entwickelnder Designs kann jedes noch so kleine Detail die gesamte User Experience (UX) erheblich beeinflussen. Beispielsweise können Icons die optische Attraktivität eines Produkts deutlich steigern.

Was als Versuch begann, unsere Abhängigkeit von Ressourcen Dritter zu verringern, hat sich zu einem bedeutenderen Unterfangen entwickelt.

Diese Open-Source-Sammlung pixeliger Symbole wurde mit einem 24-Pixel-Raster für perfekte Ausrichtung und Konsistenz entworfen und bereichert so Ihr Web-/App-/Produkt-/Seiten-/Lebenserlebnis. Inspiriert von HackerNoons Retro-Design-Atmosphäre verkörpern diese Symbole die Essenz der goldenen Ära des Internets.

Das Konzept hinter unserer Pixel-Icon-Bibliothek

Als Designer suchen wir oft nach Lösungen, um unsere Prozesse zu optimieren.

Bei HackerNoon haben wir zunächst auf Font Awesome-Symbole zurückgegriffen, um der Website die erforderliche Funktionalität und Ästhetik zu verleihen. Diese Symbole haben uns gute Dienste geleistet, da sie Konsistenz und eine große Auswahl an Optionen bieten. Da wir uns jedoch auf eine bereits bestehende Bibliothek stützten, konnten wir unsere Markenidentität nicht mehr im Zuge ihrer Weiterentwicklung bedienen.

Unsere Gründer David und Linh schlugen während eines unserer Produkttreffen zunächst die Idee vor, auf eine interne Symbolbibliothek umzusteigen. Die erste Phase konzentrierte sich darauf, die vorhandenen Font Awesome-Symbole auf HackerNoon durch unsere eigenen zu ersetzen. Letzteres konzentrierte sich darauf, diese Symbole als Symbolbibliothek für die Community zu teilen.

Dieser Übergang ermöglichte es uns, uns selbst kreativ herauszufordern. Obwohl die Reise nicht ohne Herausforderungen war, ließ jedes von uns erstellte Pixelsymbol die Persönlichkeit unserer Marke durchscheinen. Diese pixeligen Symbole sind mehr als nur visuelle Elemente; Sie sind jetzt ein Spiegelbild von HackerNoon.

Gestaltung unserer hauseigenen Ikonen: Vom Konzept bis zur Kreation

Die Erstellung einer Symbolbibliothek war eine aufregende Reise durch Kreativität, Präzision und Problemlösung. Hier ist ein Einblick in den Prozess hinter der Herstellung dieser pixeligen Symbole, die von der Essenz von HackerNoon durchdrungen sind.

1. Definieren der Designsprache

2. Ideenfindung und Skizzieren

3. Ideen entwerfen und zum Leben erwecken

4. Vorbereitung auf Community Publishing: Figma & GitHub

   
   

Definieren der Designsprache

Unsere Reise begann mit der Definition einer zusammenhängenden Designsprache. Dabei mussten wir uns für den Detaillierungsgrad, den Illustrationsstil und die Stimmung entscheiden, die unsere Symbole vermitteln sollten. Durch die Schaffung dieser Grundlage wurde die Konsistenz in der gesamten Bibliothek sichergestellt.

• Was den Detaillierungsgrad angeht, haben wir uns für einen minimalistischen Ansatz entschieden und auf klare Symbole gesetzt. Wir stellten sicher, dass die Symbole beim Skalieren kein visuelles Durcheinander erzeugen, was uns dabei half, unnötige Details zu eliminieren.

• Unser Illustrationsstil wurde insbesondere vom HackerNoon-Logo inspiriert. Der von den 80ern inspirierte Retro-Pixelblock-Designstil passt perfekt zu unserer Marke. Dadurch wurde sichergestellt, dass die Designsprache mit der gesamten visuellen Identität übereinstimmt. Wir nennen sie die Pixelated Icons.

  
  

  
  

  

• Um die Konsistenz zu gewährleisten, haben wir uns für ein 24-Pixel-Raster entschieden. (Ein 24-Pixel-Raster wird beim Entwerfen von Symbolen als ideal angesehen, da die meisten Systemsymbole im Format 24 x 24 angezeigt werden.) Dies ermöglichte es uns, Symbole für die Anzeige im 100-prozentigen Maßstab mit pixelgenauer Genauigkeit zu erstellen, indem wir Folgendes zur Verfügung stellten:

  
  

  • Ein 22-Pixel-Live-Bereich für Symbolinhalte

  • Und 1 Pixel Polsterung rund um den Live-Bereich

    
    

    

    
    

    
    

Ideenfindung und Skizzieren

Der Ideenfindungsprozess begann mit der Auflistung der durch die aktuellen Symbole dargestellten Funktionen und ihrer jeweiligen Anwendungsfälle. Anschließend überlegten wir, wie wir die Symbole für diese Funktionen neu gestalten könnten. Und dann folgten schnelle Kritzeleien und Skizzen. Diese groben Skizzen halfen uns, die Symbole in einem kleineren Maßstab zu visualisieren, was schnellere Iterationen und das Verwerfen von Ideen ermöglichte, die nicht passten.

Entwerfen der pixeligen Symbole

Der nächste entscheidende Schritt bestand darin, diese handgezeichneten Konzepte in pixelige Symbole umzuwandeln. In dieser Phase wurde hauptsächlich Adobe Illustrator verwendet, um diese pixeligen Symbole zu erstellen und sie anschließend in verschiedenen Formaten und Größen zu exportieren, um die Skalierbarkeit zu testen.

• Wir begannen damit, diese groben Skizzen in Illustrator zu importieren.

  
  

  

• Anschließend haben wir mit dem Rasterwerkzeug ein 24-Pixel-Raster erstellt, um mit dem Pixelierungsprozess zu beginnen.

• Wir haben das Live-Paint-Tool verwendet und jedes Quadrat ausgefüllt, dessen Platz mehr als 50 % einnahm.

  
  

• Nachdem wir mit dem Design zufrieden waren, erweiterten wir das Live Paint (Objektmenü → Erweitern), um Formen zu bilden.

• Als nächstes haben wir das Shape Builder Tool verwendet, um diese Formen zu vereinfachen, und voilà! Unser pixeliges Symbol war fertig.

  
  

• Anschließend haben wir das Symbol als SVG, PNG mit 12 Pixel, 16 Pixel, 24 Pixel und 48 Pixel exportiert. (Wir haben diese Größen basierend auf den Anwendungsfällen ausgewählt, die wir während der Ideenfindungsphase aufgelistet haben.)

  
  

• Darüber hinaus haben wir spezifische Details zu den Symbolen dokumentiert, beispielsweise deren Typ. Derzeit gibt es drei Typen: Solid (Fill), Regular und Light Icons. Es gibt einen weiteren Typ für jene Symbole, die nicht unter die ersten drei fallen, nämlich die Markenlogos . (Das Dokumentieren von Symbolen trägt dazu bei, die Designkonsistenz aufrechtzuerhalten und zukünftige Aktualisierungen zu erleichtern.)

  
  

Vorbereitung auf Community Publishing: Figma & GitHub

Nachdem wir alle Icons in die gewünschten Formate exportiert hatten, organisierten wir diese Icons und bereiteten sie für die Veröffentlichung in der Community vor. Zu diesem Zweck haben wir uns für Figma Community File und ein GitHub Repository entschieden.

So haben wir alles vorbereitet:

• Gruppieren und Organisieren: Wir haben die Symbole je nach Typ in vier Sätze unterteilt: einfarbig, normal, hell und Markenlogos, um Benutzern die Suche nach bestimmten Symbolen zu erleichtern.

  
  

• Benennungskonvention und Ordnerstruktur: Wir haben eine klare und beschreibende Namenskonvention eingeführt, um Benutzern das Erkennen von Symbolen zu erleichtern. Für das GitHub Repo haben wir uns für eine Ordnerstruktur wie folgt entschieden: file-type/color-theme(falls vorhanden)/size/icon-type/icon-name.file-extension (z. B.: PNG/For Dark Mode/24px/ Solid/Ad.png und SVG/Solid/Ad.svg )

  
  

• Erstellen einer Komponentenbibliothek und Definieren von Varianten in Figma: Das Komponentensystem von Figma ermöglichte es uns, Masterkomponenten für jedes Symbol zu erstellen. Wir haben für jedes Symbol Größenvarianten erstellt, sodass Benutzer die Symbole problemlos direkt durch Instanzen skalieren können. Dadurch wurde der Prozess der Aktualisierung von Symbolen optimiert und die Konsistenz zwischen verschiedenen Designdateien sichergestellt.

• Einrichten des GitHub-Repositorys: Wir haben ein spezielles GitHub-Repository für unsere Pixel-Icon-Bibliothek erstellt, das es uns ermöglicht, unsere Icons zu verwalten und mit der breiteren Design- und Entwicklungs-Community zu teilen.

  
  

• Dokumentation zu Github: Wir haben in unserem GitHub Repo eine umfassende README-Datei erstellt. Dazu gehörten eine Einführung in die Pixel-Symbolbibliothek, Informationen zu allen möglichen Methoden zur Verwendung dieser pixeligen Symbole in Ihrem Projekt, Lizenzdetails, klar definierte Beitragsrichtlinien und andere besondere Überlegungen.

  
  

  
  

• Dokumentation zu Figma: Für Figma haben wir eine separate About-Seite erstellt, die eine ausführliche Einführung in die Pixel Icon Library und ein Tutorial zur Verwendung der Komponentenbibliothek und Varianten enthielt. Zur leichteren Orientierung haben wir auch eine Liste von Symbolen mit ihren Namen beigefügt.

  
  

• Lizenzierung: Wir haben die Lizenzbedingungen für unsere Symbolbibliothek klar definiert. Die GitHub-Repo- und Figma-Datei der Pixel Icon Library sind unter der CC BY 4.0-Lizenz lizenziert, die eine Nutzung mit ordnungsgemäßer Quellenangabe an HackerNoon ermöglicht.

Das fertige Produkt:

Unsere Reise zur Erstellung der Pixel Icon Library war voller kreativer Erkundungen, Herausforderungen und Wachstum. Von unseren bescheidenen Anfängen mit Font Awesome-Symbolen über die Verwendung interner Symbole auf der gesamten Website bis hin zur Erstellung unserer ganz eigenen Pixel-Symbolbibliothek.

Dieser Prozess hat uns gelehrt, dass Ikonen nicht nur Symbole, sondern eigenständige Geschichtenerzähler sind.

Begleiten Sie uns auf dieser kreativen Reise und gehören Sie zu den Ersten, die die Pixel Icon Library von HackerNoon ausprobieren.

Bleiben Sie kreativ, bleiben Sie ikonisch.