En 2023, j’ai mis en place le design system d’iQspot, en collaboration avec le designer Hamza Alabou, avec qui j’avais travaillé par le passé sur des thématiques d’architecture de l’information. J’avais déjà conçu un grand nombre de composant localement (dans les projets de chaque sous-produits d’iQspot) ainsi que des composants transversaux dans une team library, mais à mesure que le produit se complexifiait, je ressentais le besoin d’un design system bien organisé pour :

• Accélérer le processus de design, notamment dans la création de formulaires ou autres éléments redondants dans les interfaces d’iQspot ;
• Homogénéiser l’UI d’iQspot, en évitant le (re)design de composants existants, le design spécifique peut alors être pensé en “variants” ;
• Autonomiser les développeurs dans la création de “petites” fonctionnalités ou d’évolution de fonctionnalités existantes.

Un design system classique

Le design system d’iQspot est à première vue relativement classique. Il suit la décomposition des composants en atoms < molecules < organisms < templates < pages que l’on peut trouver dans le travail de Brad Frost (2013).

La charte graphique (externalisée) est intégrée dans la Team Library. Par exemple, la typographie est organisée en styles, comme le veut tout design system.

Nous avons ensuite commencé par créer des atomes, c’est-à-dire les composants élémentaires du design d’iQspot : boutons, champs (input), icônes.

Puis des molécules, des combinaisons de composants comme des blocs de saisie de données.

Puis des organismes, par exemple une fenêtre modale type :

Puis des pages :

Des actions pour fluidifier le travail entre pôles

La mise en place d’un design system était aussi l’occasion d’améliorer le travail entre les pôles, notamment entre le design et la communication (qui gère la charte graphique) et le design et le développement (qui implémente les maquettes).

Gestion des couleurs

En mettant en place un design system, nous avons pensé son évolutivité en cas de changement de charte graphique. Le travail principal est d’anticiper la déclinaison des couleurs de la charte pour penser les différents états des composants.

Mon idée était de créer des variables de couleurs relativement homogènes en luminosité pour pouvoir les décliner en CSS ou SCSS selon les états recherchés. Je suis tombé sur un article de blog d’un software engineer (Matthew Gorzelinski) qui résumait exactement ce que je cherchais.

Chaque couleur est pensée non pas en RVB ou en hexadécimal mais en HSL (hue saturation light). Chaque couleur est déclinée depuis la couleur de référence de la charte de 10 en 10 en luminosité, d’un côté vers le blanc (L = 100), de l’autre côté vers le noir (L = 0). Chez iQspot, une valeur basse équivaut à une couleur claire (100 par exemple) et une couleur élevée (700 ou 800) tire vers le noir, mais il n’y a pas de convention. Cet échelonnage est automatisable avec des plugins, mais je préfère toujours repasser sur les couleurs manuellement pour harmoniser la déclinaison.

Ce travail est facilité si la direction artistique est éduquée à ce genre de contrainte du web : un graphiste peut en effet penser la charte de façon à choisir des couleurs de référence de même luminosité. Ce n’était pas le cas pour la charte que j’ai réceptionnée, j’ai procédé à de nombreux ajustements pour équilibrer les couleurs.

En (S)CSS, on passe d’une représentation hexadécimale à une représentation en HSL pour une même couleur.

--blue: #1f2ec1;
--blue: hsl(234, 72, 44);

La couleur est ensuite déclinable avec le code simple et efficace proposé par Gorzelinski :

--blue-hue: 234;
--blue-saturation: 72%;
--blue: var(--blue-hue), var(--blue-saturation);
--blue-300: hsl(var(--blue), 64%);
--blue-400: hsl(var(--blue), 54%);
--blue-500: hsl(var(--blue), 44%);
--blue-600: hsl(var(--blue), 34%);
--blue-700: hsl(var(--blue), 24%);

Gestion du responsive

Après ma collaboration avec Hamza pour organiser les composants de base du design system, il me restait à concevoir des templates adaptables en largeur voire responsive.

J’ai modifié tous les atomes et molécules de façon itérative pour obtenir par exemple des formulaires ou des tableaux responsive. Le rendu n’est pas très impressionnant mais ces composants adaptatifs accélèrent le design et permettent aux développeurs de se projeter dans les différents agencements selon les résolutions.

Période : printemps 2023

Contexte : designer intégré pour iQspot

Collaboration : Hamza Alabou, iQspot

Utilisateur·ices : designer, développeurs

Besoin : accélérer le design, homogénéiser les éléments graphiques, autonomiser les développeurs