Le Design System : élément de charte graphique

Vous possédez plusieurs interfaces ? Vous recherchez à les harmoniser ? Voici une méthode de design qui pourrait vous faire gagner du temps ! 
La méthode du Design System pourrait s’apparenter à une charte graphique mais elle est bien plus complète que cette dernière en comportant, entre autres, des éléments UX design. Il apporte de nombreux avantages dans les processus de conception, une solution idéale pour uniformiser les usages et centraliser les informations. 
Mais avant de s'intéresser à la mise en place de cette méthode, focus sur la définition du design system. 
 

Qu’est-ce qu’un Design System ?

La méthode du Design System - ou système de conception - peut être considérée comme une bibliothèque de composants UX et UI à destination des membres de l’équipe chargés de la conception dans le but d'uniformiser les usages. Cette méthode représente un réel gain de temps. 
Le Design System est un référentiel UX/UI pour aider designers et développeurs à concevoir des interfaces digitales. On y retrouve donc des éléments graphiques, des règles UX, du branding, etc...
Comme le définit Nathan Curtis, auteur du livre Modular Web Design: : 
 

A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.

 
Toutefois, pour mettre en place cette méthode, il est important de garder 3 grands principes en tête. Le design system est :

• Évolutif : il est amené à être alimenté avec de nouvelles ressources 
• Mise à jour : les composants sont mis à jour automatiquement
• Agnostic : il s’adapte parfaitement à une technologie et non l’inverse

Ces principes reflètent les valeurs du produit. Ils traduisent alors l’identité de marque.
Mais que comporte un système de conception ?

Les composants pour créer un Design System 

Vous l'aurez compris, le principal objectif de cette méthode est donc de faciliter le travail de conception entre les différentes parties prenantes en créant une bibliothèque de référence. Les composantes dépendent donc du projet de conception. Le design system peut regrouper à la fois une charte graphique mais également une charte ergonomique. 
On peut retrouver généralement les matières de base comme :

• l'identité : couleurs, typographies, icônes…
• des templates

les principes directeurs :

• les process
• la structure d’équipe
• les valeurs de l’entreprise
• les principes d'expérience 

et les guidelines :

• des guidelines UI: charte graphique et éditoriale
• des guidelines UX : charte ergonomique, règle UX…
• des guidelines techniques 
• un guide de bonnes pratiques : formations, accessibilité, bases UX...

 
Comme cité plus haut, ces éléments dépendent bien évidemment du produit final, ainsi, cette liste est non exhaustive. 

Pourquoi utiliser un design system ? 

Gardez en tête que l'expérience utilisateur est un élément de différenciation face à vos concurrents. Le design system consolide cette valeur ajoutée en guidant les équipes chargées de la conception d’interface. Il s’agit d’un outil aidant à respecter son identité visuelle. Un vrai plus lorsque les organisations sont complexes. 
Par ailleurs, le design system convient particulièrement à la conception d’usine à site - cela vous permet de conserver une cohérence graphique sur la totalité de votre écosystème. Ses guidelines et composantes graphiques vont permettre de cadrer le projet de développement. Les assets utiles au front-end y seront intégrés afin de déployer des sites rapidement et respecter les contraintes établies. 
Fidesio collabore régulièrement avec de grands groupes sur le développement d’usines à site sous Drupal. 
 

Les étapes pour mettre en place un Design System

L’UX Research

 
Avant toute chose, vous devez comprendre vos utilisateurs. Cette étape est essentielle dans le cycle de création d’un design pour fournir une expérience d'utilisation optimale. 
Pour se faire, la méthodologie de la recherche UX est un bon outil pour identifier les besoins et attentes des utilisateurs, récolter des données qualitatives et quantitatives.  
L’UX researcher mène des entretiens ou encore des observations contextuelles afin de se mettre à la place de l'utilisateur et proposer des expériences optimisées. 

• Les équipes techniques

Cette étape est cruciale pour mener à bien votre projet de conception. Déterminer les parties prenantes qui vont intervenir dans la construction du design system. Elles pourront ainsi être chargées de faire évoluer le référentiel. 
Les équipes Produit, Design et Développement seront amenées à concevoir un langage commun afin de fournir une expérience cohérente.

•  Le référentiel

Le référentiel est un document dans lequel les équipes de création peuvent se référer. Il contient les spécifications fonctionnelles qui permettent de cadrer un projet à destination des développeurs. 
Le référentiel peut contenir également la charte graphique qui constitue l’identité graphique d'un produit ou service. Les équipes de développement pourront se référer à ce document pour concevoir des interfaces cohérentes. 

•  Le périmètre

Cette étape consiste à délimiter le projet en mettant en place des contraintes. Afin de répondre au mieux à l’attente de l'utilisateur, il est indispensable d’établir des règles pour cadrer un projet de création.  
Ces contraintes peuvent être des supports à utiliser, un type d’écran (mobile/desktop), des typographies... Elles doivent être respectées par les équipes de développement. 

•  Les composants

 Comme décrit plus haut, le design system regroupe différentes composantes. Il doit être accessible à tous c'est pourquoi il est indispensable d'établir une structure organisée. 
Il est possible de structurer son design system en employant la méthode Atomic Design théorisée par Brad Frost. On vous explique cette méthode de design modulaire totalement  plus bas dans l’article. 
Enfin, les composants peuvent être regroupés en fonction des besoins des parties prenantes : une partie UI puis une partie UX par exemple.

• Le choix des outils 

Contre toute évidence, le choix des outils dépend du type de projet, de l’organisation et bien entendu des objectifs. 
Chez Fidesio, nous utilisons Sketch. Grâce à cet outil, nous pouvons concevoir les composants d’une libraire dans un fichier principal puis les modifier. Ces mises à jour sont disponibles dans les fichiers associés de façon automatique. 

• La création

Commencez par réaliser une bibliothèque de composants graphiques à destination des designers. : l’UI kit. Concentrez-vous dans un premier temps sur le design puis viendra l’étape d’assemblage par les développeurs.
Cette approche plus light est moins coûteuse et plus simple à mettre en place. C’est un premier pas vers un Design System plus ambitieux mais les principes restent les mêmes à savoir : la facilité de travail par le biais de composants réutilisables.
 

Les limites du Design System

Bien que le design system comporte de nombreux avantages, il connaît aussi des limites. Le design system est surtout adapté aux grandes entreprises et des projets d’envergure. Cette méthode n’est donc pas indispensable pour les petites équipes.
Par ailleurs, il faut être conscient qu’un bon Design System est évolutif et adaptatif. Il ne s’intègre pas pour des standardisations figées. 
Enfin, il ne faut pas oublier que l’objectif final reste l’amélioration de l’expérience utilisateur. 

Notre méthode de Design System chez Fidesio 

Pour s’adapter aux itérations rapides, Brad Frost a  pensé à concevoir des systèmes de composant avec l’Atomic Design. Une proposition de méthode permettant de ranger et catégoriser les composants inspirée de la physique moléculaire. 
Chez Fidesio, nous l’avons adapté en fonction de nos besoins :

• Electrons 

Groupe de composants comprenant uniquement les icônes et les logos.

• Atoms 

Groupe de composants comprenant les buttons, formulaires, tags et toutes les déclinaisons. 

• Molecules 

Groupe de composants comprenant les blocs réunissant atoms et/ou electrons, du texte ou encore des images.

• Organisms 

Groupe de composants comprenant les sections d’un projet, typiquement les header et footer. 
 
Exemple d’un Design System conçu par les équipes de Fidesio 
 
Notre Design System inspiré de l’Atomic Design propose un cadre pour construire un écosystème évolutif. Il permet de gagner du temps, de concevoir tout en gardant une cohérence, une meilleure communication avec les équipes de travail et de créer une librairie de composant accessible et évolutif. 

Ce qu’il faut retenir

En bref, la méthode du Design System facilite les étapes de conception d'interface. Bien qu'il soit fastidieux à mettre en place, il va permettre d’uniformiser les usages afin de préserver l’identité de marque grâce à une librairie de composants graphiques et techniques. 
De plus, cette bibliothèque est évolutive, agnostique et sera amenée à évoluer. Un réel coup de pouce pour organiser sa conception et répondre à des problématiques UX
Mais n’oubliez pas que l’objectif final est d’améliorer l’expérience utilisateur ! 
 
Vous souhaitez mettre en place un design system ? Prenez contact avec notre équipe Créa.
N’hésitez pas à nous contacter.