Le Design System : votre nouveau document de charte graphique

UX-Design

Véritable levier d'amélioration de l'UX, le Design System aide à harmoniser les usages des équipes de création pour une expérience utilisateur optimale.

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 :

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 :

les principes directeurs :

et les guidelines :

 

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

 

 

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. 


 

 

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 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. 


 

 

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. 


 

 

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.


 

 

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. 


 

 

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 :

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

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

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

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.

 

Nous contacter

+33 (0)1 76 77 27 61

51, Rue de Seine, 75006 Paris

Nous contacter
Un nouveau projet ?Nous en dire plus
 

Nous contacter