Mettre en place un design system lorsque l’on développe un produit est une excellente solution. Mais cette méthode est souvent mal comprise et mal utilisée. En effet cela demande un travail assidu sur le long terme et des efforts de collaboration. Mais finalement, ce procédé a énormément d’avantages. 

Qu’est-ce qu’un Design System ? La définition  

Un design system est un procédé englobant tous les éléments concernant le point de contact entre les acteurs du développement d’un produit. Un design system a donc pour objectif de réunir tous les éléments graphiques, visuels, de règles, de branding, de ton, etc dans un seul et même système standardisé. 

Ui kit

On peut donc comparé le design system a une charte graphique. Or, le design system est une version moderne de la bibliothèque d’éléments classiques sous forme de kit UI. On retrouve aussi bien des éléments visuels que des éléments explicatifs sur l’image de marque et sur l’UI Design.

C’est donc un véritable point de contact entre les développeurs et les designers qui n’est pas figé mais qui est dynamique. Les acteurs d’un design system le font évoluer en temps réel afin de s’assurer que les différents acteurs travaillent avec le même design et les mêmes règles.

Le design system a pour objectif de centrer les acteurs du développement d’un produit en question sur les même bases et sur les mêmes règles. On va donc souvent trouver dans des design systems, des bouts de codes CSS par exemples, ou des fichiers sketch. 

On peut retrouver dans un design system des éléments tel que : 

  • le code couleur
  • les typographies utilsées
  • les règles d'utilisation 
  • des explications sur les choix 
  • des composants 
  • des laytouts
  • des grilles de structure
  • le ton de la marque
  • des exemples de code

On peut retrouver également des informations concernant l’état d'esprit de la marque, ses positionnements par rapports à des sujets, ses valeurs, etc.

Le design system représente une manière de penser, un état d’esprit qui encourage le travail d’équipe et la collaboration. Dans la plupart des cas, un design system est disponible par tous directement sur internet, grâce au cloud par exemple. Cela permet à tous les collaborateurs de travailler directement en temps réel avec l’ensemble de l'équipe et d’avoir des retours rapide.

A quoi sert un design systEme ?

On observait souvent les mêmes problèmes dans le passé: chaque acteur, développeur et designer, travaille dans son coin. Et arrivé à la fin, chacun mettait en commun. Cela se passait en général mal car les designers n’étaient pas alignés avec les règles des développeur et inversement. On perdait donc en cohérence au niveau du design en général.

Cela fait donc perdre un temps considérable, avec des va-et-vient interminables.

Le design system est donc principalement utilisé pour cette raison: faire en sorte que toute l’équipe de conception d’un produit soit alignée dès le départ avec un design system qui se met à jour en temps réel. Grâce à ça, une cohérence d’UI, d’UX et d’ergonomie sera respectée par tous.

Cela fait donc gagner un temps considérable au développement des produits. La méthode du Design système s'apparente au procédé de scalabilité. Dans son objectif à vouloir garder un niveau de qualité élevé tout en économisant du temps et donc en étant plus productif. 

Les avantages de design system sont :

  • Une collaboration simplifiée : le design system permet de gagner du temps sur la communication entre les membres de l’équipes. En utilisant un design system, les collaborateurs ont un point de contact dynamique qui s’ajuste en temps réel pour tous afin de travailler avec les même éléments. 
  • Meilleure expérience utilisateur et de collaboration : l'expérience est meilleure, que ce soit pour les collaborateurs ou pour les utilisateurs du produit en question. Si la productivité augmente, les retours avec les utilisateurs seront plus rapide et l’optimisation de l’ux aussi.
  • Des composants UI évolutifs, responsive et réutilisable : cela permet d’avoir une homogénéité dans le design d’interface et dans les différents éléments graphiques. Que ce soit pour l’interface mobile, tablette ou ordinateur, les collaborateurs ont des composants standardisé qui peuvent être réutilisé afin de gagner en productivité.
  • Un gain de temps considérable : pour toutes les raisons déjà énumérées, la méthode du design system permet d’économiser du temps. Aussi bien dans le développement web que dans le design en lui-même.
  • Meilleure communication : entre les concepteurs techniques et les designers, le design system permet de rendre la communication plus agréable et plus efficace.

Par ailleurs, le design system semble présenter que des avantages. Néanmoins, le design system n’a pas sa place pour les tout petits projets ou l’on ne fait pas appel à de réels équipes pour la conception du produit. Dans ce cas-là, la création d’un design system peut être contre-productif et peut faire perdre du temps à la conception. 

Comment créer un design system ?

Lorsqu’on met en place un design system, l'objectif est de mettre en place le plus d’éléments possibles qui sont susceptibles d’être réutiliser plusieurs fois. Pour cela, il est important de créer des paternes, des composants et des layouts dans différents niveaux de profondeur. 

On parle dans ces cas là d’atomic design. L’atomic design est une méthode qui consiste à découper en différents composants le design d’une interface. Cela va permettre d’avoir des petits éléments qui vont former des plus gros et ainsi de suite. 

atomic design

Par exemple les micro-animations, les couleurs, les textes sont des atomes.

Et les molécules sont des groupes d’éléments comme des boutons par exemple. 

Ces éléments travaillent ensemble pour former différents layouts, composants et groupes d’éléments. 

Il est important de les séparer distinctement afin d’avoir la main sur tout et pouvoir réutiliser chaque atome et chaque molécule comme bon vous semble. Que ce soit pour les développeurs ou les designers. 

Par exemple si un développeur veut intégrer un design de bouton dans différents groupes d’éléments, il faut qu’il existe un paterne uniquement pour ce bouton afin que le développeur soit parfaitement flexible à ce niveau-là. 

Les étapes de création d’un design system sont les suivantes. 

Étape 1 : Définir et analyser 

Avant de mettre en place quoi que ce soit, il est important d’analyser votre situation et les problèmes que vous voulez résoudre. 

Posez-vous les bonnes questions : 

  • Pourquoi ai-je besoin d’un design system ?
  • Un design system va-t-il m’aider à être plus productif ?
  • Qui va s’en servir ?

Si c’est par exemple pour la refonte de votre site web, faites d'abord un audit complet de votre site afin de voir quelles sont les problèmes et les améliorations à apporter sur votre site. En faisant ça, vous serez en mesure de créer un design system cohérents avec vos besoins et ceux de vos utilisateurs. 

Il est également important de faire de la recherche sur vos utilisateurs afin de récolter des données qualitatives et quantitatives. Plus vous connaîtrez votre cible, plus vous serez en mesure de concevoir un design system qui leur correspond. 

Pour en apprendre plus sur vos utilisateurs et faire de la recherche ux, plusieurs méthodes existent : 

  • Les tests utilisateurs
  • Les sondages/enquêtes
  • Les suivis de souris
  • Les interviews
  • L’A/B testing

N'oubliez pas que finalement, votre design final doit être pensé pour l'expérience utilisateur et pour les conversions. Sachant que votre design system est le coeur de tous vos éléments graphiques, visuels, textuels, il doit être pensé dans un objectif d’optimisation de l’ux et des conversions. 

Étape 2 : Créer la structure de votre design system 

Le métier d’UI design est un métier qui consiste à travailler sur l'aspect visuel d’un produit, sur le retour graphique que va avoir l’utilisateur face à l’interface. L’UI est donc le point de contact entre l’utilisateur et le produit. 

Wireframe

Cette étape consiste donc à créer la maquette et les différents composants que va contenir votre produit, votre application ou votre site web. 

Plusieurs éléments doivent donc être traités ici :

  • Les boutons
  • Les bannières
  • Le menu de navigation
  • Le bas de page
  • Les emplacements
  • Les layouts

A la manière de l’atomic design, le but ici va être de créer et de placer l’ensemble des boîtes. L'emboitage et la structure de vos éléments doivent être définis de façon standard.

Vous pouvez répertorier ces éléments, ces formes sur une page dédié à l’aide de Sketch ou Figma par exemple. 

Le but est de réunir l’ensemble des boîtes et des parties de votre interface que vous allez réutiliser. Il faut que ces éléments soient divisibles afin de les utiliser comme bon vous semble par la suite. 

Cette méthode de wireframe permet de placer vos éléments au préalable et d’avoir une idée sur les boîtes que vous allez utiliser souvent. 

Vous devez également choisir et respecter une grille qui est propre à toutes les pages de votre site et les sections de votre produit. Vous pouvez choisir de travailler avec 12 colonnes afin que tous vos éléments soient espacé équitablement. 

Étape 3 : La palette de couleur 

La palette de couleur est un élément crucial dans votre design system. Vous devez définir quels sont les couleurs utilisées bien sûr, mais vous devez également spécifier d’autres informations les concernant. 

Couleurs

Plusieurs infos doivent être présentes concernant les couleurs utilisées :

  • Leur fonction : à quoi sert la couleur ? Est-ce une couleur de sélection ? De titre ? De bouton ? Il est important de spécifier le rôle de la couleur en question. Cela permet une meilleure compréhension pour les concepteurs, les designers et les développeurs.
  • Les nuances disponibles : Dans une palette de couleur, on retrouve également des nuances plus ou moins clair pour chaque couleur de la palette. Il est important donc de préciser quels sont les couleurs exactes utilisées, avec une valeur hexadécimal et avec la valeur d’opacité.
  • Les règles : Notamment les règles de contrastes. Il est primordial pour la lisibilité de respecter les normes d’accessibilité et d’avoir un niveau minimal de AA. Si une couleur n’est pas compatible avec une autre en termes de contraste et de typographie, il ne faut pas hésitez pas inscrire cette règle dans le design system afin qu’il n’y est pas d’erreurs à ce niveau.
  • Les variations : Inscrire les variations, s'il y en a, est également important. Si votre produit est disponible en darkmode, il est indispensable donc d’établir le comportement des couleurs en light mode et en darkmode. Par exemple, le rouge sera peut-être plus foncé et version darkmode qu’en version light. Tout ça doit être défini.

Sachant qu’un design system doit être évolutif et entièrement flexible, vous vous devez de créer des variables pour vos couleurs. Afin de gagner du temps si vous devez modifier la couleur de l’ensemble de vos élément. 

Par exemple, si vous avez déjà finis la maquette et que vous devez changer tous les boutons rouge en bouton bleu, il vous suffira juste de changer la variable rouge en bleu. Il est important d’utiliser cette méthode aussi bien sur les maquettes des designers que pour le code JS et CSS des développeurs. 

Étape 4 : Les typographies 

Les textes occupent surement une grande partie de votre design. Vous avez surement des polices de caractères qui reviennent souvent et des tailles de textes standards. Comme pour les couleurs, il est important de définir quels sont les différentes typographies utilisées. 

Typo

Mais il est également important de définir les règles à respecter et les infos à avoir concernant les textes : 

  • Leur rôle : là aussi, il est important de définir les rôles de chacun des variations de textes que vous utilisez. Quelle taille de texte pour vos H1 ? Quel graissage de police pour vos H2 ? Quel style de texte pour les liens ? Toutes ces infos doivent être mentionnées.
  • Les typographies utilisées : Bien sûr, le nom des différentes polices d’écriture doivent être mentionnés. Notamment pour les sites web. Il est possible que certains navigateurs ne parviennent pas à lire votre police d'écriture car elles sont trop récentes. Dans ces cas-là, vous devez également mentionner quelle typographie le navigateur doit afficher quand la première police n’est pas disponible.
  • Les couleurs : il peut être également intéressant de lier les couleurs à des paramètres de polices de caractères. Cela dépend des design systems. Mais vous pouvez décider par exemple, que tous les texts avec une police Roboto qui font 18 pixels seront en rouge.

Là aussi, il est important de créer des variables afin d’avoir la main sur la totalité des paramètre et de gagner du temps. 

L’important est d’avoir une homogénéité dans votre design, utilisez donc les paramètre des polices avec intelligence. Essayez d’utiliser les mêmes paramètres le plus possible. Changez le graissage, la taille, la typographies quand cela aide à la hiérarchisation.

Étape 5 : Les images, illustrations, icônes

Icones

Les éléments purement graphiques doivent eux aussi être répertoriés dans une bibliothèque. Mais le design system impose là aussi de donner des règles à respecter et des paternes à utiliser.  

Mettez-y donc touts les éléments à utiliser, en donnant les fichiers svg, png et jpeg. 

Établissez également des règles concernant l’échelle, les dimensions, les marges à respecter. 

Pour les icônes, vous pouvez là encore les associer aux couleurs. Dire par exemple que les icônes doivent être d’une certaine couleur.

Autre exemple, vous pouvez dire que dans le menu les icônes seront bleu mais que dans le bas de page elles seront rouge. 

Il n’y a pas de limite concernant les règles, tout est possible. C’est ça le design system, ce sont des règles bien spécifiques qui vous faciliteront la tâche.

Étape 6 : Organiser et faire évoluer le design system

Design system organisé

Avec tous ces éléments définis au préalable, vous aurez donc un design system qui fonctionne, à condition que tout soit correctement paramétré. 

Que ce soit vos couleurs, vos textes, vos layouts, vos menus, vos structure… Tout doit être sous forme d’objets réutilisables et combinables entre eux.

Il est important donc de faire cet effort dans les maquette Figma, Adobe XD, Sketch ou autre. Créer au fur et à mesure de la conception des composants et des paternes afin d’avoir un produit homogène dans l’ensemble de son design. 

Également au niveau du code, il est important d’implémenter une fichier CSS de Design system afin de regrouper toutes les normes définis au préalable lors du design. Sachant que le design system doit être évolutif, l'utilisation de variable pour les couleurs, les textes, les marges et tout autre élément nécessaire est primordial. 

7 exempleS de Design system 

Material design de Google 

material design Google

Le material design de Google a été créé en 2014 afin de mettre à disposition un véritable langage de conception et de design. 

On retrouve dans ce design system complet des composants, des guides de typographies de couleurs de positionnement de boutons.

Le material design est basé sur du code et des ressources open-source, ce qui facilite la collaboration entre les designers et les développeurs et aide l’équipe à créer des produits rapidement et facilement. 

Toutes les ressources concernant le design system de Google sont disponibles sur le site material.io.

Design system de Airbnb

Airbnb Design system

Airbnb partage ses informations sur son propre système de design et ses différentes règles de de conception. On retrouve donc ici des propriétés, des composants tout en donnant le ton et la personnalité de la marque. 

Les composant et les éléments peuvent donc être utilisés seul ou ensemble lorsqu'ils sont combinés. 

Fluent de Microsoft 

Design system Microsoft

Le géant Microsoft a bien sûr lui aussi un design system très clair et efficace. Le fluent design system a été développé en 2017. 

On y retrouve différentes directives pour les designer et développeur concernant les logiciels et les appareils qui utilisent la plateforme windows 10. 

Design system de MailChimp

Mail Chimp

MailChimp est un outil de gestion et d’envoi d’email automatique très réputé. Ils ont eu aussi un design système bien établi qui existe depuis bien longtemps. 

L’entreprise propose donc des guide de style pratique que tout le monde peut utiliser pour ses design de mails et d’interface.

Polaris de Shopify 

Shopify Design system

Shopify est une société de-commerce doté d’une plateforme permettant à chacun de créer sa propre boutique en ligne assez facilement. Shopify a également crée un design system nommé Polaris qui a pour objectif d’aider l’entreprise mais aussi à ses utilisateurs afin de créer une bonne expérience utilisateur.

Elle est composée donc de composant, de règles graphiques et visuels, de conseils pour le contenu, le ton, la grammaire, etc.

Atlassian Design 

Atlassian Design System

L'entreprise de logiciel d’entreprise australienne Atlassian a elle aussi son design system.

Publié pour la première fois en 2012 le design system est extrêmement détaillé et est composé de modèle de conception, de code et d’une bibliothèque de ressources d’interface disponible dans sketch. On y trouve également différentes explications concernant les choix pris. 

IBM Design

IBM Design  System

Le design système d’IBM n’est peut-être pas aussi complexe et flashy que les autres, mais il a le mérite d'être élégant fonctionnel, direct et simple. 

On peut retrouver quelques exemples d'utilisations de leur design, des aperçus logiques, des animations, couleurs, code réutilisable, etc. 


  • 📌Qu’est-ce qu’un design system ?

    Un design system est une méthode de design ayant pour but de réunir tous les éléments graphiques, visuels, de règles, de branding, de ton, de layouts, de composants, etc. Ce design system est donc généralement disponible en ligne sur un cloud par exemple afin d’améliorer la productivité et la collaboration d’une équipe de conception de produit.

  • 🎨A quoi sert un design system ?

    Un design system a pour objectif de faciliter la tâche aux designers et aux développeurs d’un produit. Le design system recense tous les éléments d’une interface en question afin que les acteurs de sa conception puisse les utiliser et travailler sur les mêmes composants. Cela permet donc en amont d’avoir un design parfaitement homogène au niveau de ses règles graphiques, ergonomique, UX et de développement. Cela offre un gain de temps et d’argent considérable ainsi qu’une meilleure productivité.

  • 🛠️Quel outil utiliser pour créer un design system ?

    Pour créer un design system, des outils d’UI classiques comme Figma, Adobe XD ou Sketch sont efficaces. Ils vont vous permettre de réunir dans des pages spécifiques tous vos composants et vos éléments dynamiques nécessaires.