Comment choisir des icônes et des graphiques sans donner à un site Web un aspect générique

Utiliser des icônes pour une tâche définie

Une icône peut identifier une action familière, distinguer des catégories répétées ou renforcer une courte étiquette. Un symbole abstrait unique à côté de chaque paragraphe ajoute un travail d'interprétation sans faciliter la navigation.

Supprimez l'icône et vérifiez si le sens est perdu ; ne le conservez que lorsqu'il améliore la reconnaissance ou la comparaison.

Les symboles de navigation, les indicateurs d'état, les illustrations de caractéristiques et les marques décoratives ont des exigences différentes. Utilisez des formes familières pour des actions communes et ajoutez du texte lorsque le sens peut être ambigu. Une icône devrait réduire l'effort de lecture, pas créer un petit puzzle. Testez-le sans couleur et à la taille finale; les détails minces qui semblent raffinés dans un fichier de conception peuvent disparaître sur un téléphone.

Gardez la géométrie et le poids cohérents

La largeur du trait, la forme des coins, la perspective et les zones remplies créent un air de famille. Le mélange d'icônes aux contours fins avec des symboles épais donne à une grille de services un aspect assemblé à partir de kits non liés.

Comparez les icônes à leur taille d'affichage réelle et définissez des règles de grille, de trait et de correction optique.

La cohérence vient d'un système de dessin contrôlé. Définissez la grille, le trait, le traitement d'angle, la taille optique et le style rempli ou souligné. Revoir les icônes côte à côte à la taille utilisée dans les boutons et les listes. Mélanger plusieurs bibliothèques produit souvent un poids et des proportions inégalés. Si une bibliothèque couvre la plupart des besoins, redessiner les quelques symboles manquants pour correspondre plutôt que d'ajouter un deuxième langage visuel non lié.

Ne comptez pas uniquement sur les icônes

Les symboles inconnus nécessitent des étiquettes visibles et les contrôles interactifs nécessitent des noms accessibles. Un menu mobile composé d’icônes ambiguës peut bloquer les visiteurs qui ne partagent pas l’interprétation du designer.

Testez avec les étiquettes, les états de focus, le contraste et la sémantique des technologies d'assistance.

Un diagramme de flux de travail peut montrer la séquence et la responsabilité; un graphique de comparaison peut exposer les différences; un détail de produit peut focaliser l'attention sur une fonctionnalité. Des formes flottantes génériques ajoutent du poids de fichier sans aider à la compréhension. Ecrivez le message attendu avant de créer l'actif, puis supprimez les étiquettes ou décorations qui ne contribuent pas à cette explication.

Propriété du plan et livraison des fichiers

Un système d'icônes utilisable comprend les fichiers sources, les tailles d'exportation et les règles d'ajout de nouveaux symboles. Sans propriétaire, les ajouts ultérieurs changent de style ou sont copiés à partir de bibliothèques incompatibles.

Les icônes décoratives doivent rester cachées de la technologie d'assistance, tandis que les contrôles interactifs ont besoin d'étiquettes qui décrivent l'action. Suppliez SVG là où cela est approprié, mais inspecter le code et la boîte de vue avant de publier. Gardez les fichiers source modifiables et un index d'utilisation si plus tard les ajouts suivent le même système au lieu de redémarrer le style d'icône sur chaque page.