Sur la création de la bibliothèque d'icônes Pixel de HackerNoon

À l’ère numérique actuelle où les conceptions évoluent rapidement, chaque détail mineur peut affecter de manière significative l’expérience utilisateur (UX) globale. Les icônes, par exemple, peuvent notamment améliorer l'attrait visuel d'un produit.

Ce qui a commencé comme un effort visant à réduire notre dépendance à l’égard de ressources tierces s’est transformé en une entreprise plus importante.

Cette collection open source d' icônes pixélisées a été conçue à l'aide d'une grille de 24 pixels pour un alignement et une cohérence parfaits, enrichissant ainsi votre expérience Web/application/produit/page/vie. Inspirées par l'ambiance rétro de HackerNoon, ces icônes résument l'essence de l'âge d'or d'Internet.

Le concept derrière notre bibliothèque d'icônes Pixel

En tant que concepteurs, nous recherchons souvent des solutions pour rationaliser nos processus.

Chez HackerNoon, nous nous sommes initialement tournés vers les icônes Font Awesome pour ajouter les fonctionnalités et l'esthétique nécessaires au site. Ces icônes nous ont bien servi en offrant une cohérence et un large éventail d'options. Cependant, en nous appuyant sur une bibliothèque préexistante, nous ne pouvions plus servir notre identité de marque au fur et à mesure de son évolution.

Nos fondateurs, David et Linh , ont initialement proposé l'idée de passer à une bibliothèque d'icônes interne lors de l'une de nos réunions produit. La première phase s'est concentrée sur le remplacement des icônes Font Awesome existantes sur HackerNoon par les nôtres. Ce dernier s'est concentré sur le partage de ces icônes en tant que bibliothèque d'icônes pour la communauté.

Cette transition nous a permis de nous remettre en question de manière créative. Même si le voyage n'a pas été sans défis, chaque icône pixelisée que nous avons créée a permis à la personnalité de notre marque de transparaître. Ces icônes pixellisées sont devenues plus que de simples éléments visuels ; ils sont désormais le reflet de HackerNoon.

Concevoir nos icônes internes : du concept à la création

Créer une bibliothèque d'icônes a été un voyage exaltant à travers la créativité, la précision et la résolution de problèmes. Voici un aperçu du processus de création de ces icônes pixellisées, imprégnées de l'essence de HackerNoon.

1. Définir le langage de conception

2. Idéation et esquisse

3. Concevoir et donner vie à des idées

4. Préparation à la publication communautaire : Figma et GitHub

   
   

Définir le langage de conception

Notre voyage a commencé par la définition d’un langage de conception cohérent. Cela impliquait de décider du niveau de détail, du style d’illustration et de l’ambiance que nous souhaitions transmettre à nos icônes. L'établissement de cette base a assuré la cohérence dans toute la bibliothèque.

• Pour le niveau de détail, nous avons opté pour une approche minimaliste et visé des icônes épurées. Nous avons veillé à ce que les icônes ne créent pas d'encombrement visuel une fois mises à l'échelle, ce qui nous a aidé à éliminer les détails inutiles.

• Notre style d'illustration a été particulièrement inspiré du logo HackerNoon . Le style rétro des blocs de pixels inspiré des années 80 est parfaitement en phase avec notre marque. Cela garantissait que le langage de conception était cohérent avec l’identité visuelle globale. Nous les appelons les icônes pixélisées.

  
  

  
  

  

• Pour maintenir la cohérence, nous avons opté pour une grille de 24 pixels. (Une grille de 24 pixels est considérée comme idéale lors de la conception d'icônes puisque la plupart des icônes système sont affichées en 24 x 24). Cela nous a permis de créer des icônes pouvant être visualisées à une échelle de 100 % avec une précision parfaite au pixel près en nous fournissant :

  
  

  • Une zone en direct de 22 px pour le contenu des icônes

  • Et 1 px de rembourrage entourant la zone en direct

    
    

    

    
    

    
    

Idéation et esquisse

Le processus d'idéation a commencé par la liste des fonctions représentées par les icônes actuelles et leurs cas d'utilisation respectifs. Nous avons ensuite réfléchi à la manière dont nous pourrions repenser les icônes pour ces fonctionnalités. Et puis suivi de gribouillages et de croquis rapides. Ces esquisses nous ont aidés à visualiser les icônes à une plus petite échelle, permettant des itérations plus rapides et l'élimination des idées qui ne correspondaient pas.

Concevoir les icônes pixélisées

La prochaine étape cruciale consistait à convertir ces concepts dessinés à la main en icônes pixellisées. Cette phase impliquait principalement d'utiliser Adobe Illustrator pour créer ces icônes pixélisées, puis de les exporter dans différents formats et tailles pour tester l'évolutivité.

• Nous avons commencé par importer ces ébauches dans Illustrator.

  
  

  

• Nous avons ensuite créé une grille de 24 pixels à l'aide de l'outil Grille pour commencer le processus de pixellisation.

• Nous avons utilisé l'outil Live Paint et rempli chaque carré occupant plus de 50 % de l'espace.

  
  

• Une fois que nous avons été satisfaits du design, nous avons étendu Live Paint (Menu Objet → Développer) pour former des formes.

• Ensuite, nous avons utilisé l'outil Shape Builder pour simplifier ces formes, et voilà ! Notre icône pixellisée était prête.

  
  

• Nous avons ensuite exporté l'icône au format SVG, PNG à 12px, 16px, 24px et 48px. (Nous avons sélectionné ces tailles en fonction des cas d'utilisation que nous avons répertoriés lors de la phase d'idéation)

  
  

• De plus, nous avons documenté des détails spécifiques sur les icônes, tels que leur type. Actuellement, nous avons trois types : icônes solides (remplissage), régulières et claires . Il existe un autre type d'icônes qui ne relèvent pas des trois premiers, à savoir les logos de marque . (La documentation des icônes aide à maintenir la cohérence de la conception et facilite les mises à jour futures)

  
  

Préparation à la publication communautaire : Figma et GitHub

Une fois que nous avons exporté toutes les icônes dans les formats souhaités, nous avons organisé ces icônes et les avons préparées pour la publication communautaire. Nous avons choisi Figma Community File et un référentiel GitHub à cet effet.

Voici comment nous avons tout préparé :

• Regroupement et organisation : nous avons organisé les icônes en quatre ensembles en fonction de leur type : logos unis, réguliers, légers et de marque, permettant aux utilisateurs de rechercher plus facilement des icônes spécifiques.

  
  

• Convention de dénomination et structure des dossiers : nous avons établi une convention de dénomination claire et descriptive pour permettre aux utilisateurs d'identifier plus facilement les icônes. Pour le Repo GitHub, nous avons opté pour une structure de dossiers comme suit : file-type/color-theme(if any)/size/icon-type/icon-name.file-extension (ex : PNG/For Dark Mode/24px/ Solid/Ad.png et SVG/Solid/Ad.svg )

  
  

• Création d'une bibliothèque de composants et définition de variantes dans Figma : le système de composants de Figma nous a permis de créer des composants principaux pour chaque icône. Nous avons créé des variantes de taille pour chaque icône, permettant aux utilisateurs de redimensionner les icônes directement à travers les instances sans aucun problème. Cela a rationalisé le processus de mise à jour des icônes et assuré la cohérence entre les différents fichiers de conception.

• Configuration du référentiel GitHub : nous avons créé un référentiel GitHub dédié pour notre bibliothèque d'icônes Pixel, nous permettant de gérer et de partager nos icônes avec la communauté de conception et de développement au sens large.

  
  

• Documentation sur Github : nous avons créé un fichier README complet dans notre dépôt GitHub. Cela comprenait une introduction à la bibliothèque d'icônes Pixel, des informations sur toutes les méthodes possibles pour utiliser ces icônes pixélisées dans votre projet, les détails de la licence, des directives de contribution bien définies et d'autres considérations spéciales.

  
  

  
  

• Documentation sur Figma : pour Figma, nous avons créé une page À propos distincte, qui comprenait une introduction approfondie à la bibliothèque d'icônes Pixel et un didacticiel sur l'utilisation de la bibliothèque de composants et des variantes. Nous avons également inclus une liste d'icônes avec leurs noms pour une référence facile.

  
  

• Licence : nous avons clairement défini les conditions de licence pour notre bibliothèque d'icônes. La bibliothèque d'icônes Pixel GitHub Repo et le fichier Figma sont sous licence CC BY 4.0, qui permet une utilisation avec une attribution appropriée à HackerNoon.

Le produit fini :

Notre parcours pour créer la bibliothèque d'icônes Pixel a été rempli d'exploration créative, de défis et de croissance. Depuis nos humbles débuts en utilisant les icônes Font Awesome jusqu'à l'utilisation des icônes internes sur l'ensemble du site et, enfin, la création de notre propre bibliothèque d'icônes Pixel.

Ce processus nous a appris que les icônes ne sont pas de simples symboles mais sont des conteurs à part entière.

Rejoignez-nous dans ce voyage créatif et soyez parmi les premiers à essayer la bibliothèque d'icônes Pixel de HackerNoon.

Restez créatif, restez emblématique.