A quoi sert un Design System ? Explication

Véritable cadre de conception pour des expériences plus cohérentes de bout en bout, le Design System constitue à lui seul une petite révolution déjà bien en marche.

Alors, qu’est-ce qu’un Design System ? A quoi sert-t-il ? Surtout, quels avantages offre-t-il aux équipes qui l’utilisent ?

Design System : définition

Le design System (aussi appelé “système de conception”) est un référentiel unique destiné aux différents acteurs* d’un projet pour leur permettre de le concevoir, le développer et le maintenir de la manière la plus efficace et cohérente possible.

Le Design System comporte un ensemble de livrables – des composants, des patterns, des guidelines – destinés à évoluer au gré des produits et des nouvelles technologies.

D’autre part, il comprend et centralise également des éléments moins tangibles tels que les valeurs, l’état d’esprit ou encore les croyances partagées au sein de l’organisation qu’il concerne.

Certains Design systems vont jusqu’à donner le ton avec lequel il convient de communiquer avec les utilisateurs, et ce en précisant une manière de s’exprimer, les mots à privilégier etc. Ce que l’on appelle “style guide” et “pattern librairie” sont donc une partie de tous les éléments qui composent le Design System.

*designers, développeurs, intégrateurs, marketeurs, prestataires externes etc.

Design System vs charte graphique : quelle différence ?

En comparaison avec le Design System, la charte graphique, bien qu’indispensable, présente quelques limites (et tout particulièrement dans le cadre de certains des projets que nous menons !). Peu interactive (voire complètement statique) ou trop orientée “print” et donc peu adaptée à la conception web, elle est en conséquence parfois négligée par les équipes digitales.

Le problème : cela induit des incohérences, lesquelles ont tendance à ternir l’expérience des utilisateurs finaux.

L’intérêt d’un (bon) Design System

Le Design System pour une collaboration simplifiée

Le Design System se révèle particulièrement utile pour la bonne gestion de projets web (refonte ou création de sites e-commerce par exemple) Avant l’apparition de cette méthode, on observait souvent les mêmes problèmes : les différents acteurs (développeurs et designers par exemple) œuvraient chacun de leur côté, pour ensuite mettre en commun leurs travaux respectifs.

Une approche propice aux frustrations de part et d’autre dans la mesure où les uns n’étaient généralement pas alignés avec les règles des autres, et inversement. Ce qui avait pour conséquence d’altérer la cohérence des livrables et de provoquer des allers-retours interminables, synonymes d’importantes pertes de temps.

Le Design System, nouveau point de contact unique entre les développeurs et les designers, a donc le très gros avantage de permettre une meilleure communication et donc l’alignement des différents acteurs dès le début d’un projet, et ce jusqu’à sa fin. La mise à jour en temps réel du Design System assure ainsi l’homogénéité dans le design et les différents éléments graphiques.

Un autre objectif derrière cette démarche est le gain de productivité. Autrement dit, maintenir un niveau de qualité élevé tout en économisant du temps. En ce sens, la méthode du Design Système s’apparente au procédé de scalabilité (garder un niveau de qualité élevé tout en économisant du temps et donc en étant plus productif !).

Le Design System, un outil vivant, universel et inclusif

Le Design System n’est pas un outil figé. Il évolue et s’enrichit en temps réel, au gré des itérations de la collaboration entre les différents acteurs garants de sa cohérence. Généralement accessible en ligne – via le Cloud sur des outils tels que Figma, Abstract, InVision et bien d’autres – il devient progressivement le référentiel technique privilégié. Son exhaustivité permet également d’identifier toutes les évolutions nécessaires ainsi que l’impact de ces évolutions.

Le Design System est universel par définition dans la mesure où il s’appuie sur des standards de conception. Autrement dit, un design system conçu de manière logique et user-centric assurera une expérience utilisateur optimale.

En effet, l’exhaustivité propre au design system permet d’anticiper et optimiser les différents parcours utilisateurs. En outre, le Design System doit répondre à des logiques d’internationalisation, et ce tant en termes d’usages que de langage.

Enfin, le Design System doit être pensé pour tous, et doit pour cela intégrer les grandes règles d’accessibilité afin de prendre en compte les particularités physiques, perceptives et cognitives de tous les utilisateurs.

Le Design System, un outil transverse

Comme nous l’évoquions précédemment, le Design System est beaucoup plus complet, plus transverse qu’une charte graphique classique. On peut y retrouver des éléments tels que :

• La palette de couleurs (les nuances disponibles, leur fonction, les règles de contraste, les variations possibles)
• Les typographies (leur nom, leur rôle, leurs couleurs)
• Les images, illustrations, icônes
• La justification de ces choix
• Les composants : boutons, bannières, menu de navigation, bas de page, emplacements
• Les layouts, grilles de structure
• Le ton de la marque, ses valeurs, son état d’esprit

Quels outils pour créer un Design System ?

Plusieurs outils très efficaces permettent de créer des Design Systems en réunissant tous les composants et tous les éléments dynamiques au sein de pages spécifiques. Chez Noplace, nous utilisons l’outil Adobe XD pour concevoir et maintenir nos Design Systems. Nous avons choisi cet outil plutôt qu’un autre pour sa fluidité, sa robustesse et son aspect ultra-collaboratif.

En tant qu’agence digitale, nous utilisons de plus en plus le Design System et sommes convaincus des nombreux avantages qu’il présente.

Néanmoins, créer un Design System reste un investissement, et il convient donc, pour chaque projet, de mesurer les pour et les contre d’une telle approche.

Peut-être songez-vous à concevoir un Design System pour votre organisation ? N’hésitez pas à nous contacter pour en discuter !