Êtes-vous du type polices icônes ou SVG?
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 polices icônes et les systèmes de font SVG est définitivement franchi. De plus, pas d’excuses : les polices icônes sont compatibles jusqu’à IE8!
Pourquoi les polices icônes?
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. Il faut savoir que l’intégration de ceux-ci ne sera pas complexe (notamment pour les Pseudo-class CSS ). 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 Awesome, Pictos et Glyphicons.
Adeptes de la création? Rassurez-vous, vous pouvez même créer votre propre police!
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 mainmise sur les icônes. Avec SVG, ils 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. Ils offrent une liste très complète de fonctionnalités relatives aux images SVG.
