Design System

Un Design Sytem est un ensemble de normes qui guide la conception et la mise en œuvre de produits numériques (ou physiques), et garantissent leur cohérence et leur harmonie.

Définition : Le Design System, c’est quoi ?

Un Design System est un ensemble de principes et de processus qui permet aux équipes de concevoir et de développer des produits de manière cohérente et efficace. Il comprend des composants réutilisables, des lignes directrices de conception (“d’assemblage” desdits composants), des normes de codage et tout élément qui facilite la collaboration et améliore la cohérence du produit.

Il inclut généralement des composants tels que des boutons, des icônes, des grilles, des palettes de couleurs, et des typographies, et s'étend parfois pour inclure, par exemple, le tone of voice. Un Design System mature va même plus loin. Il décrit tous les “points contacts”, qu’ils soient digitaux (site internet, applications mobiles…) ou physiques (print, magasins…). Par exemple, Vitamin, le Design System de Décathlon comporte 4 dimensions :

• Brand (logo, brand signature, voice and tone, photos et vidéos…)
• Digital (règles d’accessibilités et d’éco-conception, guidelines, composants…)
• Product (signature produit, éco-design, packaging…)
• Physical (design des magasins)
  
  

En résumé, le Design System est une source de vérité unique pour les designers et les développeurs, qui permet de créer des expériences utilisateurs fluides et harmonieuses. 

👉 Il sert non seulement à définir l'apparence des produits, mais aussi à maintenir l’intégrité de la marque et à faciliter la collaboration entre les équipes.

👉 Il permet de gérer le passage à l’échelle du design (at scale en anglais), et de passer d’une pratique commune à un petit groupe d’individus (les designers) à une démarche diffusée à l’échelle d’une organisation, et à plusieurs métiers (développeurs, marketers…).

Les 4 (gros) avantages d’un Design System

• Efficacité: Il permet de réduire le temps et les efforts nécessaires pour concevoir et construire des produits, grâce à la réutilisation de composants et de modèles. Moins de temps passé sur la production = plus de temps sur la conception et l’optimisation du produit !
• Cohérence: Un design system favorise la cohérence visuelle et fonctionnelle entre les différents produits et plateformes, en fournissant une source unique de vérité pour les équipes. Un copier-coller et le tour est (presque) joué !

• Collaboration: Il facilite la collaboration entre les designers, les développeurs, et les autres membres de l'équipe de produit.
• Évolutivité : Le DS permet de construire et de mettre à l'échelle des produits de manière plus efficace, en s'adaptant aux besoins / évolutions des utilisateurs et de l'entreprise.

  Pour aller plus loin : lire notre article Pourquoi créer un Design System ?

   

5 exemples de Design System

Nous avons parlé plus haut de Vitamin de Décathlon. Mais il y a d’autres très bons DS qu’il est utile de connaître. En voici quelques-uns :

• Oxygen, le Design System de Doctolib.
• Material Design de Google.
• Lightning de Salesforce
• Polaris de Shopify
• Atlassian Design System (le DS de… Atlassian)

UI Kit vs Design System : quelle(s) différence(s) ?

Non, ton fichier Figma avec quelques composants et une ou deux brand guidelines n’est pas un Design System !

Un UI Kit contient des composants préconçus, des couleurs et des typographies, prêts à être assemblés dans une maquette. Souvent le UI Kit sera un “simple” fichier Figma. En revanche, un Design System établit non seulement les briques de base (que l’on retrouverait dans un UI Kit) mais aussi les règles, les principes, les patterns et même la philosophie derrière chaque choix de design (que ce soit web, print, tone of voice…).

Comment mettre en place un Design System et quels pièges éviter

Un Design System mature “coûte” avant de rapporter. En moyenne, il permet de réduire de 30 % le temps passé par les développeurs et designers sur des sujets UI.

Pour voir comment un DS peut-être implémenté, nous sommes allés interroger l’un de nos experts. Anh-Minh est Senior Product Designer chez Thiga. Il est passé par Thalès, Leboncoin, BlaBlaCar et il a accepté de nous partager le fruit de son expérience.

 1 - Poser les bases de son Design System

“La première étape (peut-être la plus essentielle en fait) est de construire une task force pour évaluer la viabilité du projet, comment on le met en place, avec quelle équipe et quelle gouvernance. 

Généralement, dans les grands groupes qui ne sont pas encore dotés d’un DS, il y a une multitude d’UI Kit et de Design System qui cohabitent. C’était le cas chez Thalès. Dans ce cas, il faut auditer l’existant pour voir ce qu’on peut conserver et/ou simplifier.”

À lire aussi : Comment initier un Design System lorsqu'on dispose de peu de ressources ? 

2 - Convaincre les équipes d’utiliser un Design System

“Le principal ennemi du Design System, ce sont les “détracteurs”, les personnes réticentes, surtout dans un grand groupe qui possède de nombreux DS plus ou moins matures et déployés. Pour ces collaborateurs, recommencer à zéro, avec un nouvel outil, c’est compliqué.

Les solutions ?

• Évangéliser, avec la création d’un slidedeck (présentation powerpoint) qui présente les avantages à court et moyen termes en fonction du métier (développeur, designer, marketing…). Ça nous a permis de faire beaucoup de présentations, de démos et de formations autour de l’outil.
• Créer le produit le plus facile possible. C’est simple : le DS est un produit. Si ton produit est trop compliqué à utiliser, les gens ne l’utilisent pas. Nous avons pensé notre DS dès le début avec ses utilisateurs : nous avons intégrés leurs retours pour l’améliorer, et nous avons ajouté des tuto vidéos.

3 -  L’amélioration continue d’un Design System

Un Design System, ce n’est pas “juste” un outil (composants, documentation), c’est aussi un équipe et des contributeurs. Une team qui l’enrichit constamment.

“Chez Thalès, nous avions une “core team” (équipe cœur) de 5 personnes : une Design System Lead, un Design Lead, un Designer, un Tech Lead et deux Front-end Developer. Autour de ce “coeur”, il y avait une “guilde” de designers et de développeurs issus de toutes les entités du groupe. Chaque membre de la guilde dédiant 20 à 30 % de son temps au Design System.

Pour aller plus loin  : Téléchargez notre livre sur le Product Design et découvre notre formation Design System.