Design System : qu’est-ce que c’est et comment le créer ?

Créer un Design System est une méthode qui demande du temps et de la rigueur. Mais c’est un élément très intéressant en de multiples points : comme la collaboration entre développeurs et designers, ou la conception/amélioration d’un produit pour un designer.

Mettre en place un Design System est une base que tout bon designer doit être capable de faire. Malheureusement, c’est un travail qui est souvent mal réalisé ou mal utilisé. Car, pour le faire, il faut être rigoureux et méthodique.

C’est quoi la définition d’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 ma part, je vais reprendre la définition d’Usabilis que je trouve 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. ».

Une abonnée m’a demandé si ce n’était pas la même chose que le « Style Guide ». En fait, le Style Guide c’est juste une partie qui compose le DS. Il va plutôt regrouper tous les éléments graphiques. Ensuite, on a la bibliothèque de Patterns, qui intègre plutôt des composants plus complexes (qui est souvent un assemblage de plusieurs éléments du Style Guide. On appelle ça l’Atomic Design, j’en parle plus tard dans l’article).

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

Oui, mais à quoi ça sert d’avoir un kit aussi complet ?

Créer un Design System aussi complet ça prend du temps. Vous pouvez penser, de ce fait, que ça fait perdre du temps à un web designer lorsqu’il conçoit une interface. Mais en réalité, c’est tout le contraire, créer un Design System fait gagner beaucoup de temps sur la conception et le développement d’une interface.

Voici les avantages à créer un Design System :

• Offrir une meilleure expérience collaborative entre designers et développeurs. On gagne du temps sur la communication entre les différents intervenants, tout le monde travaille avec les mêmes éléments.

• Des composants et des éléments graphiques évolutifs et réutilisables. Avec un Design System bien conçu, tous vos éléments sont standardisés et peuvent être réutilisés pour gagner en productivité. Et surtout, vous pouvez faire évoluer n’importe quel élément à la source, le changement s’appliquera à l’ensemble de votre interface. Vous voulez changer la couleur de tous vos boutons principaux ? Aucun problème, changez-la dans votre DS, elle s’appliquera sur tous vos boutons présents dans votre maquette.

• Un gain de temps considérable. En réalité, cet avantage est le résultat final des deux précédents. Mais en facilitant la communication entre les différents intervenants et en améliorant la productivité, vous ne pouvez qu’économiser du temps. Et cela vaut aussi bien pour la conception d’une interface, que pour son intégration.

Pour ma part, lorsque je travaille sur la conception d’une interface pour un client, qu’elle soit web ou mobile, je créée toujours un Design System complet.
Je vois que certains designers facturent ce DS, c’est leur choix, mais ça laisse entendre que ça demande du temps et que c’est une charge en plus de travail. Alors, oui, ça demande du temps sur le moment, mais le temps que vous y avez passé, vous allez largement le rattraper par la suite. Donc je trouve plutôt malhonnête de la part de certains de le facturer.

N’oubliez jamais que quand on réalise un Design System, tout le monde est gagnant. Il n’y a pas de perdant.

Comment créer un Design System ?

Si vous avez compris ce que c’était qu’un Design System, et l’utilité d’en créer un, vous vous demandez peut-être comment on s’y prend pour le mettre en place.

Au départ, vous devez vous dire que vous allez regrouper tous les éléments dans des grandes familles. Car votre kit peut regrouper beaucoup d’éléments, et le but, c’est de les retrouver rapidement.

On va aussi parler d’Atomic Design. Il s’agit de découper les différents composants en allant du plus petit élément isolé jusqu’à former de plus gros éléments.

D’une certaine manière, c’est en suivant ce schéma que vous allez construire votre Design System.

#1 Introduction : objectifs et valeurs

Vous pouvez commencer par créer une première page qui se nommerait « Introduction ». Cette page a pour but de présenter le projet, le Design System ou encore les valeurs du projet et de l’équipe.

Voici un exemple simple d’une page « Introduction ». Ici, j’ai choisi de rappeler de quoi est composé le DS, je pourrais également ajouter des blocs qui rappelleraient l’identité de la marque, les valeurs, les objectifs, etc.

#2 Style Guide : ou la charte graphique de votre site

C’est une étape très importante dans votre Design System, c’est la base de votre structure. Vous vous rappelez le schéma de l’Atomic Design ? Cette partie, c’est l’équivalent d’un regroupement de tous vos tokens.

Évidemment, chacun a sa manière de s’organiser, mais généralement, on y met tous les éléments qui composent une charte graphique.

• La palette de couleurs complète. On n’oublie pas le gris ou le noir, ça reste des couleurs. Surtout qu’en UI, on n’utilise jamais un noir pur (#000000) donc il faut que le développeur ait le bon code couleur et qu’il soit référencé dans le Design System.

• Les typographies. Ici, tout dépend le projet, mais vous pouvez regrouper les typographies pour desktop d’un côté et mobile de l’autre. Aussi, je vous conseille vivement de bien renommer chaque élément typographique. Je pense aux développeurs qui font l’intégration derrière. On a beaucoup de web designers qui ne renomment pas ces éléments, ou qui vont juste mettre « Titre » ou « Texte ». On va plutôt renommer ces éléments en « H1 », « H2 », « H3 », etc. Ça facilite le travail du développeur derrière et ça évite de s’éparpiller et d’utiliser cent tailles différentes de typographies.

• Les icônes. Toutes les icônes que vous utilisez doivent être référencées. Surtout que parfois, on va prendre une icône seule et lui ajouter un background carré ou rond coloré pour la faire ressortir. Vous allez former un « Element » (on pense toujours à l’Atomic Design), qui est composé de deux tokens.

• Les images, les illustrations et/ou les logos. C’est tout autant important de stocker ces éléments qui font partie du visuel et de l’identité de votre interface. Autre point important, notamment quand on s’attaque à une refonte, vous devez connaître toutes les tailles d’image que vous pouvez utiliser. Il est donc très important de conserver ces informations dans le DS.

Vous pouvez même avoir d’autres éléments, comme des animations, des sons, etc. L’important est de comprendre l’idée principale de la composition de cette partie.

#3 La bibliothèque de Patterns : des composants plus complexes

On s’attaque maintenant aux composants de votre Design System. Tous les éléments dont nous avons parlé précédemment vont vous servir à créer vos composants. Dans cette partie, il va falloir être méticuleux et organisé.

Chacun peut organiser cette partie comme il le souhaite, mais il faut essayer de faire des regroupements les plus cohérents possibles.
Je vais vous donner une liste d’exemples de groupes de composants qui vont constituer cette bibliothèque :

• Les boutons. On a toujours besoin de boutons d’action dans une interface. Ce qu’on va faire dans cette section, c’est de créer les types de boutons (primaires, secondaires), puis toutes les tailles (large, medium, small) puis tous les états (initial, hover, active, disabled, etc.).

• Les inputs. Vous pouvez y mettre des champs textes, les boutons pour une checkbox, les boutons radio, les toggles, un stepper ou encore un date picker (sélection date calendrier) avec leurs différents états.

• Header et footer. Très important de créer des composants pour son menu et son footer. Surtout sur un menu de navigation ou les éléments peuvent avoir différents états.

• Divers éléments d’affichages : les avatars, les badges, les messages d’erreurs, une carte présentant un contenu, un indicateur de progression, des commentaires, etc.

La liste dépend bien évidemment du contenu de votre interface. Il est donc difficile de donner une liste précise des groupes de composants. Vous pouvez les regrouper par catégories : les formulaires, les display, etc. N’hésitez pas à chercher des design systems de grandes compagnies, certaines les mettent à disposition des internautes. Ça pourra vous donner des idées sur la façon dont vous voulez organiser votre bibliothèque.

Vous pouvez regarder le Material Design de Google, le Microsoft Fluent Web, il y a également les sites de MailChimp et Duet Design System. Et si vous voulez mieux vous rendre compte de l’organisation de votre Design System dans un logiciel comme Figma, par exemple, il existe des plugins de Design Systems qui vous donneront des idées.

#4 La dernière étape : le template

Le template, selon moi, ne fait pas forcément partie du Design System. Car il est le résultat de la combinaison de tous les éléments que vous avez créé précédemment.

Les templates peuvent faire partie de votre Design System si vous avez plusieurs sections assez importantes sur une même page. Cela n’est pas toujours nécessaire. Par exemple, dans le cas d’un site vitrine assez simple, créer un template dans votre Design System ne sera pas forcément nécessaire. En revanche, sur un site e-commerce qui peut avoir beaucoup de sections différentes assez complexes, là, le template présente un réel intérêt.

Créer un Design System : ce qu’il faut retenir

Ça va être difficile de résumer, car l’article était assez long, mais il y a tant de choses à dire sur le Design System.

Si on devait résumer sa définition : c’est ce qui compose tous les éléments de votre interface web ou mobile. C’est l’équivalent d’une charte graphique (un peu plus poussée et complexe).

Son utilité ? Je pense que vous l’avez réellement compris après avoir vu tous les éléments qui le composent.
Si vous suivez les bonnes pratiques, si vous êtes organisé, méthodique alors vous n’aurez aucun mal à créer un bon Design System. Et je peux vous garantir que les développeurs vous remercieront (à l’inverse, ils vous maudiront).
Et vous vous remercierez vous-mêmes quand vous verrez le temps que vous gagnerez à bien faire cet exercice.

Ah, et dernière précision : vous pouvez créer votre Design System sur n’importe quel outil de conception (Figma, Adobe XD, etc.). L’important, c’est que votre DS soit sur le même projet que votre interface.