Yes You Web!

Publié le 20 juin 2020

Très prisées pour faire passer un message ou une action, les icônes demandent une attention particulière dans leur création. Car si elles embellissent un site web, elles peuvent également, si on les néglige, « faire tache »…
Icônes, pictogrammes… Déjà, de quoi parle-t-on exactement ?

Les pictogrammes
Ce sont les représentations d’un élément réel, par exemple un nuage, une voiture, une valise.
Yes You Web!

Les idéogrammes
Ce sont les représentations d’une idée, d’un concept. Par exemple, le danger, la suppression ou la validation.
Yes You Web!

Les icônes
Ce sont la traduction visuelle des pictogrammes ou idéogrammes, dans un style graphique choisi et pensé pour accompagner le design.

Les styles d’icônes

En termes de styles, il n’y a pas vraiment de restrictions. Au fil du temps, quelques courants de modes ont réussi à s’imposer, tels que l’hyperréalisme, le « flat design ». Le plus important reste que vos icônes doivent soit s’intégrer dans le design global d’une page web, soit être en rupture, heureuse, avec leur environnement.

Il existe pléthore de sites qui proposent des collections variées d’icônes. Toujours pratique lorsqu’on sèche ou que l’on cherche une base pour travailler son design.

Quelques exemples…
Yes You Web!

Des icônes réussies…

… Sont des icônes qui sont comprises immédiatement. D’une part, parce qu’elles sont lisibles / visibles et d’autre part parce qu’elles illustrent avec clarté leur signification.

Une icône ne pourra jamais rivaliser avec le plafond de la chapelle Sixtine. Ce n’est pas une fresque, ce n’est pas un récit épique. Sinon ça s’appelle une illustration. Il faut donc rester simple dans le message.

Les icônes étant la plupart du temps de taille réduite, il faut aller droit au but et ne pas se perdre dans des détails microscopiques.
L’idéal pour les créer est de travailler a minima à une échelle x2, afin qu’elles gagnent en netteté une fois intégrées. Si vos icônes font 30 pixels une fois intégrées, dessinez-les à 60 pixels, voire plus grand.

Attention également aux subtilités telles que les filets (jamais moins épais que 1 pixel), les coins ronds etc, qui risquent de mal vivre la réduction. Si vous les créez multicolores, veillez à appliquer de forts contrastes.

Conclusion

La création d’icône est une discipline à part entière du design web qui mérite une vraie réflexion de la part du graphiste et le respect de quelques règles.

Le nec plus ultra est de proposer à vos clients une banque d’icônes personnalisée, SES icônes qu’il ou elle ne verra nulle part ailleurs. Ça fait toujours plaisir.

N’hésitez pas à partager avec nous votre approche du design d’icônes, de pictogrammes. Et si vous avez des questions, posez-les en commentaires ci-dessous.