C’est quoi un Design System ?

C’est une bibliothèque évolutive de règles et de composants visuels développés, qui sert de référentiel à tous les membres de l’équipe. Elle applique une charte ergonomique.

Cela englobent souvent la bibliothèque (library), lignes directrices (guidelines), styleguide et langage visuel (visual language).

Les éléments d’un Design System

• Composants UI et patterns
• Principes visuels autour de la typographie
• Palettes des couleurs et règles associées
• Iconographie et imagerie
• Grilles pour structurer les éléments, espaces, etc. (Grid layout)
• Composants basiques et complexes réutilisables

Pourquoi utiliser un design system ?

Cohérence et homogénéité

Réduire l’apprentissage des utilisateurs en appliquant des règles dans la conception de ses produits.

Cela permet d’assurer une unité entre les différents projets en ayant une cohérence graphique ainsi qu’une expérience utilisateur homogène.

Faciliter la communication

En établissant des conventions de dénomination dans la conception et le code.

Impliquer chaque acteur et les faire travailler ensemble plus efficacement sur une base commune ce qui renforce l’esprit d’équipe.

Réduire la dette design

Travailler de façon atomique, permet de prendre en compte les usecases de plusieurs interfaces pour un même composant.

Avoir des composants réutilisables et plus faciles à maintenir permet d’accélérer la mise en production et les tests car ils sont réalisés au plus tôt.

Capitaliser pour innover

Réutiliser des composants déjà pensé pour les différents usecase permet de se concentrer sur des features innovantes à forte valeur ajoutée !

Cela permet de gagner du temps et de l’argent grâce à la scalabilité du Design System.

Les objectifs

Objectifs d’un Design System

• Apporter des guidelines aux UX/UI et aux développeurs
• Créer et exploiter des composants réutilisables
• Fédérer les équipes autour d’un socle commun durable
• Impliquer tous les acteurs, de l’UX/UI au développeur mais aussi les PO

Pour quel type de projet ?

Il est utile pour des projets qui sont amenés à évoluer dans le temps. La manière dont vous allez utiliser dépend de vos attentes et de votre besoin.

Vous pouvez l’utiliser comme un outils listant les différents éléments pour que les développeurs sachent quel style utiliser ou comme une bibliothèque de composants que vous allez directement utiliser et assembler pour former votre projet.

On peut tout aussi bien créer un Design System sur un projet existant que sur un nouveau projet car il peut évoluer de manière autonome.

Quel outil pour réaliser un design system ?

Storybook est un outil open source qui vous permettra de développer vos composants UI.

Il vous permet de visualiser vos composants avec leurs différents états et de les développer de manière à ce qu’ils soient interactifs.

Il peut être utilisé avec tous les langages front et est compatible avec différents frameworks que sont React, React Native, Vue, Angular et Polymer.

C’est un outil qui marche en dehors de notre application.

Avec l’outil Storybook, vous pouvez :

• Construire votre bibliothèque de composants réutilisables
• Avoir une meilleure cohérence entre le code et le design
• Avoir un code plus propre et plus maintenable
• Documenté l’ensemble des composants ou règles Ux/Ui/Installation/etc…
• Lister les différentes déclinaisons possibles d’un composant partant du plus simple comme la (typographie, grille, icônes, font-size, couleurs, boutons, élément de formulaire, etc.) au plus complexe (composant qui réunit plusieurs éléments ou composants).
• Structurez-les dans plusieurs catégories pour pouvoir vous y retrouver.

Exemples :
Microsoft
Gitlab
Airbnb