[Design System] La Matrice des couleurs pour transmettre du sens

Aujourd’hui, on vous partage une méthode que l’on a utilisée lors de la conception de la page “Vue d’ensemble” (nom de code : Home V3) pour donner du sens à nos couleurs.

La couleur est un vecteur de sens; la nature, la société, les individus, s’en servent pour transmettre des informations. Certains exemples semblent particulièrement évidents pour étayer cela: le Code de la Route qui va signifier le danger et l’interdit avec le rouge, les indications temporaires avec le jaune etc… Le principe est simple : une norme associe un sens à une couleur, et chacun se doit de respecter cette norme. Celle-ci peut changer avec le temps. Ainsi, certains tableaux du Moyen-Âge représentaient les jeunes garçons habillés de rose, vu comme une version diluée du rouge de la violence, alors que le rose sert souvent encore aujourd’hui à identifier les objets destinés aux jeunes filles.

Certains réalisateurs, comme M. Night Shyamalan, mettent un point d’honneur à respecter un code couleur qui leur est propre tout au long de leur filmographie, afin de guider le spectateur de manière inconsciente, de contrôler ses émotions mais aussi de donner une identité propre et distincte à son œuvre. Ce code-ci n’est pas fait pour être explicite puisqu’un spectateur maîtrisant trop bien le code couleur trouvera des révélations à chaque indice.

Dans le cas d’Arenametrix, il y a deux aspects principaux qui justifient le contrôle des couleurs et que nous allons développer dans cet article : la data-visualisation et la communication.

• En 2022, l’équipe d’Arenametrix va œuvrer à vous offrir des outils de Data-visualisation parfaitement optimisés, c’est-à-dire à la fois simples, agréables visuellement et puissants. Évidemment, la couleur a un rôle majeur dans notre construction avec la mise en place d’une matrice des couleurs, comme vous pouvez le voir dès maintenant avec notre page “Vue d’Ensemble”.
• L’équipe d’Arenametrix, au travers de ce blog notamment, souhaite aussi partager certaines de nos méthodes de travail qui pourraient vous être utiles dans votre communication. C’est pourquoi nous profitons de cet article pour partager notre recette pour réaliser des illustrations bien à vous grâce à votre propre matrice de couleurs.

Une matrice des couleurs pour animer notre pyramide d’engagement.

La page “Vue d’ensemble” a été articulée autour d’un élément clé : la pyramide d’engagement. Celle-ci vous permet de voir la répartition de vos contacts en communautés d’engagement selon leur niveau de fidélité. Vous pourrez ainsi comparer vos communautés d’engagements (de vert à bleu) avec celles de votre secteur d’activité (d’orange à rouge).

Lorsque vous cliquez sur une barre de la pyramide, tous les graphiques de la Vue d’ensemble vont s’adapter pour montrer uniquement des données concernant la communauté d’engagement en question tout en reprenant les couleurs de celle-ci. Au-delà de l’aspect esthétique, ce changement de couleur est ce qu’on appelle une affordance, puisqu’il facilite et accompagne la compréhension de l’usage des barres de la pyramide.

En effet, ce changement de couleur permet de comprendre qu’un filtre a bel et bien été activé et permet de savoir lequel, même sans voir la pyramide ou l’action du clic. Ainsi, si vous retrouvez une capture d’écran de votre bloc géomarketing datant de plusieurs mois, vous pourrez deviner la communauté d’engagement sélectionnée rien qu’à ses nuances.

Faisons le compte : sur la pyramide, nous avons 2 nuanciers de 5 couleurs basés sur les couleurs majeures d’Arenametrix (vert, bleu, orange, rouge). Chaque variation de couleur à également son propre nuancier de 8 couleurs d’intensité croissante pour colorer les autres graphiques. Cela fait donc 80 couleurs à définir de manière cohérente entre elles.

À partir de ce pré-requis, nous avons donc bâti une matrice de couleurs en utilisant notamment le plugin Figma Blending Me qui permet de générer autant de nuances entre deux couleurs que l’on souhaite. Chaque couleur a ensuite soigneusement été sauvegardée dans la bibliothèque de couleurs de notre espace Figma, ainsi que dans le CSS d’Arenametrix. Tous les graphiques de la page “Vue d’Ensemble” obéissent ainsi à la matrice des couleurs ; ce sera également le cas des pages de Data-visualisation que nous mettrons en place à l’avenir.

À la façon d’une charte graphique, la matrice des couleurs permet aux développeurs comme aux designers de savoir quelle couleur utiliser pour chacun de nos graphiques et de ne laisser aucune couleur au hasard. Nous pourrions développer ce système en ajoutant des vecteurs de sens comme a pu le faire Material You, le dernier Design System proposé par Google, en utilisant l’épaisseur des traits ou la courbure des angles, etc. Nous pourrions également resserrer encore plus les liens entre l’équipe design et dev en utilisant le Design by Token permis par Figma.

Une Matrice des couleurs pour réaliser des illustrations.

Un des enjeux concrets et quotidiens d’une équipe de communication aujourd’hui est d’arriver à produire de nombreuses images permettant d’illustrer les différents contenus de communication visibles tout au long du parcours de ses utilisateurs (emails, sites, réseaux sociaux, flyers, espaces…). Par exemple, une règle classique du design d’interface est de choisir une seule couleur pour tous les éléments d’interface actionnables, que ce soit les boutons ou les liens, et de s’en servir comme fil rouge. Ces images doivent être cohérentes, responsives et transmettre rapidement du sens pour permettre à vos utilisateurs d’avoir une expérience unifiée de la première publicité aux emails d’après-visite, et ce malgré les contraintes très diversifiées de chaque medium.

Le style “Component-based”, ou “Corporate Memphis”, a été créé pour cela, car il est simple à produire, à manipuler mais aussi à maintenir sans dépendre d’une agence et malgré le turnover des équipes. Comme je le décrivais étape par étape sur mon blog personnel, le principe est d’associer des éléments vectoriels trouvés sur des banques d’images puis de les agencer pour correspondre aux exigences de format. Nous allons maintenant voir comment la matrice des couleurs va vous permettre de les rendre marquantes en étant cohérentes avec votre marque.

Car, et c’est le défaut du Component-based, si vous prenez des éléments de différentes banques d’image sans les harmoniser, vos utilisateurs auront l’impression d’avoir un contenu générique et désarticulé, en un mot : bâclé. Cela peut se régler aisément, mais non sans labeur, en modifiant toutes les couleurs pour ne garder que celles de votre matrice des couleurs.

J’insiste sur le fait qu’il faut vraiment traquer les couleurs qui ne vous correspondent pas, quitte à avoir un rendu volontairement étrange sur certains éléments. C’est à ce prix que vous donnerez une identité remarquable à vos illustrations. On doit sentir votre patte, on doit sentir votre marque.

Cela peut être vu comme une contrainte, mais surtout un levier créatif qui vous permettra d’accélérer le choix des couleurs de vos illustrations et de vos éléments de communication. Par exemple, lors de la réalisation de notre nouveau flyer, nous avons souhaité mettre notre logo sur un bleu ciel profond. Force est de constater que le contraste n’était pas suffisant pour mettre notre logo en valeur. La réponse fut simple : nous avons baissé ce dernier de deux nuances, et c’était résolu.

Comme pour la Data-visualisation, nous avons beaucoup de pistes à explorer pour la communication d’Arenametrix à partir de la matrice des couleurs et notamment réfléchir comment nous allons la décliner dans la production de nos études de cas et de nos e-books, avec pourquoi pas, une couleur majeure différente pour chacun de nos secteurs.

Conclusion : Une méthode simple pour être autonome

L’ambition d’Arenametrix a toujours été de fournir des outils simples et puissants à l’industrie de l’entertainment et cela passe bien évidemment par notre plateforme de données Arenametrix, mais aussi par la vulgarisation de concepts, d’idées et de méthodes que nous utilisons avec bonheur. La matrice des couleurs est un outil de plus pour systématiser notre production d’interfaces, d’illustration et de contenus de communication et donner toujours plus de sens à notre action. Son usage est simple pour permettre à chacun, du stagiaire au responsable, et du commercial au développeur en passant bien sûr par l’équipe Produit, d’être pleinement autonome et efficace au quotidien.

Nous espérons que vous en ferez bon usage ;)