Bienvenue dans notre calendrier de l’avent ! Aujourd’hui, nous explorons une étape essentielle de la qualité produit : l’adoption d’un Design System. Souvent réduit à une simple librairie de composants, il est en réalité un outil vivant et stratégique pour les équipes Design et Tech. Dans un contexte d’itération continue, un Design System doit devenir un moteur assurant la cohérence parfaite entre l’expérience utilisateur, les bonnes pratiques techniques et la vitesse de production. Découvrez comment transformer cet outil pour garantir sa pérennité.

Quelle est la véritable mesure du succès d’un design system ? Elle réside dans son adoption généralisée par les équipes design et tech. Cet article partage les étapes concrètes et les bonnes pratiques essentielles pour créer un système non seulement beau, mais surtout facile à utiliser, afin de garantir sa pérennité.

Le véritable défi : l’adoption, pas la création

Créer un design system est un travail conséquent. Pourtant, la véritable difficulté n’est pas de le construire, mais de s’assurer qu’il soit utilisé et maintenu par tous.

Trop souvent, les design systems échouent. Les développeurs n’y trouvent pas leur compte. Les designers finissent par contourner les règles. La cause principale est simple : un design system a été vu comme un livrable, et non comme un outil.

Le design system est un outil vivant, pas un projet. Il nécessite une gouvernance claire et des mises à jour régulières. Son succès se mesure à la réduction des incohérences et à la vitesse des équipes de production. Il permet de faire chuter la dette technique et visuelle en décrivant les standards de bonnes pratiques. Un tel système doit donc être conçu dès le départ pour la scalabilité et l’usage quotidien.

Une étape clé : l’audit de la matière première

On construit rarement un design system à partir d’une page blanche. Le travail commence par l’analyse et la rationalisation de l’existant.

Auditer l’existant

Avant de créer le premier composant, il faut analyser le site ou l’ensemble de sites et services numériques actuels pour savoir par où commencer. Je vous recommande de faire des captures d’écran et de les rassembler sur une même planche (méthode de Design Inventory).

Vous constaterez rapidement le nombre de variantes inutiles d’un même élément. Prenez le temps d’identifier les doublons et les contradictions visuelles.

Identifier les composants et les incohérences

Cette étape consiste à lister, puis à catégoriser, toutes les briques existantes :

• Couleurs : combien de nuances de bleu différentes sont utilisées sur l’ensemble des écrans ?

• Typographie : combien de tailles de texte distinctes sont présentes pour un même niveau sémantique (ex : un titre H3) ?

• Boutons : identifier les styles (primaire, secondaire, tertiaire) et s’assurer que leurs états (actif, survolé, désactivé) soient cohérents.

• Icônes : sont-elles cohérentes dans leur style, leur taille, leur usage ?

• Grilles et espacements : les marges et les paddings suivent-ils un système de grille basé sur une unité commune ?

Cette étape de chasse à l’incohérence est le meilleur argument pour justifier l’investissement et le gain de temps à venir.

La co-création et une documentation claire pour faciliter l’adoption

Une fois l’inventaire réalisé, la phase de création doit être orientée vers la facilité d’adoption.

Co-construction et quick win

Le meilleur moyen de convaincre est de démontrer l’efficacité rapidement. Mon conseil est de choisir le composant le plus utilisé et le plus incohérent (identifié lors de l’audit).

Souvent, c’est le bouton ou le champ de saisie de formulaire. Si vous arrivez à standardiser cet élément, vous montrez un gain de temps immédiat à la fois aux designers et aux développeurs.

Le design system est un pont entre le design et le code. Il ne peut être l’œuvre d’une seule équipe. J’insiste sur la nécessité de la co-construction. Les designers doivent travailler avec les développeurs pour que la documentation technique et visuelle soit cohérente. Cette démarche garantit l’alignement entre l’intention du designer et l’implémentation technique.

Le langage commun des tokens

Les tokens sont des variables (couleurs, espacements, typographies, ombres) utilisées à la fois dans les outils de design et dans le code. Ces tokens sont le ciment de la cohérence car ils sont la référence unique et partagée.

Pour chaque composant, vous devez lier les tokens utilisés. Par exemple, un bouton utilise les tokens $token-button-primary-surface-default, $token-button-primary-text-default, $token-button-primary-icon-default, $token-button-radius, $token-button-padding.

Les règles d’usage : le mode d’emploi anti-dérive

Un composant non documenté est un composant à moitié livré. Sa documentation doit répondre à la question : quand et comment l’utiliser (et surtout ne pas l’utiliser) ? C’est la partie la plus importante pour éviter les dérives et les mauvaises interprétations. Elle contient les « Do’s and Don’ts ». Elle précise le contexte idéal d’utilisation et les combinaisons autorisées.

Par exemple, si vous avez un bouton principal, indiquez clairement qu’il ne doit y en avoir qu’un seul par appel à l’action primaire sur un écran. Cette guidance est essentielle pour préserver la qualité de l’expérience utilisateur.

Focus sur l’Accessibility by Design

L’accessibilité est trop souvent vue comme une tâche à effectuer en fin de projet, quand elle n’est pas tout simplement oubliée. C’est une erreur fondamentale et coûteuse.

L’accessibilité est un prérequis de la qualité et doit être intégrée dès la conception. Chaque composant testé et validé propage l’accessibilité à des centaines d’écrans potentiels.

Voici les critères à vérifier systématiquement dans chaque composant avant validation :

• Contraste des couleurs : la conformité du rapport de contraste est une règle absolue pour le texte, mais également pour les éléments d’interface.

• Information transmise uniquement par la couleur : une information ne doit pas être donnée uniquement par la couleur ; il doit y avoir un autre moyen d’accéder à cette information.

• Focus visible : l’état de focus pour la navigation au clavier doit être clair et facile à repérer.

• Transcription textuelle : les éléments multimédias comme les images complexes (infographies) doivent disposer d’une transcription textuelle accessible.

Et une fois le composant développé :

• Sémantique HTML : utilisation des balises appropriées (<button>, <a>, <hn>) pour les technologies d’assistance.

• Gestion des rôles ARIA : uniquement si nécessaire, l’utilisation correcte et minimale des attributs ARIA pour décrire l’interface aux lecteurs d’écran.

Conclusion

Créer un design system est un marathon, pas un sprint. Son succès ne réside pas dans la beauté de ses composants, mais dans sa capacité à être adopté et à simplifier la vie des équipes.

Les trois piliers pour y parvenir sont : l’audit pour la légitimité, la co-construction pour l’adhésion, et la documentation rigoureuse pour l’usage quotidien.

Le design system est l’investissement continu qui transforme la conception et le développement de votre service numérique, garantissant cohérence, vitesse et qualité.

Christel Agier, Senior UX Designer chez UX-Republic