Design System, le pourquoi et le comment !

Un Design System peut être comparé à une bibliothèque, dans laquelle au lieu de piocher des livres, vous piochez des composants pour vos applications web ou mobile. 

Il sera votre guide et vous permettra de savoir exactement quel composant utiliser à quel moment. 

Il regroupe les chartes ergonomique et graphique d'un produit digital.

Le Design System étant propre à chaque projet, c'est à vous ou votre équipe UX/ UI de le mettre en place. 

Mais alors pourquoi consacrer du temps et des ressources à un tel document ? 

Parce que c'est ce qui apportera à votre projet toute la cohérence et la consistance nécessaire à une expérience utilisateur digne de ce nom. 

Parlant maintenant du contenu du Design System, 

Comme il a pour but de refléter votre image de marque et votre identité visuelle il doit contenir : 

- Les grilles.

- Les couleurs choisies pour les différents éléments (bouton, texte...) 

- La typographie (La police de caractères ainsi que les différentes tailles et style de textes) 

- Les formes.

- Les icônes.

- Les images.

- Les illustrations.

- Les animations.

- Les sons. 

- Les ombres.

Cette liste est non exhaustive, d'autres éléments peuvent venir s'y ajouter. 

En général, les Design Systems se divisent en deux grandes parties : 

- Les composants : les éléments visuels et fonctionnels cités ci-dessus.

- Les recommandations : les combinaisons adéquates des composants.

Maintenant que vous savez de quoi se composera votre Design System, il est temps de connaître les étapes de sa création : 

- Étape 01 : La recherche 

Que serait un travail UX sans phase de recherche ? 

Dans cette étape, vous devrez analyser et comprendre vos utilisateurs cibles et concevoir vos éléments en fonction de cela. 

Sans oublier de les adapter à votre secteur d'activité. 

- Étape 02 : Le référentiel 

Avec l'aide du Product Owner, vous devrez concevoir différents éléments qui vont servir les fonctionnalités du site ou de l'application. 

Il contiendra aussi votre charte graphique à laquelle vous devrez vous référer. 

- Étape 03 : Le contenu

Une fois que vous avez toutes les ressources nécessaires, le travail de création peut commencer. 

Vous devez aussi réfléchir à la façon de disposer tous les éléments du Design System. 

Pour qu'il soit facile à lire par les autres, en d'autres termes le design system doit procurer une expérience agréable.

- Étape 04 : Les outils 

Si ce n'est pas encore fait, c'est le moment idéal pour définir tous les outils que vous allez utiliser. 

Outils de dessin, de retouche d'images, de wireframing, prototyping... 

Faites une liste suffisamment complète pour commencer, vous pourrez ajouter d'autres outils qui vous faciliteront la vie plus tard. 

Il est tout à fait normal de se sentir un peu perdu et de ne pas trop savoir par où commencer, 

Surtout quand c'est la première fois qu'on crée un Design System alors voici deux tutoriels proposés par Figma pour faire vos premiers pas :

Tuto 01 : Build it in Figma: Create a Design System — Foundations

Tuto 02 : Build it in Figma: Create a design system — Components

À ce stade vous avez sûrement deviné la plupart des avantages du Design System mais on va vous les citer pour la forme : 

- Garantit un design cohérent sur tout le site ou application.

- Améliore considérablement l'expérience utilisateur.

- Fluidifie le travail de l'équipe UX.

- Évite les frictions et malentendus au sein de l'équipe.