Design System

Qu’est-ce que le design system ? définition et exemple

Le design system est un outil de travail collaboratif regroupant tous les composants indispensables à la conception d’un projet digital. Véritable référentiel, le design system est le fil conducteur qui permet d’homogénéiser tous les éléments graphiques, de design et techniques d’une interface digitale.

Qu’est-ce qu’un Design System ?

Le design system est défini comme étant un référentiel qui regroupe tous les composants d’un projet digital. Ces derniers permettent de concevoir une logique cohérente tout au long de la réalisation et guident l’ensemble des équipes intervenants dans la conception de l’interface.

En d’autres termes, le system design est un éco système qui permet de connecter les équipes de designers et de développeurs afin de les réunir autour d’un objectif commun.

Ce qu’il faut retenir, c’est que le design system permet aux leads de rassembler toute son équipe au cœur du projet digital. Afin que chacun puisse se retrouver dans une guideline commune. L’UI Designer, l’UX Designer et le développeur ont donc à leur disposition la ligne directrice de leur projet.

D’autre part, le design system est une solution qui va permettre de résoudre un certain nombre de problématiques. Par exemple, la démultiplication des outils disponibles, la difficulté à conserver une cohérence graphique entre les outils, et surtout la multiplicité des interlocuteurs.

Avantages

Parmi les avantages principaux du design system, on retrouve la synergie de l’ensemble de l’équipe de designer dans la conception d’un produit. Une fois les objectifs de chacun clairement définis, mais surtout la finalité du projet, les designers et développeurs qui participent au même projet communiquent plus facilement sur les différents points à traiter. On peut ainsi dire que le design system permet d’aboutir à :

  • Un design cohérent dans un référentiel unique ce qui permet aux développeurs de se concentrer sur l’aspect technique de l’interface
  • Le lancement d’une création graphique rapide
  • Des mises à jour et des évolutions simples à mettre en œuvre, puisque les composants principaux du projet restent stables tout au long de sa conception
  • Permet d’homogénéiser tous les points de détails afin que chacun des experts participants puisse y avoir accès à tout moment, mais aussi pour pallier les difficultés de communication liées à l’éloignement géographique ou des divergences de points de vue

L’ensemble de ces avantages impacte positivement l’expérience utilisateur. Par exemple, si le design system indique un modèle de bouton spécifique à utiliser pour le call to action, et que tous les intervenants appliquent la même règle, l’interface aura de la cohérence pour l’utilisateur en retrouvant le même format de bouton CTA sur toutes les pages de navigation de votre site.

Inconvénients

Dans la mesure où le design system consiste à créer un support commun regroupant tous les composants d’un projet, le principe peut sembler pratique.

En revanche, l’impact d’une telle organisation, avec autant de précision et de consignes peut devenir restrictif pour certains membres de l’équipe. En effet, lorsque toutes les consignes d’un projet sont précisément dictées, les designers ont tendance à ressentir une forme de perte de créativité.

Par exemple, le fait de modifier une fonctionnalité ou un élément graphique peut avoir des conséquences bouleversantes pour l’ensemble des composants du design system.

Comment créer un design system ?

Design System - Bibliothèque graphique
Design System – Bibliothèque graphique

En partant du postulat que le design system permet de rassembler des équipes de designers, il est intéressant de considérer que l’outil se doit d’être le plus complet possible pour que chacun puisse travailler en synergie, en concevant le projet de la même manière, et avec des perspectives similaires.

De ce fait, on trouvera dans le design système des identités (couleurs, types, images sons, rédaction, etc.), des principes de direction de projets (quelle est la finalité du service ou des produits proposés sur le site ?) ainsi que des composants pratiques (ergonomie, l’UX en général, etc.).

Toutes ces informations sont les lignes directrices qui permettent d’orienter le projet dans une direction commune pour chacun des participants.

Voici quelques exemples : Voir plus

Analyse et objectifs

La création d’un design système commence par l’analyse complète du projet. Dans un premier temps, il est essentiel de comprendre la finalité de l’interface à concevoir. Sera-t-elle conçue pour vendre ou informer ?

Ensuite, comprendre différents profils types des utilisateurs cibles afin de construire les personas. Toujours du côté de l’utilisateur, on va également relever les informations sur les règles d’usage de l’interface, les difficultés potentielles qu’il peut rencontrer. En ce qui concerne les outils, il est primordial d’analyser ce que l’on possède déjà : c’est-à-dire, les compétences des UX, des UI, des développeurs et des rédacteurs référenceurs, ainsi que le matériel technique.

Faire en sorte que ces compétences soient en adéquation avec la possibilité de réaliser le projet. Les objectifs permettent de mettre en place des stratégies de conception et de hiérarchiser les composants du design system.

Structure du design system

La structure du design system va se concevoir sur la base de toutes les datas récoltées lors de la précédente phase d’analyse. Celles-ci permettront de créer :

  • Une bibliothèque graphique qui regroupe les styles et éléments graphiques
  • Une bibliothèque de composants 
  • La rédaction du référentiel : document qui formalise les règles d’usage, d’accessibilité et d’UX

Couleurs, Typographies et images

L’outil de travail collaboratif qu’est le design system est donc la source, le référentiel de tous les éléments graphiques et techniques d’une interface digitale. Les UX designers y trouveront la charte graphique à respecter, les typographies ainsi que les images à insérer dans les pages de l’interface.

Partagez votre amour