Les icônes sont des métaphores visuelles qui permettent de repérer facilement un concept. Elles sont largement utilisées en webdesign. Mais attention, derrière leur apparente simplicité se cache un réel défis pour les designer.

Introduction

Les icônes sont des représentations graphiques qui permettent par métaphore de désigner un objet, une fonction ou une action. Elles renforcent la signification d’un contenu ou fournissent un raccourci visuel pour symboliser un élément activable d’une interface ou l’exécution d’une tâche particulière.

Les icônes sont utilisées pour différentes raisons : elles font gagner de la place sur l’interface en remplaçant de longues explications textes, elles font gagner du temps à l’utilisateur qui reconnait plus rapidement la signification d’une image que celle d’un texte.

Cependant, l’utilisation d’icônes n’est pas sans risques et demande un travail de réflexion. En effet, il est très difficile de transmettre un message compréhensible par tous les utilisateurs à l’aide d’une illustration miniature qui comporte forcément un certain degré d’abstraction. Certaines icônes ont gagné une acceptation internationale, c’est le cas du « panier » sur les sites de e-commerce, de la « maison » pour un retour à la page d’accueil ou de la « loupe » pour la recherche. Pour d’autres actions ou concepts, la symbolisation par icônes est beaucoup moins évidente.

Pour le graphiste, la création d’un set d’icônes est un véritable défis aussi bien sur le plan de la conception (choix de la représentation) que sur le plan réalisation (dessin et retranscription infographique), les icônes étant de véritables illustrations numériques le plus souvent en 3 dimensions.

Voici quelques recommandations à garder à l’esprit lorsque l’on souhaite se lancer dans la réalisation d’un set d’icônes.

L’unité

Les icônes d’une même application doivent rester cohérentes sur le plan graphique afin de maintenir son unité visuelle.

Pour obtenir cette unité graphique, il faut dessiner toutes ses icônes avec :

• la même palette de couleur
• le même style graphique
• la même perspective
• la même direction de lumière et traitement des ombres
• la même taille/proportion
• les mêmes conventions

Toutes ces caractéristiques devront être décrites avant la phase de création dans une charte graphique pour constituer un document de référence.

Les couleurs

Choisissez une palette de couleur qui vous servira de référence pour colorier vos icônes. Vous pourrez faire varier la valeur et la saturation de ces teintes pour dessiner les ombres et les effets de lumière.

Par exemple, choisissez trois variantes pour chaque couleur (bleu, rouge, vert, jaune, violet, marron), quatre variantes de bleu gris pour les effets métalliques et quatre variantes de gris.

Le style

Il y a différentes manières de dessiner une icône : en aplat ou en relief, en valeurs de gris ou en couleurs, avec un effet brillant … Peu importe le style du moment qu’il est cohérent avec l’identité visuelle de l’application et que tous les icônes soient dessinées dans le même style.

Pour définir un style vous pouvez par exemple réfléchir sur :

- Les lignes de contour des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les bordures internes des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les dégradés (présence ou pas, radial ou linéaire )

- Les ombres (présence ou pas, dégradé-opacité-flou autorisé ou pas, couleur, position par rapport à l’objet)

Tous ces éléments peuvent varier selon la taille des sets d’icônes. Par exemple on ne met généralement pas d’ombres sur les icônes de petites tailles car cela les rends moins visible.

La perspective

Vous avez la possibilité de dessiner vos icônes sous différentes perspectives mais pour une taille donnée, choisissez un type de perspective et tenez-vous y.

Généralement les petites tailles d’icônes (16×16, 22×22, 24×24) sont dessinées à plat, de face par soucis de visibilité.

Les tailles moyennes (32×32) et grandes (48×48) peuvent être dessinées en perspective.

Vous pouvez utiliser une grille de référence pour conserver la même perspective pour toutes les icônes d’une même taille.

La lumière et les ombres

Les effets de lumière (dégradé, brillance) et les ombres apportent du modelé à vos icônes. Leurs présences n’est pas obligatoire, tout dépend du style que vous voudrez mettre en place.

Si vous dessinez des icônes en 3 dimensions, pensez à fixer la direction de la lumière afin de traiter les dégradés, les brillances et les ombres de la même manière sur toutes vos icônes.

Si votre icône est complexe, c’est à dire composée de plusieurs objets, traitez la lumière sur chaque objets séparément.

Évitez les ombres sur les petites taille d’icônes au risque de brouiller leur visibilité.

La taille et les proportions

Vous pouvez avoir besoin de décliner vos icônes en différentes tailles. Sachez que selon la taille de l’icône, il sera parfois préférable de changer la façon de les dessiner pour leur garantir une bonne visibilité. Nous en avons déjà parlé, il s’agit par exemple de la présence ou non des ombres, le choix de la perspective …

Le cadre dans lequel les icônes sont dessinées est le plus souvent carré.

Les tailles en pixels les plus communes sont (16×16, 22×22, 24×24, 32×32, 48×48, 128×128, 512×512) mais vous pouvez en choisir d’autres si besoin.

Définissez dans votre charte graphique dans quel contexte chaque type de taille doit être utilisé.

Pour que vos icônes soient utilisables sur tous les arrières-plans, dessinez-les sur un fond transparent. Vous devez prévoir également la taille de la bordure transparente entre le bord extérieur de l’objet iconique et le bord de l’image. Elle peut par exemple être de 1 pixel.

Les conventions

Vous pouvez choisir d’utiliser des signes comme référence à un type d’action donné.

Exemples :

Une action de création peut être symbolisée par le signe plus.
Une action de suppression peut être symbolisée par un signe moins.
Une action de fermeture peut être symbolisée par une croix rouge.

Les points d’attaches de ces signes sur l’icône doivent être clairement définie dans la charte graphique.

Process de création

Lorsque l’on dessine une icône, notre attention doit se porter sur la clarté suggestive de cette icône. L’utilisateur devra comprendre au premier coup d’œil la signification véhiculée par l’icône. Certaines conventions se sont progressivement mises en place et il ne faut pas hésiter à les réutiliser.

Par exemple le « message » est souvent représenté par une enveloppe, le « retour à l’accueil » par une maison, le « répertoire » par une chemise de classement avec onglet …
Restez simple car trop d’originalité dans la symbolisation peut nuire à la compréhension du message.

Pour distinguer les icônes, ou familles d’icônes entre elles, pensez à utiliser des silhouettes distinctes. Pour cela utilisez les formes usuelles (carré, rectangle, triangle, cercle)

Le brief créatif

Comme tout bon projet qui se respecte, un brief créatif est indispensable avec votre client ou avec vous même (si c’est un projet personnel) avant de foncer tête baissée sur votre ordinateur.

Le brief créatif à pour but de donner une direction à votre travail, il devra vous permettre de répondre aux questions suivantes :

- Quel sont les caractéristiques graphiques de l’environnement dans lequel les icônes seront affichées ?
Connaitre l’environnement graphique de l’application ou du site web qui accueillera les icônes vous permettra d’harmoniser et d’intégrer de façon cohérente le design de vos icônes.

- Quels sont les concepts, les actions, les fonctionnalités qui seront à illustrer ?
Cette étape est très importante. Il s’agit de lister toutes les actions qui seront représentés par une icône.

- Dans quels environnements (page, menus, barre d’outils …) les icônes seront affichés ?
Selon l’environnement dans lequel l’icône viendra s’insérer, sa taille et ses caractéristiques ne seront pas les mêmes.

- Quelles tailles d’icônes faut-il prévoir ?
Il faut définir en amont la taille en pixel des sets d’icônes à dessiner.

- Quel est le profil des utilisateurs ?
Selon le profil des utilisateurs, notamment culturel, la représentation des concepts peu varier. Une boite aux lettres aux Etats-Unies ne ressemble pas à une boite aux lettres en Europe. Il sera souvent judicieux de trouver le représentation qui sera la plus universelle.

Conception : la méthode de Yegor Gilyov

Yegor Gilyov du studio graphique Turbo Milk nous explique dans son article Designing an iconic language une méthodologie judicieuse pour plannifier la réalisation d’un set d’icônes.

Voici un résumé de cette méthode :

Imaginons une application de facturation pour laquelle un client vous demande de dessiner un set d’icônes.

La première étape va consister à lister les caractéristiques de cette application.

« Les factures s’effectuent en ligne »
« Les factures peuvent être réglées en plusieurs versements » …

La seconde étape va répertorier toutes les commandes à illustrer par une icône.

Commandes pour gérer la facturation :
- Ajouter une facture
- Supprimer une facture
- Envoyer une facture
- Afficher les factures payées …

Commandes pour gérer les lignes de facturation :
- Effacer complètement la ligne …

Commandes pour enregistrer les commandes :
- Ajouter un paiement
- Supprimer un paiement …

Et ainsi de suite.

Les phrases doivent être courtes, précises et concises. Vous remarquerez que dans ces phrases vous pouvez repérer la présence d’un mot d’action, d’un mot qui désigne un objet, d’un mot qui désigne un état restrictif et un mot qui désigne une qualité.

« Ajouter une facture » (action=ajouter, objet=facture)

« Afficher les factures payées » (action=afficher, objet=facture, état=payées)

« Effacer complètement la ligne » (action=effacer, objet=la ligne, qualité=complètement)

Une fois ce travail d’analyse effectué, il s’agit de regrouper tous les mots d’actions, d’objets, d’état et de qualité.

ACTIONS :
- Ajouter
- Effacer
- Afficher …

OBJETS :
- Facture
- Paiement
- Ligne de facture …

ETAT :
- Payées
- Envoyées
- Tous
- En cours
- Epuisées …

QUALITE :
- Complètement
- Dans la facture
- Dans la pile …

L’étape qui suit est l’étape de recherche pour représenter chacun des concepts listés.

Recherche

Cette étape de recherche peut se faire à l’aide d’une réunion de Brainstorming. Vous allez lister toutes les idées d’illustrations qui vous viennent à l’esprit sans censures ni jugement. Dessinez des croquis, pas la peine à cette étape de soigner les détails de réalisation des icônes. Dans un second temps, vous effectuerez un tri des meilleurs idées. La règle du Brainstorming veut que les personnes qui produisent les idées soient différentes des personnes qui sélectionnent les idées. Adaptez cette procédure selon vos moyens.

Pour voir une illustration ce cette étape, reportez-vous à l’article de Yegor Gilyov : Designing an iconic language

Process

Voici une proposition de workflow pour la réalisation graphique de vos icônes :

- Définir la charte graphique de vos icônes
- Création de la forme générale, faire un croquis (penser au choix de perspective)

- Ajout des détails (travailler en noir et blanc)

- Réalisation sur ordinateur, penser à la présence ou pas de lignes de contours internes ou externes

- Rajouter la couleur
- Appliquer les dégradés en fonction de la direction de la lumière

- Ajouter les ombres

Erreurs à éviter

Il y a certaines erreurs à éviter et qu’il faut garder dans un coin de la tête lorsque l’on se lance dans le processus de création des icônes.

Voici quelques exemples :

Utiliser du texte dans vos icônes
Une icône est une métaphore visuelle qui doit se suffire à elle même. Si votre icône est pertinente, elle n’a pas besoin de texte pour l’expliciter. De plus le texte dans une icône devient vite illisible avec la réduction de taille.

Ajouter des informations accessoires
Une icône doit être conçue avec le strict minimum. Trop d’informations brouillent le message et diminue la lisibilité de l’icône. Souvenez-vous « less is more ».

Se baser sur un jeu de mots
Se baser sur un jeu de mot pour dessiner une icône est restrictif à la langue à laquelle elle s’applique. De plus il n’est pas sure que le jeu de mots soit compris de tous et rapidement.

Vous pouvez compléter cette liste d’erreurs en lisant l’article de Denis Kortunov qui s’intitule 10 Mistakes in Icon Design

Conclusion

Une icône bien conçue est un puissant outil de communication. C’est un élément efficace et esthétique pour fournir aux utilisateurs le moyen de scanner rapidement une page web. De plus, elles facilitent la compréhension du contenu et des fonctionnalités tout en attirant l’attention des utilisateurs. Les icônes peuvent dans certains cas remplacer avantageusement du texte encombrant et inutile.

Ne vous méprenez pas sur l’apparente simplicité des icônes, leur réalisation est bien plus ardue qu’il n’y parait. Il faut en effet connaître les règles de la perspective, savoir dessiner, comprendre les caractéristiques des ombres et des effets de lumières et maitriser l’utilisation des couleurs. Sur le plan graphique, la réalisation d’un set d’icônes réclame méthode, reflexion et des talents d’illustration.

Sources et autres liens :

Guide de création des icônes pour le système d’exploitation Linux Fédora
7 Principles of Effective Icon Design
Designing Effective Icons (Environnement graphique Gnome)