R Refine Agency

Le Design System

Publié le 09.06.2022

En tant qu’UX designer, nous entendons souvent parler de Design System. Et le moins que l’on puisse dire c’est que derrière ces deux mots se cache bien plus qu’il n’y parait.

Souvent assimilé à un guide de style, une charte graphique du produit digital ou encore de kit UI, le Design System c’est bien plus que ça et surtout bien plus qu’un instantané, figé à tout jamais comme une vieille documentation qui finira au fin fond d’un disque dur.

Compétence très appréciée dans les postes de Designer UX ou UI, construire ou collaborer à l’évolution d’un Design System est de plus en plus demandé dans les entreprises.

 

C'est quoi un Design System?

La définition qui parait la plus adéquat, c’est que le Design System est la bibliothèque de références d’un produit digital.

Les différents collaborateurs: équipe design et développeurs peuvent l’utiliser lors du prototypage, la conception et le développement d’un projet web.

Le Design System regroupe un ensemble de normes de conception et de code ainsi que des composants qui apportent une cohérence technique et visuelle.

 

L'objectif

Le Design System a pour objectif de centraliser tous les éléments constitutifs d’un projet et d’uniformiser les usages.

Il va réduire considérablement les incohérences, les doublons ou encore les décalages de design.

Au dela d’être un outil, le Design system est avant tout à considérer comme méthode d’industrialisation du design qui permet de comprendre et de maintenir organisé et structuré un produit digital.

Il n’aura pleinement sa valeur et sa place que s’il est scalable au regard des évolutions du produit concerné et adapté à l’entreprise.

Ok, mais comment on fait un Design System?

 

A qui revient la charge du Design System?

C’est aux équipes design et technique que le Design System va le plus servir: UX designer, UI designer et développeurs. En fonction des entreprises et de la taille des équipes, ils seront eux même généralement les contributeurs.

En ce sens, la construction du Design System repose sur un travail de communication et de collaboration effective entre ces deux équipes. Celles là même qui auront tout bénéfice de voir leur travail fludifié à chaque nouvelles intégrations.

 

Pourquoi les entreprises ont besoin d’un design system?

Un design system a pour principaux avantages de:

  • De pallier au perte d’information dû à des changements d’équipes
  • De réduire les délais d’exécution
  • D’augmenter la productivité

Il peut être fortement recommandé à une entreprise d’opter à la création d’un design system, par exemple, lorsque des équipes collaborent peu entre elles, ne travaillent pas au même endroit ou encore pour venir renforcer une expérience utilisateur qui perd en cohérence entre le prototypage et l’intégration.

À long terme un Design System c’est aussi maintenir la bonne qualité des livrables et la cohérence de l'ensemble de l'écosystème de la marque ou du produit. Et quelle entreprise refuserait ça?

 

Pour résumer, on y trouve quoi?

De manière générale, on peut retouver dans un Design System:

  • La librairie des composants développés (partagés entre les Développeurs)
  • Les composants graphiques (partagés entre les designers)
  • La documentation de composants (règles d’utilisation des composants)
  • La documentation d’accessibilité (ex. : niveau de contraste entre le texte et le fond, sous titres pour les vidéos etc.)
  • Les principes de design (ou principe d’expérience)
  • les principes de communication de la marque/de l’entreprise (mission, valeurs, tonalité…)

Overview Decathlon Design System

Source: Decathlon Design System

Pour une bonne gouvernance de ces éléments, il est indispensable de mettre en place des processus tels que:

  • La soumission d’un nouveau composant
  • La mise à jour d’un composant existant
  • Les contributeurs
  • etc.

Dans les faits, une Design System aussi exhaustif ne représente pas la majorité. La clé du succès sera avant tout de travailler en amont avec les parties prenantes pour déterminer les besoins, les attendus et distinguer les éléments pertinents à avoir dans son Design System.

tableau niveaux de maturité en Design System

Niveaux de maturité en Design System (inspirés de Nathan Curtis)

 

Les outils

L’outil de maquettage et prototypage FIGMA bien connu des designers peut être une bonne base pour la création des bibliothèques de composants graphiques et très apprécié pour le travail collaboratif (partage de fichier, commentaires, travail à plusieurs en direct).

SUPERPOSITION est idéal pour créer un Design System en partant d’un site web existant. Cet outil va venir scanner l’ensemble du site pour en extraire les design tokens (collection de composants fonctionnels). Les listes sont exportables dans plusieurs formats pour CSS, Sass, JS, android.

ZEROHEIGHT est un CMS adequat pour gérer les documentations visuelles et techniques de tous les éléments et venir synchroniser les fichiers de design, comme Figma avec le code!

 

Quelques exemples de Design System

Certains leur donnent même un petit nom! 😉 Ce sont ici des exemples de très gros Design System en ligne accessibles à tous:

Materiel Design de Google (récemment mis à jour en version 3)

Human Interface Guideline d’Apple

Design Language d’IBM

Colette Style Guide de 20minutes

Decathlon Design System

Design System de l’Etat 

Oxygen de Doctolib

Polaris De Shopify

Vous avez un projet et souhaitez en parler?

Chez Refine Agency, nous accompagnons depuis plus de 15 ans les entreprises dans la transformation de leurs projets digitaux. L’équipe d’experts Refine vous accompagne dans la refonte de vos interfaces et construit le Design System associé.

N'hésitez plus...
travaillons ensemble !