Le Design System
Publié initialement le 09.06.2022, pour Refine Agency
En tant qu’UX designer, nous entendons souvent parler de Design System. Et le moins que l’on puisse dire c’est que derrière ces deux mots se cache bien plus qu’il n’y parait.
Souvent assimilé à un guide de style, une charte graphique du produit digital ou encore de kit UI, le Design System c’est bien plus que ça et surtout bien plus qu’un instantané, figé à tout jamais comme une vieille documentation qui finira au fin fond d’un disque dur.
Compétence très appréciée dans les postes de Designer UX ou UI, construire ou collaborer à l’évolution d’un Design System est de plus en plus demandé dans les entreprises.
C’est quoi un Design System ?
La définition qui parait la plus adéquat, c’est que le Design System est la bibliothèque de références d’un produit digital.
Les différents collaborateurs: équipe design et développeurs peuvent l’utiliser lors du prototypage, la conception et le développement d’un projet web.
Le Design System regroupe un ensemble de normes de conception et de code ainsi que des composants qui apportent une cohérence technique et visuelle.
L’objectif
Le Design System a pour objectif de centraliser tous les éléments constitutifs d’un projet et d’uniformiser les usages.
Il va réduire considérablement les incohérences, les doublons ou encore les décalages de design.
Au dela d’être un outil, le Design system est avant tout à considérer comme méthode d’industrialisation du design qui permet de comprendre et de maintenir organisé et structuré un produit digital.
Il n’aura pleinement sa valeur et sa place que s’il est scalable au regard des évolutions du produit concerné et adapté à l’entreprise.
Ok, mais comment on fait un Design System?
A qui revient la charge du Design System ?
C’est aux équipes design et technique que le Design System va le plus servir: UX designer, UI designer et développeurs. En fonction des entreprises et de la taille des équipes, ils seront eux même généralement les contributeurs.
En ce sens, la construction du Design System repose sur un travail de communication et de collaboration effective entre ces deux équipes. Celles là même qui auront tout bénéfice de voir leur travail fluidifié à chaque nouvelles intégrations.
Pourquoi les entreprises ont besoin d’un Design System ?
Un design system a pour principaux avantages de:
- De pallier au perte d’information dû à des changements d’équipes
- De réduire les délais d’exécution
- D’augmenter la productivité
Il peut être fortement recommandé à une entreprise d’opter à la création d’un design system, par exemple, lorsque des équipes collaborent peu entre elles, ne travaillent pas au même endroit ou encore pour venir renforcer une expérience utilisateur qui perd en cohérence entre le prototypage et l’intégration.
À long terme un Design System c’est aussi maintenir la bonne qualité des livrables et la cohérence de l’ensemble de l’écosystème de la marque ou du produit. Et quelle entreprise refuserait ça?
Pour résumer, on y trouve quoi ?
De manière générale, on peut retouver dans un Design System:
- La librairie des composants développés (partagés entre les Développeurs)
- Les composants graphiques (partagés entre les designers)
- La documentation de composants (règles d’utilisation des composants)
- La documentation d’accessibilité (ex. : niveau de contraste entre le texte et le fond, sous titres pour les vidéos etc.)
- Les principes de design (ou principe d’expérience)
- les principes de communication de la marque/de l’entreprise (mission, valeurs, tonalité…)
Pour une bonne gouvernance de ces éléments, il est indispensable de mettre en place des processus tels que:
- La soumission d’un nouveau composant
- La mise à jour d’un composant existant
- Les contributeurs
- etc.
Dans les faits, une Design System aussi exhaustif ne représente pas la majorité. La clé du succès sera avant tout de travailler en amont avec les parties prenantes pour déterminer les besoins, les attendus et distinguer les éléments pertinents à avoir dans son Design System.
Les outils
L’outil de maquettage et prototypage FIGMA bien connu des designers peut être une bonne base pour la création des bibliothèques de composants graphiques et très apprécié pour le travail collaboratif (partage de fichier, commentaires, travail à plusieurs en direct).
SUPERPOSITION est idéal pour créer un Design System en partant d’un site web existant. Cet outil va venir scanner l’ensemble du site pour en extraire les design tokens (collection de composants fonctionnels). Les listes sont exportables dans plusieurs formats pour CSS, Sass, JS, android.
ZEROHEIGHT est un CMS adéquat pour gérer les documentations visuelles et techniques de tous les éléments et venir synchroniser les fichiers de design, comme Figma avec le code!
Quelques exemples de Design System
Certains leur donnent même un petit nom! Ce sont ici des exemples de très gros Design System en ligne accessibles à tous:
Human Interface Guideline d’Apple
Colette Style Guide de 20minutes
Laura Croix, UX Designer