Interface utilisateur (UI)

Qu'est ce qu'un Design System ? Tout ce que vous devez savoir.

Maxime Mroue Web Designer et UX Designer
Un Design System, c'est quoi ? Tout ce qui devez savoir !

Des entreprises et des états comme Airbnb, Uber et le gouvernement français ont modifié leur façon de concevoir des produits numériques en intégrant leurs propres Design System.

En utilisant une collection de composants reproductibles et un ensemble de normes guidant l'utilisation de ces composants, chacune de ces entreprises a pu changer le rythme de la création et de l'innovation au sein de ses équipes.

Examinons les principes fondamentaux d'un Design System, planifions comment vous pouvez en créer et en mettre en œuvre un dans votre entreprise et regardons ensemble plusieurs exemples d'organisations qui utilisent un Design System pour performer.

<category-tag-gold>Sommaire :<category-tag-gold>

<category-tag-red>L'importance d'un Design System<category-tag-red>

Qu'est-ce qu'un Design System ?

Un Design System est un "outil" de design qui regroupe l'ensemble des composantes graphiques, visuelles, image de marque, tonalités, mises en page, composants, etc. Ce Design System est habituellement disponible en ligne et permet d'améliorer la productivité et la collaboration d'une équipe de conception de produits.

<category-tag-gold>Créer un Design System<category-tag-gold>

Quelles sont les principales étapes et les avantages de la mise en place d'un Design System ?

  1. Effectuer un audit visuel

La première étape de la création d'un Design System consiste à effectuer un audit visuel de votre design actuelle, qu'il s'agisse de la conception d'une application, d'un site web ou de tout autre produit numérique.

  1. Élaborez une cohérence graphique

Votre cohérence graphique est le cœur d'un Design System, il se compose de quatre catégories principales, et vous devez tenir compte du rôle que chacun de ces éléments de conception joue dans chaque composant à l'écran.

  • Couleur

Les couleurs courantes dans un Design System comprennent de 1 à 3 couleurs primaires qui représentent votre marque. Vous pouvez inclure une gamme de teintes (une couleur mélangée à du blanc) et de nuances (une couleur mélangée à du noir) pour donner à vos designs davantage d'options.

  • Typographie

La plupart des Design System ne comprennent que deux polices : une police pour les titres et le corps du texte. Restez simple pour éviter toute surcharge et toute confusion pour l'utilisateur. Limitez le nombre de polices ; il s'agit non seulement d'une bonne pratique de conception typographique, mais aussi d'un moyen d'éviter les problèmes de performances causés par une utilisation excessive des polices web.

  • Taille et espacement

Le système que vous utilisez pour l'espacement et le formatage est efficace lorsque votre design à du rythme et de l'équilibre. Gardez donc une cohérence à travers vos designs et ne sous-estimez l'importance de l'espace blanc.

  • Visuels

La clé du succès avec vos visuels est de définir un plan et de s'y tenir. Définissez des lignes directrices pour les illustrations et les icônes et utilisez le meilleur format d'image possible en fonction de la situation.

  1. Créer une bibliothèque d'interfaces utilisateur et de modèles

Contrairement à l'audit visuel que vous avez déjà effectué (qui portait sur les qualités visuelles de vos éléments de conception), cette étape du processus porte sur les composants réels de votre interface utilisateur. Rassemblez toutes les parties et pièces de votre interface utilisateur actuellement en production. Cela signifie chaque bouton, formulaire, modale et image. Fusionnez et supprimez ce dont vous n'avez pas besoin.

  1. Documenter ce qu'est chaque composant et quand l'utiliser

Cette étape est importante. La documentation et les normes sont ce qui distingue une bibliothèque de modèles d'un véritable Design System.

Design System

Avant de commencer à travailler sur votre Design System, prenez un moment pour réfléchir à l'équipe dont vous aurez besoin pour lui donner vie. Qui doit être impliqué ? Alerte au spoiler ! Vous n'aurez pas seulement besoin de designers.

<category-tag-red>Exemples de Design System<category-tag-red>

1) Design System du Youtubeur Tech Micode

Design System de la chaine et du média Micode, son but est d'avoir une cohérence graphique forte et impactante sur toutes les plateformes dont ces différentes chaines YouTube.

Aperçut d'un Design System
Aperçut d'un Design System de Micode (Behance)

2) Design System de l'État français

Après la refonte de la charte graphique de l'État en début d'année, le service d'information du gouvernement s'attaque désormais à l'élaboration du "Design System de l'État". Ou comment fournir aux ministères des briques "prêtes à l'emploi" pour que l'ensemble des 20 000 sites publics convergent à terme vers une identité visuelle et une expérience de navigation commune.

Design System de l'Etat
Design System de l'État (Confluence)

2) Design System de Shopify

Le Design System de Shopify s'appelle Polaris. C'est un système qui reflète l'immense présence mondiale de Shopify. Il s'agit d'évolutivité et de facilité d'utilisation. Grâce à la précision de ses textes et de son design, Shopify se concentre uniquement sur l'expérience de ses commerçants.

Il est facile de voir comment Shopify aide les entreprises à gérer la complexité de se modialiser, avec une expérience qui donne "même à l'entrepreneur le plus inexpérimenté la meilleure chance de réussir."

Aperçut du Design System de Shopify

<category-tag-gold>Concrètement, que contient un Design System ?<category-tag-gold>

L'objectif fondamental d'un Design System est de faciliter le travail des équipes. La première question que nous devons nous poser n'est donc pas "Que dois-je mettre dans mon Design System ?" mais "Qui va l'utiliser et comment ?".

Une fois que notre cible est définie et que nous avons une première idée de ce qui est déjà en place dans l'entreprise (Qu'est-ce qui fonctionne ou non ?) Quel est le niveau de maturité des équipes sur ce sujet ? Quels sont les outils existants ?...), il sera plus facile de savoir par où commencer.

1) Objectif et valeurs partagées

Design System objectifs et valeurs

Où va-t-on ? Pourquoi ? Et comment ?

Avant de commencer quoi que ce soit, il est essentiel d'aligner les équipes autour d'un ensemble clair d'objectifs partagés. Cela aidera à construire une vision et à s'assurer que tout le monde regarde dans la même direction. Ces objectifs évolueront avec le temps et c'est normal. Il faut juste s'assurer que les changements sont largement communiqués.

Quant aux valeurs, elles sont là pour guider les choix, en fonction des objectifs de la marque. En s'assurant que ce que nous concevons ne diffère pas de ces valeurs clés.

2) Principes de design

Première chose à garder à l'esprit : Les principes de conception sont tellement plus que l'aspect visuel d'un produit...

Les principes de conception sont les phrases directrices qui aident les équipes à atteindre l'objectif du produit grâce au design.

Ils aideront les équipes à prendre des décisions significatives en matière de conception.

Je vais prendre l'exemple de Shopify. La mission de Shopify est de permettre à ses clients de se concentrer sur ce qu'ils savent faire de mieux : vendre et concevoir leurs produits. C'est pourquoi la création d'une boutique E-commerce impactante est si facile sur Shopify.

Les principes de conception doivent guider les choix de conception.

🚀 Explorer les principes psychologiques pour créer des expériences mémorables pour vos clients.

Design System : principes de design

3) Identité et langage de marque

Design system : image de marque et language

L'identité doit être définie en fonction de la stratégie et des objectifs de la marque. Cela comprends :

  • Couleurs
  • Polices de caractères
  • Espaces
  • Formes
  • Icônes
  • Illustrations
  • Photographies
  • Animations
  • Voix et tonalité
  • Sons

Tous ces points sont les lignes directrices d'une marque.

4) Composants et modèles

Les composants et les modèles sont au cœur du Design System. Tous les éléments mentionnés précédemment nous aideront à les créer et à offrir une expérience cohérente.

Les composants sont nos blocs de LEGO. Ils sont utilisés dans Figma par les UX/UI Designer, et directement dans le code par les développeurs Webflow. Leur comportement fonctionnel doit être spécifié.

Quant aux modèles, ce sont les instructions de construction qui nous permettront d'utiliser ces composants de manière logique et cohérente, dans tous les produits.

<category-tag-red>Conclusion<category-tag-red>

Un Design System est un produit complet, qui va aider les acteurs d'un projet à construire d'autres produits.

Comme tout bon produit, il aura son propre backlog et devra se construire de manière itérative, en gardant les utilisateurs (designers, développeurs...) au cœur de la réflexion.

Plus le système sera intégré aux flux de travail des concepteurs et des développeurs, plus il sera efficace.

Cela permettra ainsi à toutes les parties prenantes de gagner en productivité et permettra également de maintenir une cohérence sur l'ensemble des produits d'une marque.

Design System et création site web

Design System : FAQ

🤔 Qu’est-ce qu’un Design System ?

Un Design System est un "outil" de design qui regroupe l'ensemble des composantes graphiques, visuelles, image de marque, tonalités, mises en page, composants, etc. Ce Design System est habituellement disponible en ligne et permet d'améliorer la productivité et la collaboration d'une équipe de conception de produits.

🔎 A quoi sert un Design System ?

L'objectif d'un Design System est de faciliter le travail entre designers et développeurs sur un produit. Le Design System liste tous les éléments nécessaires pour que toutes les personnes impliquées sur un même projet maintiennent une cohérence dans leur travail. Ce système permet d'avoir un design parfaitement harmonisé au niveau de ses règles graphiques, ergonomiques, UX et de développement. Cela représente pour une entreprise un gain de temps et d'argents important tout en améliorant la productivité de ses équipes.

🎨 Pourquoi créer un design system ?

Un Design System vise à optimiser la vitesse de production, la qualité des produits livrables et la cohérence de l'ensemble de l'écosystème de la marque ou du produit.
À Propos :

"J’aide les entreprises à enfin libérer le véritable potentiel de leur site web grâce à la psychologie humaine et une expérience utilisateur mémorable."

Icone LinkedInIcone Twitter
Plus d'articles de la catégorie 
Interface utilisateur (UI)
Tout voir

Une approche unique en création de site internet qui combine UX/UI Design performant, psychologie humaine avancée pour une expérience web mémorable.

Désinscription à tout moment. Jamais de spam.
Votre demande a bien été prise en compte, bienvenue dans le Verse !
Oups !
La soumission du formulaire a échoué.