Conception De L'interface Utilisateur

Le guide super simple de l'iconographie

En moyenne, combien de temps vous faut-il 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 ajoute au langage visuel d’une marque. Un jeu d’icônes personnalisé est donc plus significatif et attrayant qu’un simple jeu d’icônes générique. La plupart des concepteurs n’ont jamais pris la peine d’apprendre à créer des icônes personnalisées, principalement parce qu’il s’agit là d’un autre cours à ajouter à notre file d’attente de formation.

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

Être capable de créer 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 concepteur.

À 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 de base, telles que des carrés, des triangles ou des cercles. Une règle d'or dans la conception de logo ou d'icône est de garder les choses simples.

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

Note 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 avons 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 à l'aide de «l'outil de sélection directe (A)».

Icône de l'oeil

icône de l

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.

Pointe: Au lieu d'utiliser un cercle blanc, soustrayez simplement (à l'aide du panneau Pathfinder) les deux cercles du cercle sous chacun d'eux. Cela crée un résultat plus net sur l'arrière-plan.

Icône de flèche

icône de flèche

Il s'agit de savoir où vous ajoutez ces points supplémentaires sur les bords du carré initial. Pointe: Comme alternative, vous pouvez simplement dessiner une ligne fine en forme de flèche.

Icône de batterie

icône de batterie

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

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

Icône de liste à puces

Commencez par un simple carré; dupliquez-le une fois à sa droite; et le remodeler comme un long rectangle. Sélectionnez la chose entière et dupliquez-la deux fois tout en gardant un espace de taille carrée entre les deux.

Pointe: 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.

Pointe: Utilisez différentes tailles de cercle pour obtenir un nuage d'apparence plus organique.

ar contre vr contre mr

Icône de lecture avant

Dessinez un long rectangle. Ajoutez un point au centre du bord gauche et supprimez les points 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.

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

Icône de l'entonnoir

Icône de l

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é.

Pointe: Placez deux carrés bord à bord et étirez simplement le bord supérieur horizontalement.

Icône Lecture / Pause

Commencez par trois longs rectangles en parallèle. Remodeler le rectangle le plus large en triangle.

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

Icône de flèche de position

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é.

Pointe: 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 à droite.

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 tout droit vers le bas et accentuez l'angle formé - passez à «l'outil Plume (P)», puis tout en maintenant la touche «Maj», cliquez sur le point.

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

Icône de son

Tout comme l'icône de l'entonnoir mais à une rotation de 90 degrés.

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

Icône de vague

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

Pointe: Complétez les pointes de ligne pour un look encore plus lisse.

Icône ApeeScape

C'est l'icône bonus.

Dessinez un carré avec un trait assez é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.

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

Une icône vaut 1000 mots.

On entend souvent qu'une image vaut mille mots. Eh bien, cela s'applique beaucoup aux icônes, qui remplacent de longues phrases et des mots pour optimiser l'espace visuel, la convivialité et l'esthétique. Savoir comment 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 principales 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 que cela fonctionne dans différentes tailles.
Gardez à l'esprit l'uniformité.
Vecteurs uniquement, s'il vous plaît!
N'utilisez des couleurs que lorsque cela est nécessaire et faites-le avec précaution.
Cela aide à connaître la géométrie de base.
Pensez à «l'abordance» 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.