Publié le
02
October
2023
Mise à jour le
5
minutes

Comment faire un design system ?

Lauréline
Suzarte

Souvent confondu avec un UI kit, le design system vise à lier une organisation dans un objectif de performance du produit et du travail collaboratif. Nous allons te faire découvrir ce qu’est vraiment un design system, pourquoi le faire et avec qui. Alors ze parti !

Qu’est-ce qu’un design system ?

Un design system se compose de différents éléments. C’est comme le séquençage ADN d’une entreprise dans lequel on retrouve : les valeurs de la marque et son pourquoi, le logo, les couleurs, les typographies, l’iconographie, la charte vocale, la charte rédactionnelle, les différents supports prints, les composants, la documentation de ces derniers, la charte ergonomique, sur quelle stack est développé le site et/ou l’application, les variations des composants d’une stack à une autre.

Maintenant tu sais que le design system n’est pas qu’une simple bibliothèque de composants. Il est l’ensemble des expertises métiers qui se regroupent afin de créer un langage commun pour servir les objectifs business de l’entreprise.

Exemple des éléments qui constituent un design system

Alors comment fait-on tout ça ?

Construire son design system

Quand faire un design system ?

Pourquoi pas dès le début ? Un design system t’accompagne du début jusqu'à la fin de ton entreprise (s’il y en a une, bien sûr), il grandira en même temps que ton entreprise.

Au fil du temps, on a souvent envie d’en rajouter beaucoup et c’est là que la cohérence se perd. Reprendre et tout mettre à plat l’existant est beaucoup plus long et coûteux que de le faire petit à petit.

Bien sûr, tu peux le faire plus tard, une fois que tu as trouvé ton market fit, seulement ne tarde pas trop car le faire trop tard peut coûter cher, très cher. 😰

Pour te donner un ordre d’idée, faire le design system d’un MVP où l’on va simplement documenter les composants va prendre 2 jours alors que créer un design system afin de redonner de la cohérence et documenter des composants va prendre entre 5 à 10 jours. Oui car le risque est là, perdre la cohérence de toute ton image de marque.

Nous allons désormais voir quelques éléments qui te permettront de mettre en place une cohérence dès le début.

Définir son pourquoi

Cet exercice peut être fait à la création de ton entreprise. Parfois, lorsqu’il est réalisé ultérieurement, il permet de se reconnecter au pourquoi profond de l’entreprise. Il est utile également pour accompagner un moment pivot de la marque.

La définition du pourquoi de ton entreprise est essentielle, c’est ce pourquoi qui va être le métronome de ton design system. Il va te permettre de mettre en place les éléments de ta charte graphique, la mise en avant des valeurs, le ton employé pour t’adresser à tes utilisateurs, etc.

Prends 5 minutes à chaque étape du cercle pour définir un maximum d’idées qui te viennent à l’esprit. Si tu as déjà effectué ce travail tu peux passer à l’étape d’après.

Mettre en place des objectifs

Avant de te lancer dans la construction d’un design system, il faut lui donner un objectif SMART : Spécifique, Mesurable, Atteignable, Réaliste, Temporel.

Il peut y avoir plusieurs objectifs, qui dépendent de la situation de ton entreprise. En voici quelques-uns :

  • Apporter de la cohérence.
  • Gagner en productivité au sein de l’équipe.
  • Pouvoir travailler avec différents collaborateurs extérieurs.
  • Mettre en place des process et mieux communiquer en asynchrone.
  • Accompagner la transformation de l’entreprise.

Pour que tes objectifs soient atteignables, nous te conseillons de faire un atelier avec toutes les parties prenantes. Si tu veux en savoir plus à ce sujet : Design Sprint : c’est quoi ?

Faire une roadmap et ritualiser

Une fois les objectifs mis en place, tu peux débuter ta gestion de projet agile en réalisant une roadmap. Son but est de ne pas perdre de vue les objectifs à mettre en place en faisant des groupes de travail avec les différents pôles impliqués (Développeurs-Designers, Marketeux-Développeurs, Designers-Marketeux, etc.).

Ensuite, il est important de mettre en place des points ritualisés, sous forme d’échanges ou d’ateliers. Sans l’organisation de ces rituels, la procrastination peut te guetter et peut entraîner une diminution de la productivité à long terme.

Mettre en place un tracking

Il est indispensable d’instaurer un système de tracking. Évolutif en permanence, il te faut traquer ce qui doit être mis à jour ou jeté à la poubelle.

Quel outil pour regrouper tous ces éléments ?

Figma est un incontournable pour créer les composants, c’est sûr. Cependant, il n’est pas toujours le plus pratique car tout le monde dans ton équipe ne l’utilise pas au quotidien. Adosser un autre outil à Figma peut être bon compromis, le nec plus ultra c’est la synchronisation de cet outil et de Figma.

En voici quelques-uns :

  • Notion
  • ZeroHeight
  • Storybook

En combien de temps faire un design system ?

Le design system doit être considéré comme un produit, c’est-à-dire qu’il est scalable, itératif et agile. Ton entreprise évolue au fil du temps, sa vision, ses objectifs évoluent également.

S’inspirer des grands : des exemples de design system

N’hésite pas à t’inspirer des grands qui ont fait leur design system. Voici notre top 3 qui met en avant la collaboration entre les différentes équipes, ce qui est, nous te le rappelons, essentiel à la constitution d’un design system.

Decathlon

exemple design system decathlon

Le design system de Decathlon met en avant la pluridisciplinarité des supports. En numérique on retrouve les informations IOS, Android et Web. En physique on y retrouve les informations sur le merchandising, la construction des magasins et les supports print.

Atlassian

exemple design system atlassian

Exclusivement digital, le design system d'Atlassian met en avant une documentation simple et claire à disposition de ses développeurs et développeuses.

GiffGaff

exemple design system giffgaff

Une petite touche particulière pour le design system de Giff Gaff, qui change de style et se détache du traditionnel flat design. Aussi la charte rédactionnelle et l’UX writing y sont travaillés avec profondeur.

Découvre notre Agence de Design

Zoom sur la conception des composants pour le NoCode

Comme avec n’importe quelle stack, un bon design system dépend d’une bonne communication entre les équipes. Que ce soit avec Bubble, Weweb, Weblfow ou autre, les designers doivent prendre soin d’être à l’écoute de leurs équipes de développement pour produire des composants pensés pour la stack.

Chaque outil possède ses contraintes et il est bon de concevoir des composants qui facilitent le travail de nos collègues adorés. ❤️

Partager
Besoin de conseils ?
Dimitri te propose 30 minutes de call gratuit.
Réserver un call

La newsletter SuperForge

1 fois par mois, des interviews, des infos sur l’univers NoCode et sur l’entrepreneuriat. No spam, c’est promis.👌🏻