Aller au contenu

Design System en quelques mots

Introduction

Problématique : Gérer plusieurs interfaces digitales pour une entreprise nécessite :

Solution : Le Design System est une méthodologie qui répond à ces enjeux en industrialisant la conception des interfaces.

1. Qu’est-ce qu’un Design System ?

Un Design System est une bibliothèque de composants réutilisables (boutons, formulaires, cartes, etc.) associée à des règles d’utilisation (guides de style, conventions de nommage, charte graphique,…).

Il sert de référentiel unique pour garantir la cohérence visuelle et fonctionnelle sur tous les projets digitaux d’une entreprise.

À quoi ça ressemble ?

Exemple 1 : Photon Design System de Mozilla (utilisé pour Firefox).

Exemple 2 : Material Design de Google

Pourquoi utilise t-on un Design System ?

Si vous n’utilisez pas de Design System, cela peut engendrer les problèmes suivants :

Problème sans Design System Solution avec Design System
Incohérences visuelles entre projets Uniformisation des composants et styles.
Temps perdu à recréer les mêmes éléments Réutilisation de composants prêts à l’emploi.
Difficulté de collaboration entre équipes Langage commun et documentation centralisée.
Maintenance complexe Mises à jour centralisées et propagées automatiquement.

2. Les 4 piliers d’un Design System

Un Design System repose sur 4 éléments clés :

a. La Charte Graphique (ou Branding)

Exemple :

:root {
  --primary-color: #22c55e; /* Vert */
  --secondary-color: #0f172a; /* Bleu foncé */
  --font-main: 'Inter', sans-serif;
  --spacing-unit: 8px;
}

b. Les Composants avec Atomic Design

Cette méthode a été proposée par Brad Frost en 2013. Il s’agit d’une approche qui vise à améliorer la qualité du design en le rendant plus efficace et plus facile à utiliser, grâce à l’organisation des éléments graphiques en différents niveaux de complexité. Ces derniers sont conçus pour être scalables, réutilisables* et modulaires, pouvant être combinés pour construire des sections plus grandes.

Elle permet d’optimiser la création, la maintenance et la mise à jour des éléments visuels du design. C’est une approche logique et systémique qui facilite la création d’un design cohérent et compréhensible, tout en améliorant de facto l’expérience utilisateur globale.

Inspiré de la chimie, l’approche Atomic Design décompose une interface en 5 niveaux :

Niveau Description Exemple
Atomes Éléments de base (non divisibles). Bouton, champ de texte, icône.
Molécules Groupes d’atomes. Formulaire de connexion, carte produit.
Organismes Assemblages complexes. En-tête (header), pied de page (footer).
Templates Structures de page (sans contenu). Page d’accueil, page produit.
Pages Templates + contenu réel. Page “Contact” avec texte et images.

(Atomes → Molécules → Organismes → Templates → Pages)

Sources : justinmind.com

c. Le Guide de Style (Style Guide)

Document qui détaille chaque composant :

Sources : justinmind.com

Lien vers une vidéo de présentation sur l’Atomic Design

Exemple :

Bouton Principal

  <button class="btn-primary">Valider</button>

d. La Documentation

Outils recommandés :

3. Comment créer un Design System ?

Étape 1 : Il faut auditer l’existant

Étape 2 : Définir les règles de base

Exemple de palette :

Couleur Valeur HEX Usage
Primaire #22c55e Boutons, liens.
Secondaire #0f172a Arrière-plans.
Fond #e5e7eb Texte principal.

Étape 3 : Concevoir les composants (Atomic Design)

Nous n’avons pas forcément le temps d’aborder tous les sujets, techniques et méthodes associés au Design System, mais sachez qu’il existe l’Atomic Design qui fait l’objet d’une courte présentation (existe depuis 2013)

a. Créer vos premiers atomes

Exemple : Un bouton (en version VueJS) :

<template>
  <button :class="['btn', `btn--${variant}`]">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      default: 'primary', // primary|secondary|ghost
    },
  },
};
</script>

<style>
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
}
.btn--primary {
  background: #22c55e;
  color: white;
}
</style>

b. Assembler les molécules

Exemple : Une carte (Card) avec un titre (atome) et un bouton (atome) :

<template>
  <div class="card">
    <h3></h3>
    <p>
<hr />

<h1 id="a-rédiger">A rédiger</h1>

</p>
    <DevButton variant="secondary">En savoir plus</DevButton>
  </div>
</template>

Étape 4 : Documenter et partager

Exemple de documentation :

Carte (Card)

Utilisation : Mettre en avant un contenu (article, produit).

Props :

Exemple :

<DevCard title="Mon Produit" content="Description..." />

Outils pour construire un Design System

Outil Usage Lien
Sketch Création des maquettes et bibliothèques. sketch.com
Figma Collaboration en temps réel. figma.com
Storybook Documentation interactive pour les devs. storybook.js.org
InVision Prototypage et documentation. invisionapp.com
Zeroheight Documentation centralisée. zeroheight.com

Activités de mises en pratiques

Activité 1 : Créer un atome (bouton)

Vous pouvez utiliser un de vos Frameworks préférés.

Consigne :

  1. Crée un composant Vue.js pour un bouton avec :
    • Une prop variant (primary, secondary).
    • Un état disabled.
  2. Documente-le dans un fichier Markdown (couleurs, tailles, code).

Activité 2 : Assembler une molécule (carte + bouton)

Consigne : Utilise le bouton créé précédemment pour construire une carte (DevCard).

La carte doit avoir :

Activité 3 : Documenter un composant

Consigne : Rédige une documentation Markdown pour la carte créée.

Une description :

Étude de cas : Mise en place d’un Design System

Contexte

Une entreprise de e-commerce souhaite harmoniser ses 5 sites web (desktop + mobile).

Problèmes rencontrés

Solution proposée : Un Design System

  1. Auditer les 5 sites pour lister les composants communs.
  2. Créer une bibliothèque :
    • Atomes : Boutons, champs de formulaire, icônes.
    • Molécules : Cartes produit, filtres, headers.
  3. Documenter avec Storybook + Zeroheight ou autre selon vos outils.
  4. Former les équipes (designers et développeurs).

Résultats

Bonnes pratiques et pièges à éviter

Bonnes pratiques

Pièges à éviter

Ressources pour aller plus loin

Livres

Outils open-source

StoryBoard est pas mal et gratuit.

Petit Quiz de révision

  1. Qu’est-ce qu’un Design System ?
    • a) Un logiciel de design.
    • b) Une bibliothèque de composants + règles d’utilisation.
    • c) Un framework CSS.
  2. Quel est l’ordre correct des niveaux dans l’Atomic Design ?
    • a) Molécules → Atomes → Organismes → Templates → Pages.
    • b) Atomes → Molécules → Organismes → Templates → Pages.
    • c) Pages → Templates → Organismes → Molécules → Atomes.
  3. Quel outil est recommandé pour documenter un Design System ?
    • a) Photoshop.
    • b) Storybook.
    • c) Excel.
  4. Pourquoi utiliser un Design System ? (Plusieurs réponses possibles)
    • a) Gain de temps.
    • b) Cohérence visuelle.
    • c) Réduire les coûts de développement.
    • d) Remplacer les designers.

Conclusion

Synthèse

Concept Définition Exemple
Design System Bibliothèque de composants + règles d’utilisation. Material Design (Google).
Atomic Design Méthode de décomposition des interfaces (Atomes → Pages). Bouton → Formulaire → Page de connexion.
Guide de Style Document décrivant les règles visuelles et fonctionnelles. Palette de couleurs, typographie.
Documentation Explications et exemples pour utiliser les composants. Storybook, Markdown.

Message clé

Un Design System n’est pas un projet ponctuel, mais un processus continu qui évolue avec vos produits.

Il nécessite :

Annexes

Glossaire

Exemple de charte graphique

:root {
  --primary: #22c55e; /* Vert */
  --secondary: #0f172a; /* Bleu foncé */
  --text: #e5e7eb; /* Texte clair */
  --font-main: 'Inter', sans-serif;
}

Quelques explications sur des termes Tap - Overlay - Smart animate

1. Tap / Navigation

Tap correspond à l’action de l’utilisateur consistant à taper/cliquer sur un élément interactif (bouton, lien, carte, etc.). Navigation, c’est la changement de page, de vue, ou de section dans une application ou un site web, déclenché par cette action.

À quoi ça correspond ?

Comportement :

Quand un utilisateur click ou tape dans le cas d’une application sur mobile, sur un élément (ex : un bouton, un lien, une carte), l’application navigue vers une autre page, un autre écran, ou une autre section.

Exemples : Cliquer sur un bouton “Voir le produit” pour accéder à la page détaillée du produit ou taper sur un onglet de menu pour afficher une nouvelle section.

Exemple technique (Vue.js/React)

<template>
  <button @click="$router.push('/produit')">Voir le produit</button>
</template>

Dans ce code, le @click (ou v-on:click) déclenche une navigation vers la route / produit.

Cas d’usage :

2. Overlay / Modale

Overlay : c’est un calque superposé à l’interface existante, souvent semi-transparent, qui masque partiellement le contenu sous-jacent, tandis que la Modale est une fenêtre ou boîte de dialogue qui s’affiche par-dessus le contenu principal et requiert une action de l’utilisateur (fermeture, validation, etc.) pour revenir à l’interface normale.

À quoi ça correspond ?

Comportement :

Un overlay est utilisé pour attirer l’attention sur un contenu spécifique (ex : une alerte, un formulaire, une confirmation) sans quitter la page.

Exemples :

Exemple technique (Vue.js)

<template>
  <div>
    <button @click="showModal = true">Ouvrir la modal</button>
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <h2>Titre de la modal</h2>
        <p>Contenu de la modal...</p>
        <button @click="showModal = false">Fermer</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Au-dessus du reste */
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}
</style>

Cas d’usage

3. Smart Animate (si possible)

Smart Animate est une technique d’animation intelligente qui permet de fluidifier les transitions entre deux états d’une interface, en utilisant des interpolations (mouvements, fondu, redimensionnement) pour rendre les changements plus naturels et moins abrupts.

Souvent implémentée avec des outils spécifiques comme des bibliothèques CSS du type Animate.css ou framer-motion.

À quoi ça correspond ?

Comportement :

Quand un élément change de position, de taille, ou de contenu, une animation fluide est appliquée pour guider l’œil de l’utilisateur et améliorer son expérience (du moins pour les personnes voyantes)

Exemples :

Exemple avec des CSS (transition)

.card {
  transition: all 0.3s ease; /* Animation fluide */
}

.card:hover {
  transform: scale(1.05); /* Légèrement agrandi */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
}

Cas d’usage

Micro-interactions :

Transitions entre pages :

Éléments dynamiques :

Quelques outils pour implémenter Smart Animate

Pour conclure :

Corrections des activités

Activité 1

<template>
  <button :class="['btn', `btn--${variant}`]" :disabled="disabled">
    <slot>Bouton</slot>
  </button>
</template>

<script>
export default {
  props: {
    variant: { type: String, default: 'primary' },
    disabled: { type: Boolean, default: false },
  },
};
</script>

Activité 2

<template>
  <div class="card">
    <h3></h3>
    <p>
<hr />

<h1 id="a-rédiger">A rédiger</h1>

</p>
    <DevButton variant="secondary">En savoir plus</DevButton>
  </div>
</template>

<script>
import DevButton from './DevButton.vue';

export default {
  components: { DevButton },
  props: {
    title: { type: String, default: 'Titre par défaut' },
    content: { type: String, default: 'Contenu par défaut' },
  },
};
</script>

Activité 3

La Carte (DevCard)

Description : Affiche un contenu sous forme de carte avec un titre, une description et un bouton.

Propriétés (tableau) :

Prop Type Défaut Description
title String “Titre par défaut” Titre de la carte.
content String “Contenu par défaut” Texte descriptif.

Exemple

<DevCard title="Mon Produit" content="Un produit incroyable..." />