Je n’ai jamais été un grand fan des icônes colorées et très « chargées », je trouve que ça distrait l’oeil plus que ça ne l’aide à comprendre la logique fonctionnelle d’une interface. Les icônes monochromes sont d’ailleurs très à la mode depuis quelques années maintenant sur le web, et même dans les systèmes d’exploitation récents, comme OS X, iOS et Android.
Leur aspect monochrome permet de les représenter par un symbole, au même titre que n’importe quel caractère dans une police (de caractères). Toutes les icônes peuvent ainsi être regroupées dans un seul fichier, ce qui permet d’alléger le poids des ressources à télécharger, en plus d’alléger visuellement les écrans. Bien sûr, ce regroupement pouvait aussi être fait avec des icônes sous forme d’images en utilisant la technique des Sprites CSS.
Le plus gros avantage de ces icônes est sans doute leur indépendance à la résolution de l’écran. Écran Retina ou pas, petite ou grande icône, peu importe : la même ressource est utilisée. Elle peut même être colorée, le tout grâce à de simples feuilles de styles !
Il existe pléthore de telles icônes, et beaucoup sont gratuites. On peut citer par exemple l’excellent Font Awesome ou encore les icônes incluses dans le non moins excellent Twitter Bootstrap.
Malgré tout, je voulais me familiariser avec un outil de dessin vectoriel, Affinity Designer, et j’ai décidé de commencer à concevoir quelques icônes moi-même. Voici donc quelques unes de mes icônes bien à moi :
Cliquez sur cette image pour visualiser les icônes réelles en différentes tailles.
PS :
Oui, je sais, je n’utilise pas encore mes propres icônes sur mon site web, mais ça viendra