Un jeu d'icônes pour un site ou une application : comment le prévoir et le commander

Les icônes sont ces petites images qui indiquent où toucher : accueil, panier, livraison, assistance, profil. Quand elles proviennent de différents packs gratuits, le site a l'air rapiécé, avec des traits épais à côté de traits fins et des angles arrondis à côté d'angles vifs. Un jeu assorti règle ce problème et donne un air abouti même à un site simple. Voici comment le prévoir.

Commencez par une liste

Parcourez votre site ou votre application et notez chaque endroit où une icône aiderait :

• Menu principal : accueil, catalogue, recherche, panier, compte.
• Fonctionnalités ou avantages : livraison rapide, paiement sécurisé, retours, assistance.
• Contacts et actions : téléphone, e-mail, adresse, partage, téléchargement.

Décrivez chaque icône en quelques mots, par exemple « livraison : une petite camionnette » ou « retours : un carton avec une flèche ». Plus la liste est claire, moins il y aura de retouches ensuite.

Combien d'icônes il vous faut

• Environ 4 : une landing page avec trois ou quatre avantages, ou une courte présentation.
• Environ 8 : les principales rubriques et fonctionnalités d'un petit site.
• Environ 16 : un jeu complet pour une application ou un site plus grand avec de nombreuses rubriques.

Mieux vaut généralement en commander quelques-unes de plus que nécessaire aujourd'hui. Les icônes dessinées plus tard, dans une commande séparée, sont plus difficiles à assortir parfaitement.

Choisissez un style unique

Choisissez un style et gardez-le pour tout le jeu :

• Contour : des traits fins, léger et moderne, idéal pour des interfaces épurées.
• Plein : des formes pleines, faciles à lire même en très petit.
• Bicolore : deux nuances d'une même couleur, un peu plus de caractère.
• 3D : du volume doux et des ombres, idéal pour des landing pages colorées.

Si vous avez déjà quelques icônes qui vous plaisent, partagez-en le lien pour que les nouvelles suivent le même esprit.

Les couleurs

Utilisez les couleurs de votre marque et donnez-les en codes hexadécimaux, comme #1A73E8, si vous les avez. Une couleur principale et une couleur d'accent suffisent généralement. Si vous n'avez pas encore de couleurs de marque, une palette neutre fonctionne sur n'importe quel fond.

Tout se joue en petite taille

Une icône de menu ne fait souvent que 24 pixels de large. À cette taille, les détails disparaissent : les formes simples l'emportent.

• Une idée par icône. Une camionnette pour la livraison, pas une camionnette avec une route, une horloge et un carton.
• Pas de texte à l'intérieur. Les mots deviennent illisibles quand l'icône est petite.
• Des symboles connus. Une loupe pour la recherche et un panier pour les achats se comprennent partout.

Ce que vous recevez et comment l'utiliser

Un jeu d'icônes est généralement livré en fichiers PNG séparés sur fond transparent, pour poser chaque icône sur n'importe quelle couleur. Le PNG est un format matriciel : il convient aux sites, aux applications et aux diapositives, mais ce n'est pas un fichier vectoriel agrandissable à l'infini. S'il vous faut un favicon, un convertisseur en ligne gratuit transforme un PNG en fichier ICO en une minute.

En bref

Une liste claire, le bon nombre d'icônes, un style unique et les couleurs de votre marque : c'est ainsi qu'un jeu reste cohérent sur tous les écrans. Si vous préférez qu'on le dessine pour vous, commandez un jeu d'icônes : vous envoyez la liste des icônes, le style et vos couleurs, et vous recevez 4, 8 ou 16 icônes assorties en fichiers PNG séparés sur fond transparent. Le paiement n'est versé qu'une fois que vous avez validé le travail.