Dans Design, Service Site Web

C’est un fait : l’iconographie fait partie intégrante du webdesign et est devenue un incontournable ces dernières années. Nous avons pu observer le style changer et s’épurer tranquillement privilégiant, par exemple, les icônes en filets grandement inspirées de ce qui se fait en mobile actuellement.

Si le visuel des icônes a changé, il en va de même pour la façon dont elles sont implémentées aux sites web et de la façon dont nous interagissons avec elles. Nous sommes à l’ère de la mobilité et des écrans haute-définition : l’utilisation d’icônes en image n’est plus adaptée à cela.
Bien sûr, nous pouvons avoir des formats d’images à 200% pour le rétina, de même que le sprite PNG est encore utilisé. Toutefois, le cap vers les « icon font » et les systèmes de font SVG est définitivement franchi.
De plus, pas d’excuses : les “icon fonts” sont compatibles jusqu’à IE8!

Pourquoi les « Icon Fonts »?

Celles-ci offrent une liberté que nous n’avions pas auparavant. Par exemple, les changements peuvent être apportés aux icônes directement par CSS (couleur, transparence).
Les bienfaits de ce changement? Fini le besoin d’avoir 2 images différentes par état, et cela permet d’avoir des transitions plus fluides et imaginatives.
Autre point à considérer : la facilité d’utilisation ouvre des portes et change la vision dont nous abordons une interface graphique.

Le designer UX peut ajouter des éléments visuels après les liens, avant les titres, pour accompagner un bouton, etc. tout en sachant que l’intégration de ceux-ci ne sera pas complexe (notamment pour les Pseudo-class CSS ) et qu’ils n’alourdiront pas le site. Bien utilisés, ils seront un plus pour l’utilisateur, qui aura plus de repères visuels pour le guider.
Avec la quantité et la qualité de polices d’icônes disponibles, cela mérite d’y porter attention et pourquoi pas, de les adopter. Je pense notamment à Font AwesomePictos et Glyphicons.

Adeptes de la création? Rassurez-vous, vous pouvez même créer votre propre police

icomoon

Autre option : les icônes SVG

Une alternative aux polices icônes est l’utilisation d’un système d’icônes SVG (inline SVG).  L’un des avantages majeurs est la possibilité de créer son propre système de police avec une meilleure mainmise sur les icônes, qui, avec SVG, peuvent soutenir de multiples couleurs ainsi que des dégradés et d’autres fonctionnalités graphiques.
Pour en savoir plus à ce sujet, je vous conseille cet article ainsi que celui-ci, qui offrent une liste très complète de fonctionnalités relatives aux images SVG.

Jean-Philippe Rousseau

Jean-Philippe Rousseau

Designer chez Kryzalid depuis 2011, Jean-Philippe dit «Jipi» aime les défis techniques et visuels. Particularité : son petit côté homme des bois.