Le guide super simple de l'iconographie

Combien de temps vous faut-il en moyenne pour concevoir une icône personnalisée ?

Quelques minutes ? Dix minutes? Plus long? Et si nous vous montrions comment créer 10 superbes icônes en moins de 10 minutes ?

L'iconographie est une forme de communication qui s'ajoute au langage visuel d'une marque, de sorte qu'un ensemble d'icônes personnalisées est plus significatif et engageant qu'un simple ensemble d'icônes génériques. La plupart des concepteurs ne prennent jamais la peine d'apprendre à créer des icônes personnalisées, principalement parce que c'est encore un autre cours à ajouter à notre file d'attente d'apprentissage.

J'ai donc entrepris de créer un guide super simple pour vous aider à apprendre les bases de l'iconographie en moins de 10 minutes (je le pense).

La possibilité de créer des icônes personnalisées vous ouvrira un tout nouveau monde pour commencer à créer des formes complexes pour vos projets, ce qui vous distinguera du reste de la foule, vous donnant un avantage concurrentiel en tant que designer.

À l'origine, j'ai été inspiré pour créer ce guide par ce GIF de Morgan Allan Knutson montrant comment créer une icône de services de localisation en quelques secondes. Je l'ai trouvé rafraîchissant, intelligent et rapide. Il démystifie le processus de création d'icônes personnalisées et montre à quel point cela peut être simple. Une icône est en fait une forme géométrique qui peut résulter d'une combinaison ou d'une déformation de formes élémentaires, telles que des carrés, des triangles ou des cercles. Une règle d'or dans la conception d'un logo ou d'une icône est de garder les choses simples.

Le but de cet article est de créer 10 icônes en 10 secondes chacune, en utilisant uniquement des formes simples.

Remarque importante : nous utiliserons Adobe Illustrator dans cet article, mais vous pouvez obtenir les mêmes résultats en utilisant Sketch ou même Figma. Chaque fois que nous aurons besoin d'ajouter ou de supprimer un point sur une forme, nous utiliserons "l'outil Plume (P)". La sélection et le déplacement des points se feront avec « l'outil de sélection directe (A) ».

Icône d'oeil

Alignez au centre quatre cercles, du plus grand au plus petit, en modifiant les couleurs, comme indiqué. Sur le plus grand cercle, vers l'arrière, éloignez les points gauche et droit du centre. Enfin, déplacez le plus petit cercle intérieur vers le bord du suivant pour créer un effet d'éclairage sur l'iris.

Astuce : Au lieu d'utiliser un cercle blanc, soustrayez simplement (à l'aide du panneau Pathfinder) les deux cercles du cercle sous chacun d'eux. Il crée un résultat plus propre sur le fond.

Icône de flèche

Tout dépend de l'endroit où vous ajoutez ces points supplémentaires sur les bords du carré initial. Astuce : comme alternative, vous pouvez simplement tracer une fine ligne en forme de flèche.

Icône de la batterie

En utilisant un carré avec un trait et deux avec un remplissage. Jouez simplement avec les proportions, tout en incluant un carré rempli dans la forme du trait et en gardant le second à l'extérieur pour former la pointe de la batterie.

Astuce : Jouez avec l'épaisseur du trait et le rembourrage pour maintenir un bon équilibre visuel.

Icône de la liste à puces

Commencez avec un simple carré; dupliquez-le une fois à sa droite ; et remodelez-le en un long rectangle. Sélectionnez le tout et dupliquez-le deux fois tout en gardant un espace de taille carrée entre les deux.

Astuce : Remplacez le carré par des cercles pour créer un aspect plus doux.

Icône de nuage

Dessinez trois cercles de tailles différentes. Alignez en bas les deux plus petits cercles pour avoir une base et placez le plus grand cercle entre les deux, à une position plus élevée. Créez la base du nuage en déformant l'un des petits cercles.

Conseil : utilisez différentes tailles de cercle pour obtenir un nuage d'aspect plus organique.

Icône de lecture avant

Dessinez un long rectangle. Ajoutez un point au centre du bord gauche et supprimez le point supérieur et inférieur. Maintenant que vous avez un triangle, dupliquez simplement cette forme une fois vers la droite pour compléter l'icône.

Conseil : Pour le faire encore plus rapidement, commencez simplement par un triangle au lieu d'un carré.

Icône de l'entonnoir

Commencez par un long rectangle. Ajoutez un point au centre des bords gauche et droit. Maintenant, étirez horizontalement le bord supérieur et vous avez terminé.

Astuce : placez deux carrés bord à bord et étirez simplement le bord le plus haut horizontalement.

Icône lecture/pause

Commencez avec trois longs rectangles en parallèle. Transformez le rectangle le plus large en triangle.

Astuce : Sinon, dessinez simplement un triangle, suivi de deux rectangles parallèles.

Icône de flèche de positionnement

Celui-ci est un remix de l'icône du service de localisation de Morgan. Dessinez simplement un carré, puis tirez le point inférieur gauche dans une direction diagonale, en vous déplaçant vers le haut jusqu'à ce que vous passiez le point opposé.

Conseil : dans Illustrator, appuyer sur la touche Maj tout en faisant glisser le point permet de conserver la symétrie tout en conservant l'angle diagonal droit.

Icône de broche de position

Frappez un cercle à l'intérieur d'un plus grand (en utilisant le panneau Pathfinder). Faites glisser le point le plus bas vers le bas et accentuez l'angle formé - passez à «l'outil stylo (P)», puis tout en maintenant la touche «Maj», cliquez sur le point.

Astuce : Utilisez un coin arrondi sur ce point de basculement pour adoucir l'aspect - ajustez la valeur du « rayon du coin » dans le panneau d'options « Transformer » pendant que le point est sélectionné.

Icône de son

Tout comme l'icône en forme d'entonnoir mais avec une rotation de 90 degrés.

Conseil : Copiez et collez simplement l'icône de l'entonnoir et faites-la pivoter dans le sens des aiguilles d'une montre.

Icône Vague

Tracez une ligne droite et ajoutez des points à égale distance sur sa longueur. Faites glisser vers le bas les points de modification et arrondissez chaque coin au maximum, jusqu'à ce que tout soit lisse.

Conseil : arrondissez les pointes de ligne pour un look encore plus lisse.

Icône Toptal

C'est l'icône bonus.

Dessinez un carré avec un trait suffisamment épais. À l'aide de l'outil ciseaux, coupez les points en haut à droite et en bas à gauche. Cela divisera la forme en deux. Déplacez la moitié inférieure vers le haut et faites pivoter l'ensemble de 45 degrés dans le sens inverse des aiguilles d'une montre.

Astuce : Faites attention à l'épaisseur des lignes, et à l'espace blanc formé à l'intérieur du logo.

Une icône vaut 1 000 mots.

On entend souvent dire qu'une image vaut mille mots. Eh bien, cela s'applique beaucoup aux icônes, qui remplacent les longues phrases et les mots pour optimiser l'espace visuel, la convivialité et l'esthétique. Savoir créer un ensemble d'icônes simples et efficaces peut aller très loin. Et nous venons de voir à quel point cela peut être rapide et facile en observant et en utilisant un ensemble de formes de base.

En résumé, les 10 grandes règles de l'iconographie sont :

• Rendez-le symbolique et significatif.
• Vous l'avez entendu : restez simple. Le style ne doit pas compromettre la lisibilité.
• Soyez intentionnel et réfléchi. Réfléchissez avant de créer.
• Assurez-vous qu'il fonctionne dans différentes tailles.
• Gardez à l'esprit l'uniformité.
• Des vecteurs uniquement, s'il vous plaît !
• N'utilisez les couleurs que lorsque cela est nécessaire et faites-le avec précaution.
• Cela aide à connaître la géométrie de base.
• Pensez « affordance » pour vous assurer que l'icône conçue aidera la conception globale.
• L'iconographie est un langage qui devrait être universel.
• Bonus : L'alphabet n'est qu'un ensemble de 26 icônes.

Jouez et voyez ce que vous pouvez trouver en moins de 10 secondes.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques