Bon, OK, le sujet de cet article paraît simple à première vue. A première vue, oui. Le design d’icône(s) est un art à part entière, il ne s’agit pas simplement de créer l’image en 32×32 que le système de validation nous demande ! Loin de là!
L’idée
Comme souvent, je commence par vous expliquer le but de l’article. Une fois n’est pas coutume ! Il est très important de différencier les notions d’icônes et de logo. Un logo représente une marque, il est destiné à plusieurs types d’usages (voir mon article sur la création d’un bon logo) et est sensé durer dans le temps (ne pas se démoder…). Une icône, si l’on prend la signification la plus ancienne, est une représentation imagée d’une idée religieuse. Cette définition est toujours valable, mais n’est plus seulement représentative d’une idéologie religieuse. Aujourd’hui, les icônes sont présentes sur tous les supports numériques ! En effet, sur votre appareil photo, vous avez une petite icône qui symbolise que vous êtes en mode automatique, une autre sur votre téléphone qui vous indique que vous avez reçu un sms… Et j’en passe ! L’idée est donc de faire parler ses icônes, de savoir en quoi elles sont importantes, et surtout comment les imaginer…
Parles je te dis !
Si je vous montre cette icône et que je vous demande à quoi elle sert … 
Un logiciel de dessin? Un bouton pour choisir une couleur ? On se sait pas vraiment, même si on sait deviner qu’il n’y aura aucun rapport avec … qu’avec autre chose ! 
Une icône doit être capable de s’auto suggérer… Des exemples ? 
Pour la première, on peut supposer qu’il y aura un rapport avec de la musique ! Peut être une application musicale, un jeu… La deuxième, nous laisse imaginer qu’en cliquant dessus, nous pourrons ouvrir notre application de photo, ou notre galerie…
Bon, pour résumer, une icône n’indique pas toujours exactement son rôle, c’est pourquoi elle est presque toujours associée à un texte. Un bon exemple est l’explorateur Windows :
Ici, les icônes sont associées à un texte, qui nous permet d’identifier l’action. Imaginez maintenant la même chose sans texte ? Et sans icônes ?
Un repère visuel
L’icône sert aussi à guider l’utilisateur vers son objectif. J’ai besoin de consulter mes mails, je sais que je dois cliquer sur l’icône de ma messagerie, et même qu’après un temps de prise en main et d’habitude, le texte ne sera plus nécessaire ! Un exemple ici avec un pack d’icônes que j’ai réalisé : 
Ici, les icônes sont capable de s’auto-suggérer, mais pas de symboliser une application (par exemple) sans habitude. Elles « doivent » donc être associées à un texte descriptif… Mails, Fichiers, Horloge, Camera,…
Autre chose maintenant… Imaginez que vous n’avez jamais vu cette image avant :
Est-ce que vous devinez qu’il s’agit d’un endroit ou vous pourrez soulager vos besoins naturels urgents ? C’est ce qui s’appelle un idéogramme. La représentation d’une idée par un symbole, qui permet de dépasser la barrière de la langue. Je n’ai aucune notion de finnois, mais je suis sûr que je saurais trouver les toilettes !
Les différents styles
Il n’y a pas vraiment de règle pour les utiliser… Le choix dépend du style que vous souhaitez appliquer !
Je vais prendre l’exemple d’un appareil photo, pour pouvoir comparer :
| Les « glyphs » : des formes simples, minimalistes, qui symbolisent avant tout |  |
| Les « outline » : la mode actuelle, instaurée par iOS 7 |  |
| Les « flat » : des formes simples, des couleurs douce, pâles… La tendance du moment ! Instauré par Windows 8 |  |
| Les « Photoréalistes » : elles ressemblent le plus possible à la réalité, comme si une photo avait été prise |  |
| Les 3D : la mode Windows XP, un design riche en relief (bah oui, c’est de la 3D). Plus tellement à la mode |  |
| Les « dessiné main » : pas d’explication nécessaire je pense… Idéal pour une application de dessin ou une application pour enfant… |  |
| Les cartoon : des formes dessin animé, des couleurs souvent vives… |  |
Voici donc la plus grande partie des différents types d’icônes. Il ne faut pas oublier un critère important, la taille. Plus la taille est réduite, plus l’icône perd en détails et donc en informations visibles simplement.
Le secret de fabrication
Il n’y en a pas !
Il suffit simplement de réfléchir un peu :
- A quoi va me servir l’icône ? un bouton, un repère non cliquable ?
- Que doit elle représenter ? une application pour trouver un restaurant, elle me permettra d’ajouter des fichiers (un « + ») ?
- Quel sera le support utilisé ? une affiche ? un Smartphone ?
- Quelle taille aura mon icône ? Il faudra prévoir un design « scalable » pour pouvoir l’adapter facilement à une autre dimension.
Ensuite, peut être qu’il faudra designer l’icône en respectant des guidelines, une charte graphique… Libre au graphiste de se faire plaisir, tant qu’il symbolise correctement sa fonction !
Pour conclure, je dirais qu’une icône ne peut pas toujours indiquer précisément sa fonction, mais qu’elle doit être capable de s’auto-suggérer.
N’hésitez pas à réagir et à me poser vos questions en utilisant le formulaire juste en dessous