Comment nommer ses couleurs dans un Design System ?
La dénomination d’une couleur dans un design system est parmi les techniques éminentes dans la création d’un content design. Cette pratique est sujette à des décisions parfois subjectives et parfois objectives, ce qui rendent le processus de nommage des couleurs compliqué des fois.
Toutefois, le design system vise à optimiser la coordination entre tous les membres de l’équipe et à faciliter la réutilisation des composants. Ainsi, ils parviennent à créer une expérience utilisateur intéressante.
Pour cette raison, il faut respecter certaines conditions et suivre quelques bonnes pratiques concernant la manière de nommer les couleurs. C’est ce que nous allons aborder dans cet article.
4 critères à respecter pour nommer ses couleurs
Dans l’objectif de créer un langage commun accessible et compréhensible par toutes les parties prenantes, il est recommandé de se baser sur les critères qui suivent dans le nommage des composants du système de conception.
L’intuitivité
L’intuitivité est indispensable afin d’aider l’utilisateur à trouver facilement la couleur dont il a besoin à travers son nom. Pour cette raison, la dénomination doit être simple et illustrative. Ce critère peut être dérivé en ces éléments :
- La clarté est une condition à ériger en priorité, même avant le critère de précision. En effet, un nom clair et immédiatement compréhensible est plus convoité pour désigner les couleurs, surtout, si elles disposent de noms assez proches. Le fait d’avoir deux noms précis et très similaires procure une certaine ambiguïté et peut créer une certaine confusion chez les utilisateurs. C’est pourquoi, il faut prioriser la clarté par rapport à la précision.
- La simplicité est une qualité importante, permettant de guider les utilisateurs aisément vers les couleurs les plus appropriées à leurs usages. Par exemple, il est recommandé d’éviter d’associer le nom d’une couleur au nom de d’une entité définie comme le nom de la marque (marque-violet). Il ne faut pas entraîner une charge cognitive chez l’utilisateur et lui faire perdre du temps à chercher à décrypter ce nom composé. Plutôt, il faut employer un nom simple et facile à appréhender.
La précision
Le design system est conçu pour faciliter le travail de toutes les parties prenantes, en accédant à des guides de styles clairs et précis. Ces guides assurent l’utilisation du même composant, particulièrement, de la même couleur, de la même façon par les acteurs concernés.
Dans cette optique, il est très important d’être précis dans la dénomination d’une teinte, dans l’objectif d’éviter la charge cognitive de l’utilisateur et de lui permettre d’accéder directement et rapidement à la couleur requise.
En guise d’exemple, il est conseillé d’éviter un nom trop développé, comme “bleu pétrole foncé” et privilégier le nom “bleu” tout court.
La cohérence
La cohérence entre les documentations de design et les bibliothèques de codes est obligatoire. En effet, les noms et les étiquettes employées doivent être cohérents, dans le but d’éviter d’induire le designer et le développeur en erreur et d’assurer qu’ils utilisent les mêmes conventions dans leur travail.
L’objectif étant d’assurer que les concepteurs et les développeurs utilisent le même langage et que les conceptions produites par les designers peuvent être facilement intégrées dans le code des développeurs. Ainsi, on évite toute rupture ou incohérence pendant la transition entre ces disciplines.
L’évolutivité
L’évolutivité doit être prise en considération, car le design system n’est pas un système figé et il évolue au gré du développement de l’entreprise et des exigences des clients. A cet effet, il faut adopter un mode de nommage flexible qui peut s’adapter aux éventuels changements.
Comment nommer ses couleurs ?
La dénomination des couleurs dans un système de conception ne doit pas être prise à la légère, car elle nécessite un certain niveau de taxonomie, de logique et de parcimonie. Le but étant de maintenir la performance du système de conception.
Suivez dans ce qui suit comment procéder pour nommer ses couleurs.
Identifier et structurer les couleurs
La première étape consiste à faire l’inventaire des couleurs à utiliser et de les rassembler dans des groupes logiques. Généralement, on peut les classer en 4 catégories :
- Les couleurs primaires : désignent les teintes les plus couramment utilisées sur une interface graphique et qui sont utilisées dans l’identité visuelle de la marque pour lui donner un caractère unique.
- Les couleurs secondaires : représentent les teintes qui étendent les couleurs primaires. Elles sont utilisées pour compléter ces dernières et mettre en valeur l’identité visuelle de la marque.
- Les couleurs sémantiques : représentent les couleurs qui véhiculent des messages, comme le vert qui dispose d’une signification positive, le rouge qui communique une alerte et provoque un sentiment d’urgence, etc.
- Les couleurs neutres : rassemblent le blanc, le noir et le gris. Ces couleurs sont généralement utilisées sur une surface relativement étendue de l’interface ihm, parce qu’elles sont très utiles pour mettre en valeur certaines informations importantes.
Ces teintes servent à constituer la nomenclature de couleurs. Une fois la palette établie, l’équipe peut se pencher sur le nommage des couleurs.
Convenir des conventions de nommage
Il existe plusieurs façons pour nommer les couleurs, mais généralement, on distingue 3 conventions.
La dénomination définitive
Cette convention utilise un nom explicite pour désigner la couleur elle même, comme “bleu”, “#FFF000”. Elle est particulièrement employée dans l’établissement de la nomenclature de couleurs d’une marque.
La dénomination sémantique
Cette convention donne une connotation sémantique et un sens à chaque couleur. La marque peut utiliser cette technique pour créer une palette de couleurs plus éloquente, qui renferme à la fois la teinte et sa signification. De ce fait, les designers et les développeurs peuvent l’employer plus aisément dans leur travail.
Par exemple :
- Le jaune peut avoir une connotation d’alerte.
- Le gris peut avoir une signification neutre.
- Le vert peut être associé à la réussite, etc.
La dénomination sémantique est aussi plébiscitée parce qu’elle peut être facilement mise à jour, il suffit juste de modifier la valeur, sans modifier tout le nom.
La dénomination contextuelle
Cette convention est employée pour nommer une couleur de manière plus précise, notamment, en utilisant ce format : “couleur-luminosité-marque”, “couleur-composant-note”, etc. Cette technique est appliquée dans des contextes plus spécifiques.
Par exemple, le nom : vert-bouton-aide, indique que cette nuance peut être utilisée pour les boutons d’aide.
La dénomination contextuelle peut augmenter la charge de travail du designer, lorsque la taille du site ou de l’application augmente, ce qui fait croître parallèlement le nombre de spécifications et par conséquent les noms contextuels. Cela peut engendrer certaines ambiguïtés chez le concepteur et même chez le développeur.
Comment choisir une convention de nommage ?
La dénomination des couleurs diffère selon plusieurs aspects.
Le contexte d’usage
Le contexte d’usage est un facteur important pour décider de la manière de nommage la plus adéquate. Par exemple, dans le cas de conception d’une interface graphique, on peut utiliser les noms courants dont on l’habitude d’employer pour désigner une couleur : blanc, noir, marron, etc.
Par contre, les couleurs d’une palette utilisée dans un contexte spécifique, comme la visualisation de données, portent des noms plus contextualisés, dans le but d’expliquer la valeur de la donnée correspondante et de faciliter son usage par l’utilisateur.
Le rôle de l’utilisateur
Les deux acteurs les plus sensiblement concernés par le choix de dénomination des couleurs sont le designer et le développeur.
- Pour le designer : la dénomination sémantique convient parfaitement aux designers qui utilisent Figma ou Sketch, leur permettant de gérer, en toute flexibilité, plusieurs couleurs dans des contextes différents.
- Pour le développeur : la dénomination contextuelle convient à ce professionnel, car elle lui facilite la gestion des détails les plus spécifiques dans un site/application, comme la couleur d’un Call To Action ou la couleur de la bordure d’une icône.
Il est tout à fait possible de combiner les deux types de dénominations : sémantique et contextuelle, car elles sont complémentaires et permettent de simplifier le travail des parties prenantes.
Les bonnes pratiques à adopter dans la dénomination des couleurs
Voici quelques consignes à suivre pour réaliser le bon choix de dénomination :
- Effectuer des tests perpétuels et des discussions régulières entre les développeurs et les concepteurs concernant la modification et la dénomination des couleurs. Cela aide à rationaliser la prise de décisions et à élaborer un système de conception plus cohérent. Cette démarche adoptée par certaines marques est la source de performance de leurs design systems comme Material Design et Spectrum.
- Opter pour la combinaison : nom + valeur, comme rouge-200, qui associe la famille de la couleur (noir, vert, bleu, etc) à une valeur de contraste ou de luminosité. Cette technique est extensible et peut être modifiée en fonction de l’évolution du design system, sans occasionner de graves conséquences sur la fiabilité du système.
- Établir une terminologie commune approuvée par toutes les parties prenantes. En effet, chaque intervenant perçoit une couleur de manière différente et lui attribue un nom distinct selon sa perception. A cet effet, il est important de fédérer les acteurs concernés autour d’une terminologie unique, qui permet de définir clairement la relation entre le nom et la nuance.
- Ajouter un alias au nom de la couleur. Par exemple, pour la teinte : vert-100, on indique cette brève description : “Confirmation de la réussite d’envoi d’un message”. Cette description permet d’expliquer la façon d’interprétation d’un nom. Par exemple, dans le cadre de classification des couleurs dans le système de conception, il est intéressant de mettre des notes explicatives, comme : la nomination se base sur : le nom de la famille de couleurs et le nom de la teinte.
Ou bien, la nomination d’un ensemble de couleurs peut se faire sur la base d’un critère commun comme le contexte d’usage. Ainsi, la note peut décrire le nom comme suit : la nomination se compose du motif d’usage (brand, visualisation de données, etc) et du nom de la couleur.
- Éviter d’utiliser les nominations typiques ou métaphoriques, car une couleur n’est pas spécifique à un composant de conception unique ou à un groupe réduit d’utilisateurs. En effet, tous les usagers du système de conception ne sont pas nécessairement au courant des enjeux des choix établis pendant la dénomination des couleurs.
Par exemple, certains utilisateurs peuvent ignorer pourquoi on a opté pour le nom “vue tropicale” au lieu du nom “vert” ou “version 1-bleu” au lieu de “bleu”. Pour cette raison, il faut bannir l’utilisation de noms comportant des indications non explicites ou trop spécifiques.
- Éviter les dénominations vagues qui n’identifient pas précisément une couleur et qui procure la distraction de l’utilisateur. En outre, les noms trop disparates ne permettent pas de constituer un système de couleurs homogène et cohérent.
- Éviter de distinguer une couleur employée dans différents projets en utilisant un nom de cette forme : nom du projet + nom de la couleur, comme cet exemple : Belleza-bleu. Cette dénomination ne s’adapte pas à l’évolutivité du design system et elle doit être changée dans le cadre d’un nouveau projet. Ce nom ne répond pas aussi aux conditions d’intuitivité et de précision du système de conception.
- Éviter l’association de l’horodatage ou de certaines indications, comme : nouveau rouge, ancien bleu, au nom de la teinte. Ces noms sont farfelus et ils ne font qu’accentuer la difficulté de leur interprétation.
- Éviter la dénomination qui combine la version du langage de conception et le nom de la couleur, comme : “Update 1 rouge”, car cela donne l’impression qu’il s’agit de la version de la couleur et non du langage de design. Cette pratique ne respecte pas le principe d’intuitivité et de simplicité du design system.
Dans le but de maintenir la cohérence dans la bibliothèque de composants, il est important de suivre les mêmes conventions de nommage employées dans ce système et de s’aligner sur les dénominations et les taxonomies couramment utilisées, afin d’assurer une meilleure harmonie à grande échelle.
Mot de la fin
La couleur est un élément incontournable dans chaque design et la manière de sa dénomination dans un design system doit être claire pour toutes les parties prenantes, afin de garantir son bon usage.
Selon le contexte d’utilisation, l’équipe peut choisir entre différentes méthodes de nommage, telles que la dénomination contextuelle et sémantique. Par ailleurs, elle doit éviter certaines mauvaises pratiques qui peuvent augmenter la charge de travail des utilisateurs, telles que l’utilisation de noms trop vagues ou trop spécifiques, qui ne sont pas compris par tous les usagers et qui nuisent aux principes de simplicité et de facilité de compréhension, sur lesquels est basé un design system. Il faut faire le meilleur choix de dénomination dans l’objectif de toujours assurer la cohérence dans l’usage des couleurs.
by 
