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, liés aux règles, de branding, de ton, etc. dans un seul et même système standardisé.

On peut donc comparer le design system à 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 exemple, ou des fichiers sketch.

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

• le code couleur
• les typographies utilisées
• les règles d'utilisation
• des explications sur les choix
• des composants
• des layouts
• 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 rapides.

À quoi sert un design system ?

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éveloppeurs 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’équipe. 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êmes é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 rapides et l’optimisation de l’UX aussi.
  
• Des composants UI évolutifs, responsives et réutilisables : 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és qui peuvent être réutilisés 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 petits projets où l’on ne fait pas appel à de réelles é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éutilisés 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.

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 quels 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érent 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 cœur 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.

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'emboîtage 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ée à 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és équitablement.

Étape 3 : La palette de couleur

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

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 quelles sont les couleurs exactes utilisées, avec une valeur hexadécimale et avec la valeur d’opacité.
  
• Les règles : Notamment les règles de contraste. 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 à inscrire cette règle dans le design system afin qu’il n’y est pas d’erreur à 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é en 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éments.

Par exemple, si vous avez déjà fini la maquette et que vous devez changer tous les boutons rouge en boutons bleus, 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 sûrement une grande partie de votre design. Vous avez sûrement 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.

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 textes 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ètres et de gagner du temps.

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

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

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 tous 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 bleues mais que dans le bas de page elles seront rouges.

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

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 structures… Tout doit être sous forme d’objets réutilisables et combinables entre eux.

Il est important donc de faire cet effort dans les maquettes Figma, Adobe XD, Sketch ou autres. 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 un fichier CSS de Design system afin de regrouper toutes les normes définies au préalable lors du design. Sachant que le design system doit être évolutif, l'utilisation de variables pour les couleurs, les textes, les marges et tout autre élément nécessaire est primordial.

Se faire accompagner

Il vous faut les compétences d'un UX Designer pour réaliser votre design system. Vous pouvez vous faire accompagner par un membre de l'équipe pour la réalisation de votre design system.

7 exemples de Design system

Material design de 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 partage ses informations sur son propre système de design et ses différentes règles de conception. On retrouve donc ici des propriétés, des composants tout en donnant le ton et la personnalité de la marque.

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

Fluent de 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 designers et développeurs concernant les logiciels et les appareils qui utilisent la plateforme Windows 10.

Design system de MailChimp

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 guides de style pratique que tout le monde peut utiliser pour ses designs de mails et d’interfaces.

Polaris de Shopify

Shopify est une société de-commerce dotée 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 à 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

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

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, codes réutilisables, etc.