Direction créative
Comment créer des icônes et des détails d’interface qui portent une signature de marque ?
Pour créer des icônes qui portent une signature de marque, il faut définir un vocabulaire de formes puis le confronter aux usages de l'interface. L'épaisseur des traits, les angles, les terminaisons et les proportions peuvent produire une cohérence reconnaissable. Le sens de l'action doit cependant rester prioritaire.
L'essentiel.
Les icônes peuvent porter une signature de marque à travers leur dessin et leur rythme. Cette singularité doit conserver une fonction immédiatement compréhensible, avec des libellés et des états adaptés lorsque le symbole seul ne suffit pas.
- Définissez des règles communes de proportions, de traits et de terminaisons.
- Conservez des symboles compréhensibles pour les actions importantes.
- Dessinez les états et les petites tailles en même temps que les versions de présentation.
- Ajoutez un libellé lorsque le pictogramme ne suffit pas à expliquer sa fonction.
L'originalité ne demande pas de réinventer chaque symbole. Une flèche peut garder son rôle tout en appartenant à un univers particulier. Le travail se situe dans la précision du dessin, les relations entre les signes et la manière dont ils apparaissent dans les boutons, les listes ou les états de la page.
Partir des actions, puis construire la famille
Établissez la liste des fonctions réelles : ouvrir un menu, revenir, télécharger, filtrer, développer une information. Regroupez les signes qui expriment une même logique. Les flèches peuvent former une sous-famille ; les états de validation, une autre.
Choisissez ensuite quelques règles de dessin. Une marque fondée sur des formes tendues peut utiliser des angles francs et des terminaisons nettes. Une marque plus organique peut privilégier des courbes, sans rendre chaque signe mou ou imprécis. Le vocabulaire doit être suffisamment limité pour rester cohérent.
Dessinez plusieurs icônes ensemble dès le départ. Une règle séduisante sur une flèche peut mal fonctionner sur un panier ou un symbole de téléchargement. La famille se construit par ajustements, pas par application mécanique d'une formule.
Séparer signature et ambiguïté
Une icône peut être singulière dans son dessin tout en restant familière dans sa structure. Plus une action est importante ou difficile à annuler, moins son sens doit dépendre d'une interprétation artistique. Le libellé constitue alors une partie de la composition.
Le modèle de bouton du W3C prévoit un nom accessible. Un pictogramme visible ne dispense donc pas de décrire l'action aux technologies d'assistance. Le nom doit correspondre à ce que le bouton fait réellement, plutôt qu'au nom du dessin utilisé.
| Décision | Question de contrôle | Réponse attendue |
|---|---|---|
| Symbole | Comprend-on l'action avant de cliquer ? | Sens évident ou libellé présent |
| Dessin | Appartient-il à la même famille ? | Proportions et traits cohérents |
| Taille | Reste-t-il identifiable en contexte ? | Détails utiles conservés |
| État | Distingue-t-on repos, focus et activation ? | Changement perceptible |
| Nom | L'action est-elle décrite sans l'image ? | Libellé accessible pertinent |
Exemple fictif : un studio d'architecture navale
Un studio souhaite une interface inspirée des plans de bateaux. La première piste transforme toutes les icônes en signes techniques complexes. Le résultat possède une personnalité, mais les visiteurs doivent deviner ce qui permet de télécharger une fiche ou d'ouvrir une galerie.
Nous retenons plutôt une famille fondée sur des traits précis et quelques interruptions évoquant le dessin technique. Les actions usuelles gardent des structures reconnaissables. Les symboles plus spécifiques, comme les types de navires, sont accompagnés de mots.
Les flèches partagent un même angle ; les cadres reprennent des proportions communes. Un état actif modifie la présence du signe sans changer complètement sa forme. Le langage de marque se diffuse dans les détails, tandis que les fonctions restent explicites.
Une signature qui garde sa fonction
- FormeTraits précis, angles communs et terminaisons cohérentes.
- SensLes actions usuelles conservent un symbole reconnaissable.
- ÉtatRepos, focus et activation restent distincts dans le même vocabulaire.
- LibelléLes fonctions spécifiques sont nommées ; le bouton possède un nom accessible.
Vérifier les petites tailles et les états
Une grande planche d'icônes flatte souvent le dessin. Le vrai contrôle commence dans les boutons et les lignes de texte. Observez les espaces intérieurs, les traits rapprochés et les détails qui disparaissent. Certaines petites tailles demandent une simplification plutôt qu'une simple réduction.
Le critère WCAG sur le contraste non textuel vise notamment les informations visuelles nécessaires à l'identification des composants et de leurs états. Un contour très fin ou trop proche du fond peut donc fragiliser un signe pourtant bien dessiné.
Vérifiez enfin les états de survol, de focus, d'activation et d'indisponibilité. Le signe ne doit pas sembler se déplacer involontairement lorsque son trait change. Les micro-interactions peuvent accompagner ces états, mais elles doivent conserver une réponse compréhensible lorsqu'elles sont absentes.
Préparer une bibliothèque utilisable
Nommez les icônes par fonction, avec des variantes explicites lorsque c'est nécessaire. Documentez leur taille d'usage, leur relation au texte et les cas où un libellé est obligatoire. Une bibliothèque bien rangée évite que chaque nouvelle page introduise un dessin légèrement différent.
Prévoyez aussi une règle pour les futurs besoins. Une nouvelle icône doit être comparée à plusieurs membres de la famille, pas seulement à celle qui lui ressemble le plus. Ce contrôle maintient une cohérence globale lorsque le site s'enrichit.
Questions fréquentes
Faut-il dessiner toutes les icônes sur mesure ?
Non. Il peut être pertinent de concentrer le travail sur les signes les plus visibles ou les plus propres à la marque. Une famille existante peut convenir à d'autres usages si ses conditions d'utilisation et sa cohérence sont vérifiées. Le mélange doit rester délibéré et documenté.
Une icône peut-elle remplacer systématiquement un texte ?
Non. Certains symboles sont compris dans un contexte précis, d'autres demandent une explication. Pour une action importante ou inhabituelle, un libellé visible peut être le choix le plus clair. Le gain d'espace ne justifie pas de rendre la fonction incertaine.
Comment savoir si une icône est trop décorative ?
Placez-la dans son contexte et demandez à une personne ce qu'elle pense qu'il se passera en l'activant. Si le sens dépend d'une explication du designer, simplifiez ou ajoutez un mot. Une icône décorative peut exister, mais elle ne doit pas être confondue avec une commande.
Sources
Signer les détails avec LVX
Pour un projet LVX, nous proposons de relier le dessin des icônes aux formes et aux gestes déjà présents dans l'identité. Le travail peut commencer par une petite famille utilisée sur des écrans réels, puis s'étendre aux besoins complémentaires. Les essais portent autant sur la reconnaissance que sur les tailles, les états et l'association avec les mots. Cette approche permet aux détails de renforcer la marque sans demander au visiteur d'apprendre un langage entièrement nouveau. La bibliothèque devient ensuite un outil commun au design et au développement. Découvrir notre approche.
