Comment créer un Design System ? Ce qu’il faut savoir !
Le Design System permet aux équipes d’UX design de créer des expériences utilisateurs cohérentes tout en accélérant le processus de conception des différentes interfaces. Il s’agit d’une bibliothèque d’éléments graphiques et de composants fonctionnels qui sont réutilisables à travers les différents supports pour délivrer une expérience utilisateur uniforme et qui reflète l’image et les valeurs de la marque.
La création d’un Design System permet donc d’optimiser le processus de la conception des applications mobiles, des sites web et des différentes interfaces graphiques selon une approche centrée utilisateur.
Qu’est-ce qu’un Design System ?
Le Design System peut être considéré comme une bibliothèque de ressources mises à la disposition des UX/ UI designers et des développeurs pour leur permettre de créer ensemble et plus rapidement des interfaces graphiques homogènes.
Le Design System comporte les éléments graphiques, symboles, règles UX et composants développés sur-mesure qui sont réutilisables pour accélérer et assurer la conformité des interfaces conçues aux règles générales de l’ergonomie ainsi qu’à la charte graphique et UX définie.
Permettant de concevoir des interfaces digitales, le Design System doit être :
- Évolutif : il est constamment alimenté par de nouvelles ressources
- Mis à jour : les éléments réutilisables sont mis à jour automatiquement à travers les différentes plateformes
- Réutilisable : c’est le principe même du Design System, il s’appuie dans sa création aux règles générales de l’UX et de l’ergonomie IHM pour qu’il soit réutilisable et adaptable
- Adaptable : les éléments présents dans un Design System doivent être adaptables pour une utilisation sur les différents supports et interfaces (objets connectés, PC, Smartphone, web, etc.).
Voir cette vidéo pour en savoir plus :
Le contenu d’un Design System
Le principal objectif d’un Design System est de faciliter le travail collaboratif des différentes parties prenantes du même projet. Le contenu du Design System dépend donc de qui va l’utiliser et pourquoi va-t-il l’utiliser.
Définir les objectifs et les utilisations
Pour définir les objectifs de la création d’un Design System et ses utilisations, il est nécessaire de savoir répondre à ces questions : pour qui ? Pourquoi ?
Cela permettra d’avoir une vision claire sur les objectifs précis de la création d’un Design System pour savoir comment le créer et ce qu’il devrait contenir.
Les objectifs définis peuvent être évolutifs en fonction de l’évolution de l’organisation et de ses missions, il est donc normal de mettre les objectifs à jour et il est surtout nécessaire de les communiquer aux différentes équipes pour qu’elles soient alignées dans la même direction.
Il est également nécessaire de définir les missions et les valeurs globales de l’organisation pour créer des Design Systems qui reflètent cette vision et pour impliquer les différents intervenants.
Les principes fondamentaux
Pour qu’un Design System soit réutilisable, il doit être fondé sur des principes fondamentaux. Ils serviront de références pour les designers et les développeurs qui contribueront au Design System.
Ces principes reflètent, en réalité, les missions et les valeurs de l’interface à créer. Ils font donc partie de l’image de marque du produit final et doivent la refléter dans tous les aspects visuels et fonctionnels.
Pour définir les principes fondamentaux, il est nécessaire de bien se concentrer sur le cœur de la mission du produit final et de ses grandes valeurs.
L’image de marque
L’image de marque permet de différencier les plateformes digitales et de les faire sortir du lot. Elle est définie en fonction de la vision de la marque, de ses missions et des moyens qu’elle en dispose pour atteindre ses objectifs.
Pour simplifier les choses, l’image de marque est dégagée de son identité visuelle et de son discours. Ainsi, le Design System doit contenir tous les éléments qui permettent de différencier la marque et de refléter ses valeurs. Il peut s’agir de :
- Couleurs
- Typographies
- Formes
- Icones
- Illustrations
- Photographies
- Animations
- Sons
- Ton de la voix
- Etc.
Tous ces éléments constituent le langage que parle le Design System. Il s’agit du langage parlé de la marque pour communiquer avec ses utilisateurs. C’est, en fait, la combinaison de tous ces éléments qui crée l’image de marque.
Composants et recommandations
La structure d’un Design System peut être réduite en deux principales catégories : les composants et les recommandations.
Les composants sont tous les éléments visuels ou fonctionnels qui composent les différentes interfaces du produit final. Ils sont utilisés par l’UI designer pour créer les différents blocs des interfaces et par le développeur pour spécifier le fonctionnement et les interactions des interfaces.
Les recommandations permettent d’assurer les bonnes combinaisons des composants pour créer des expériences utilisateurs cohérentes. Il s’agit des différentes règles qui doivent être respectées pour assurer la bonne ergonomie de l’interface et pour refléter l’image de marque. Les recommandations sont référencées sous la forme de documentation ou de bonnes pratiques à respecter par les UI designers et les développeurs dans la création et l’utilisation des différents composants.
Voir cette brillante conférence de Hayley Hughes sur le Design System, qui occupait le poste de Lead Design à Airbnb et actuellement, elle est UX Manager et chef Design System à Shopify :
Quoi que la qualité de son laisse à désirer, cette conférence de Reed Engern un Product Designer à Google s’avère aussi super intéressante. A ne pas rater !
La mise en place d’un Design System
1. La recherche UX
Le travail de recherche est indispensable à tout projet de conception d’interfaces. L’UX Research permet de comprendre l’utilisateur dans le contexte de l’utilisation et de préparer tous les éléments nécessaires pour la conception d’une expérience utilisateur optimale.
Il s’agit ici d’identifier les besoins et les attentes des utilisateurs, de réaliser des interviews pour comprendre sa psychologie et d’effectuer le travail de documentation nécessaire. Toutes ces tâches sont généralement attribuées à un UX Researcher qui a pour mission de se mettre à la place de l’utilisateur et de proposer des recommandations permettant de créer des expériences utilisateurs et des interfaces adaptées aux besoins et aux attentes de l’utilisateur.
Le travail de recherche est par la suite exposé aux différents intervenants du projet : Lead UX, Chef de projet, UI designers, développeurs, etc. pour leur permettre d’adopter l’état d’esprit nécessaire pour la création des éléments adaptés aux objectifs.
Pour aller plus loin, lire : Quels outils utiliser pour réaliser une recherche UX performante ?
2. L’équipe
La constitution d’une équipe est une étape indispensable à la réussite de la création d’un Design System. Elle doit comporter les compétences techniques et la mentalité nécessaires à la création d’un Design System adapté aux objectifs. Ainsi, pour réussir la création de votre Design System, il est généralement conseillé que votre équipe soit composée au moins de :
- Un Lead UX designer
- Un product manager ou product owner
- Des UI designers
- Des développeurs front-end
- Un UX writer
Tous ces membres collaborent pour la création et l’enrichissement du Design System par les éléments réutilisables.
- Les UI designers ont pour mission de créer les éléments graphiques qui composent les différentes interfaces.
- Les développeurs créent les composants en fonction des besoins.
- Le lead UX designer s’assure que les éléments ajoutés répondent aux règles générales de l’ergonomie et aux objectifs spécifiques en termes d’UX.
- Le chef de produit ou le chef de projet s’assure que le Design System est adapté aux objectifs du projet.
- L’UX writer a pour mission de concevoir une charte éditoriale adaptée aux besoins de l’utilisateur cible.
Ça peut vous sembler évident, mais il est nécessaire de regrouper de différents talents pour assurer la réussite de la création de la base de tout votre projet UX ou UI design.
3. Le référentiel
Le travail de recherche ayant conduit à la création de documents de référence et de recommandations servira de guide aux différents intervenants de la création du Design System.
Ce document contient les spécifications en termes de fonctionnalités qui permettra aux développeurs de créer des composants sur-mesure.
A cela, il faut ajouter la charte graphique qui permettra de définir le graphisme des interfaces à créer (applications mobiles, web ou autres). Il s’agit d’un document qui regroupe les éléments constituant l’identité graphique de l’interface et qui contient les spécifications de couleurs, de typographie, de symboles, etc. Il servira de référentiel aux designers pour la création des différents éléments graphiques des interfaces.
4. Les contraintes
Les contraintes de la création du Design System sont également définies dans le travail de recherche et devraient être prises en compte lors de la création et l’enrichissement de ce système.
Les attentes des utilisateurs doivent être considérées comme une priorité dans la création du Design System. Il est aussi nécessaire de prendre en compte les différentes utilisations pour la création de composants adaptatifs.
La taille de l’écran et sa responsivité, les supports et l’environnement d’utilisation, le profil même de l’utilisateur sont des contraintes à mettre en regard de l’équipe chargée de la création du Design System.
5. Le contenu et la structure
La structure de votre Design System doit être pensée de façon à faciliter l’accessibilité aux différents éléments référencés pour une réutilisation rapide. En plus, les éléments visuels et les composants contenus dans le Design System doivent être facilement personnalisables. Il faut toujours garder cela à l’esprit.
Plus généralement, le contenu d’un Design System peut être structuré selon ce schéma :
- La documentation contenant toutes les références comme : le guide de style, le guide UI, le guide de contenu, le guide de fonctionnalités
- Les ressources contenant les fichiers servant de templates comme les éléments de design et les composants personnalisables
Il s’agit ici de définir le contenu de votre Design System en fonction des besoins des designers et des développeurs pour la création des interfaces conformes aux normes UX, aux objectifs du client et aux attentes des utilisateurs.
6. L’outil
Le choix des outils d’UX design dépend de la nature de votre organisation, de ses intervenants et de ses objectifs. De nombreuses solutions sont disponibles permettant de créer des interfaces digitales et de les personnaliser.
Figma est l’un de ces logiciels d’UI design qui permet à ses utilisateurs de créer des interfaces ergonomiques adaptées aux différents supports d’utilisation. L’outil est devenu aujourd’hui indispensable aux équipes d’UX design car offrant de puissantes fonctionnalités de prototypage interactif et de création de Design System. C’est la fonctionnalité qui nous concerne le plus ici.
En réalité, Figma permet de créer et de réutiliser des Design Systems assurant une parfaite autonomie aux équipes d’UX / UI design.
Build it in Figma : Créer un Design System
La création d’un Design System sous Figma est rendue accessible grâce à une interface utilisateur facile à naviguer et à utiliser. C’est un processus qui permet de concevoir et d’ajouter facilement les ressources visuelles et fonctionnelles nécessaires à la création des interfaces graphiques.
Étant un outil collaboratif par excellence, Figma permet à ses utilisateurs de collaborer sur un seul projet via une simple interface web. En fait, pour accéder à Figma, il suffit de disposer d’un pc, d’un navigateur web et d’une connexion internet. Cette accessibilité fait de Figma un excellent outil de travail collaboratif et par la suite très pratique pour la création des Design Systems.
Nous trouvons également ZeroHeight, un CMS qui vous permet de synchroniser vos fichiers et fonctionne parfaitement avec Figma.
Il y a aussi Storybook qui est un outil privilégié chez les développeurs front-end. Il permet de garder la cohérence et de faire adapter les composants aux objectifs du projet sans toucher les versions précédentes.
Les choix des outils pour la conception d’un Design System sont multiples bien évidemment et la décision revient toujours au chef du projet. Nous tenons compte quand même à préciser que Figma est l’un des outils les plus simples à utiliser et partager mais n’oublions jamais que le plus important c’est le facteur humain ! Peu importe l’outil que vous choisissez, ce qui compte c’est les talents et les personnes qui sont autour du même projet.
Réussir la création d’un Design System est avant tout une question de rassembler les bonnes personnes avant de rassembler les bons outils.
7. La création et le déploiement
La création d’un Design System commence généralement par l’élaboration d’un UI Kit. Ce dernier joue le rôle d’une bibliothèque regroupant les ressources graphiques à destination des UI designers.
Il est ainsi conseillé de se concentrer en premier lieu sur le design du projet avant de passer à l’assemblage des composants. Il s’agit donc de la création des templates des différentes interfaces pour faciliter la création du wireframe par les designers.
Ensuite, les développeurs se chargent du déploiement du code et de la création des composants réutilisables pour permettre finalement de créer des interfaces fonctionnelles plus rapidement.
Conclusion
La création d’un Design System est un processus qui implique de nombreux intervenants qui ont pour objectif la création d’une agéable expérience utilisateur. Un travail de recherche est réalisé en amont pour définir les règles générales et les recommandations à appliquer lors de la création et l’utilisation du Design System. Ce travail consiste à comprendre l’utilisateur dans les conditions d’utilisation (mobile, web, ou autre ) ainsi que de ses objectifs et de ses attentes. En plus, le Design System est un moyen d’assurer l’application de la charte graphique et l’identité visuelle d’une interface ou d’une application sur les différents supports. Finalement, la création d’un Design System permet de consolider l’image de marque d’une interface et de lui définir un langage unique.
by 
