Guide du design d'icônes pour son site web : conseils et ressources

Les icônes sont devenues incontournables sur les sites web et applications mobiles. Bien conçues, elles permettent d'améliorer considérablement l'expérience utilisateur en facilitant la navigation et les actions de l'internaute. Cependant, pour être efficaces, les icônes doivent être pensées selon certains principes de design.

L'importance des icônes sur un site web

Véritable vitrine de l'entreprise, le site web doit être soigné afin de communiquer clairement les valeurs et les messages clés de la société.

L'utilisation d'icônes, des symboles visuels universels, permet d'être rapidement compris sans avoir à ajouter de texte explicatif.

Les icônes structurent le contenu et améliorent la navigation ainsi que l'expérience utilisateur. La loupe, par exemple, est utilisée pour indiquer une fonction de recherche, le panier pour permettre au consommateur d'ajouter des articles en vue d'une commande.

Les icônes rendent le site web plus attrayant visuellement. Des icônes bien conçues ajoutent une dimension esthétique au site de l'entreprise et contribuent à son design global.

Elles aident également à la reconnaissance de la marque. Utilisées de manière cohérente dans les différents outils à disposition de l'entreprise comme le site web, les réseaux sociaux ou encore les supports de communication, elles deviennent familières et font partie de son identité visuelle au même titre que le logo.

7 bonnes pratiques pour créer des icônes uniques

1 - Choisir des concepts simples et reconnaissables

Les icônes doivent être simples et épurées : il est important d'éviter la complexité et les détails superflus pour ne pas perdre l'utilisateur et être rapidement compris.

Pour cela, il est primordial de s'appuyer sur des références visuelles connues de tous ; l'icône de la poubelle en est un parfait exemple.

Lors de la mise en place d'une nouvelle icône, il peut être intéressant de la tester auprès d'utilisateurs lambda afin de s'assurer de sa bonne compréhension.

2 - Opter pour une palette de couleurs limitée

Utiliser un nombre limité de couleurs, de préférence pas plus de quatre, permet d'éviter toute distraction visuelle et de marquer plus facilement les esprits. Le choix doit se faire en prenant en compte la charte graphique du site. Il est tout à fait possible de jouer sur les variations de teinte et de saturation pour apporter du dynamisme et éviter de lasser l'utilisateur.

3 - Créer des formes épurées

Il est conseillé d'éviter les éléments superflus et de privilégier des formes géométriques simples, par exemple des carrés, des cercles ou des lignes droites. Les proportions de chaque élément de l'icône doivent être bien équilibrées afin qu'aucun d'entre eux ne domine excessivement l'ensemble.

4 - Garder une cohérence visuelle entre les icônes

La création de plusieurs icônes pour un même site web ou une même application nécessite une certaine cohérence dans le style graphique. Cela concerne aussi bien les proportions que les couleurs. Les icônes doivent être utilisées avec parcimonie pour ne pas trop surcharger la page.

5 - Respecter les règles d'ergonomie

Les règles d'ergonomie concernant les icônes sont essentielles pour assurer une expérience utilisateur optimale. Elles concernent notamment :

• La taille (min 16px).
• L'espacement, pour éviter tout chevauchement avec d'autres éléments et pour une disposition cohérente et harmonieuse.
• Le contraste des couleurs par rapport à l'arrière-plan, afin de garantir une bonne lecture.

6 - Soigner la lisibilité

La lisibilité des icônes est primordiale pour qu'elles remplissent leur rôle de manière efficace. Cela sous-entend des traits et des contours bien définis, l'absence de perspectives complexes ainsi que des formes et des concepts univoques.

7 - Vérifier l'adaptabilité

Pour vérifier l'adaptabilité et la compatibilité des icônes sur différents supports, il est nécessaire de tester :

• La lisibilité sur des écrans de taille variable, incluant les tablettes et les appareils mobiles.
• L'affichage sur différents navigateurs web comme Chrome, Firefox ou Safari et différents systèmes d'exploitation comme Windows, macOS ou encore Android.
• L'utilisation sur des écrans tactiles afin de vérifier que l'icône est assez grande pour être facilement cliquée.

6 ressources pour créer des icônes uniques

1 - Le générateur d'icônes de HubSpot

Le générateur d'icônes gratuit de HubSpot permet de créer simplement des icônes personnalisées sans avoir besoin d'installer de logiciel spécifique.

Il possède une bibliothèque complète de formes et d'éléments courants exportables au format SVG pour une plus grande qualité d'image.

2 - Iconfinder

Iconfinder propose un annuaire répertoriant des millions d'icônes libres de droits et téléchargeables au format PNG ou SVG. Les images sont classées par catégories, par exemple, « réseaux sociaux », « intelligence artificielle » ou encore « logos et marques » et facilement accessibles par une simple recherche de mot-clé.

3 - Flaticon

Flaticon, c'est près de 12 millions d'icônes vectorielles et de stickers disponibles, soit gratuitement, soit moyennant un abonnement à partir de 7,50 € par mois.

Un certain nombre d'outils sont disponibles pour personnaliser les icônes.

4 - Icons8

Icons8 propose une bibliothèque d'icônes organisée par style ainsi que des outils de design permettant notamment de modifier et de personnaliser les icônes. Le téléchargement peut être gratuit ou payant en fonction du format choisi. Les icônes sont facilement intégrables sur un site web.

5 - IconArchive

IconArchive permet le téléchargement de plus de 800 000 icônes vectorielles gratuites. Elles sont classées en pack selon des thématiques définies et peuvent être triées par popularité, date ou nombre de téléchargements pour faciliter la recherche.

6 - Candylcons

CandyIcons propose une vaste bibliothèque d'images attrayantes et prêtes à l'emploi qui répond à un large éventail de thématiques.

L'outil offre également la possibilité de créer des icônes totalement personnalisées par l'intermédiaire de l'intelligence artificielle. Pour cela, il suffit de saisir les mots-clés liés à l'objet que l'icône doit représenter, de choisir les couleurs et le style (abstrait, 3D, pixels ou encore origami). Cette option est accessible après paiement d'une licence.

Pour aller plus loin dans votre stratégie web, évaluez votre site internet avec l'outil Website Grader, ou découvrez le logiciel CMS de Hubspot.