Vous gérez plusieurs interfaces digitales pour votre ville, communauté de commune ou collectivité ? Vous souhaitez les retravailler, les harmoniser ? Et passer le moins de temps possible à gérer les évolutions … ? La méthode du Design System est la solution pour répondre à vos besoins.

Qu’est-ce qu’un Design System ? 

Si vous allez sur Wikipédia, vous pourrez lire ceci : “processus de définition de l’architecture, de la conception du produit, des modules, des interfaces et des données d’un système pour répondre aux exigences spécifiées.”.

Pour notre part, nous allons reprendre la définition d’Usabilis que nous trouvons complète et simple : “Un Design System s’apparente à une bibliothèque de composants, visuels et principes au code réutilisable. Les définitions du Design System englobent souvent les mots bibliothèque (library), lignes directrices (guidelines), styleguide et langage visuel (visual language). Le Design System comprend tous ces aspects.”.

Pour résumer, voici les éléments que vous retrouvez dans un Design System :

• La palette des couleurs

• Les typographies utilisées

• L’iconographie et l’imagerie

• Les composants UI et patterns

• Les grilles de structure des éléments, des espaces, etc.

• Les principes de communication de la marque (langage, ton, etc.)

À 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.

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. 

Premiere 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à. 

Deuxième exemple :

• Les atomes : représentent les plus petits éléments UI basiques et indivisibles, comme : les boutons, les couleurs, les styles de typographie, etc.
• Une molécule : est un ensemble d’atomes, qui rassemble les composants UI dans une unité unique.
• Un organisme : est un groupe de molécules et/ou groupe d’atomes. 
• Un template : est la structuration des groupes de molécules.
• La page : représente l’interface utilisateur finale. Avec l’Atomic Design, la création d’une page s’est modifiée. Le design ne se fait plus écran par écran, pour ensuite créer les éléments graphiques de l’interface ou GUI : Graphical User Interface. 

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’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é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 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. 

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 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 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 une 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.