Pourquoi créer un design system ?

Le moment où il devient rentable

Sur un site de dix pages, un design system coûte plus qu'il ne rapporte. Le calcul s'inverse quand les écrans se multiplient, quand plusieurs personnes conçoivent en parallèle, ou quand le produit vit sur plusieurs années. À partir de là, chaque nouvel écran redessiné de zéro fait diverger l'interface un peu plus.

Le symptôme classique est facile à reconnaître : trois nuances de bleu presque identiques, quatre styles de bouton, et des formulaires qui ne se comportent pas pareil d'une page à l'autre.

Ce qu'il contient

• Des jetons de design : couleurs, espacements, tailles de texte, rayons, définis une fois et référencés partout.
• Des composants : bouton, champ, message d'erreur, carte, modale, avec leurs états normal, survolé, désactivé, en chargement, en erreur.
• Les règles d'usage : quand utiliser un bouton principal plutôt que secondaire, comment formuler un message d'erreur.
• La même bibliothèque des deux côtés, dans l'outil de maquettage et dans le code, sinon les deux repartent à diverger dès la première évolution.

Le bénéfice qu'on n'attend pas

L'accessibilité. Contrastes, tailles de cible tactile, libellés de champs, gestion du focus au clavier : ces règles sont fastidieuses à appliquer écran par écran, et elles se perdent invariablement. Traitées une fois dans le composant, elles sont acquises partout où il est utilisé.

Le second bénéfice est le rythme : une fois les composants en place, produire un nouvel écran redevient un travail d'assemblage. C'est ce qui permet de faire évoluer un produit sans repasser par une phase de conception complète à chaque fois.