Un Design System s’apparente à une bibliothèque de composants, visuels et principes au code réutilisable. Ce kit évolutif offre un référentiel UX et UI pour les designers et les développeurs de produits et services digitaux. La construction d’un Design system offre de nombreux avantages. Cette solution permet notamment de faciliter le travail des équipes et de réduire la « dette design » et la « dette technique ». Il en résulte un écosystème cohérent et donc une meilleure expérience pour les utilisateurs et les clients.
Public concerné : Concepteurs, designers, webdesigners, webmasters, développeurs front-end, PO, chefs de projets AMOA…
Durée : 3 jour(s)
Prix : 1 500 €
Prochaines dates : 22-23-24 mai 2024
Pour réaliser un Design System, rien de mieux qu’un outil dédié tel que Figma.
Public concerné : Concepteurs, webdesigners, graphistes print, webmasters, développeurs, chefs de projet, responsables marketing.
Durée : 2 jour(s)
Prix : 990 €
Prochaines dates : 13-14 juin 2024
Qu’est-ce que le Design System ?
Les définitions du Design system englobent souvent les mots bibliothèque (library), lignes directrices (guidelines), styleguide et langage visuel (visual language). Il est souvent associé aux UI Kit. En fait, le Design system comprend tous ces aspects. Le Design system regroupe ce que nous appelions auparavant la charte ergonomique et la charte graphique. C’est une bibliothèque de référence et un guide pour designer et développer une application métier, un site e-commerce ou toute autre forme de produit ou service digital. Les équipes techniques et design peuvent ainsi piocher des composants prêts à être utilisés et écrits dans un langage commun. Le contenu du Design system dépend de l’identité de l’entreprise et de son écosystème digital. Toutefois, les éléments suivants y figurent généralement :
- Composants UI et patterns
- Principes visuels autour de la typographie
- Palettes des couleurs et règles associées
- Iconographie et imagerie
- Grilles pour structurer les éléments, espaces, etc. (Grid layout)
- Principes de communication de la marque (langage, ton…)
- Éléments réutilisables de l’interface utilisateur (UI)
Exemple de représentation de composants du Design System
(source)
Ces données et ressources sont en ligne ou sur le cloud. L’ensemble des parties prenantes d’un projet peut y accéder, durant les phases de design, de conception, de prototypage et de production. Qu’il s’agisse de créer un nouveau produit ou de faire évoluer un service existant, chaque département impliqué dispose ainsi d’une base de référence commune et mise à jour.
Cependant, le processus implique donc de répertorier tous les composants existants et de réfléchir à l’identité de l’entreprise, tant en termes de visuels que de communication. La création d’un Design System est donc souvent fastidieuse, d’où l’intérêt d’outils tels que Figma, Sketch et InVision.
Design System via Sketch
Sketch est un outil de conception graphique disponible sur Mac. Ce logiciel de design d’interface, web et mobile, a souvent été utilisé à la manière de Photoshop. Ces dernières années, avec la popularité croissante des Design system, Sketch est devenu un moyen de construire les bibliothèques de composants. Beaucoup de tâches peuvent ainsi être automatisées et exécutées plus rapidement. Les principaux avantages de Sketch dans ce contexte sont les suivants :
- Un outil de travail collaboratif pour l’UX designer et l’UI designer
- La production facile d’assets (ressources numériques) pour les développeurs
- Les symboles modulables et responsive pour toutes les collaboratrices et tous les collaborateurs
- Le partage des styles typographiques, palettes de couleurs, etc. avec Sketch template
- La création d’icônes réutilisables, de boutons interactifs et de formulaires
- Un processus « Design to code » plus simple à mettre en œuvre
Plusieurs tutoriels permettent d’apprendre à l’utiliser. Dans la vidéo ci-dessous, toutes les étapes du processus de création avec Sketch sont bien expliquées.
Par ailleurs, de nombreuses entreprises ont choisi d’associer le plugin Craft, l’application Invision et Sketch pour créer leur boîte à outils UI, designer, itérer ou prototyper. Craft offre la possibilité notamment de dupliquer facilement les éléments, d’associer des modèles et de synchroniser l’ensemble avec le logiciel InVision.
Design System via InVision
InVision est une application web conçue par et pour des designers. Ces derniers s’en servent notamment pour réaliser une maquette interactive d’interface. L’appli prend l’apparence d’une plateforme de travail collaborative, accessible avec un navigateur Internet. Les designers peuvent ainsi présenter leurs visuels à leurs clients ou aux membres de l’équipe (développeurs, équipe produit, service management, etc.). L’outil se décline en plusieurs solutions dont InVision Studio (l’équivalent de Sketch) et InVision Design System Manager. La version InVision DSM, récente, est conçue pour permettre de créer, maintenir et développer un Design System. Par ailleurs, la communauté InVision, très active, organise également des Design Talks, des webinaires liés aux enjeux du design aujourd’hui.
Étapes de mise en place d’un Design System
La construction d’un Design System est un processus itératif, non linéaire, impliquant de nombreuses personnes. S’il existe des méthodologies pour mettre en place un Design System dans une entreprise, les principes seront plus ou moins cohérents en fonction de la taille de l’entreprise et des objectifs. On peut toutefois repérer quelques étapes-clés, de la naissance du projet à son aboutissement :
- Repérer la problématique ou les besoins (pourquoi créer un Design System ?).
- Mener des UI audits (design audit, Front-end audit, audit grap ), parler aux utilisateurs concernés, identifier les objectifs business, etc., voire se faire l’avocat du Design System.
- Rechercher une ou plusieurs solutions à partir des possibilités technologiques, du budget, des délais et des priorités (élaboration d’une stratégie pour atteindre un objectif précis).
- Choisir une convention de nommage, un vocabulaire facile à comprendre pour toutes les personnes impliquées où qui le seront à l’avenir.
- Construire le design system, itérez et testez tout en étant attentif aux risques (techniques, financiers) et aux retours des utilisateurs et/ou clients.
- Faire vivre le Design System pour répondre aux nouveaux besoins et challenges, surtout lorsque l’entreprise évolue.
En somme, comme le soulignait Nathan Curtis, le fondateur d’Eightshapes : « Design system isn’t a project. It’s a product, serving product » (Le Design system n’est pas un projet. C’est un produit, au service des produits). Comme pour un produit, il faut analyser les besoins, vendre l’idée, construire le prototype, le produire et le faire évoluer quand c’est nécessaire.
Dans le webinar Invision ci-dessous, le designer Paul Farino revient sur son expérience à propos de la durée de vie d’un Design System. Il donne aussi des conseils pour vendre ce « produit » aux décisionnaires, au service marketing etc. En effet, pour une entreprise, c’est un investissement dont le ROI n’apparaît pas forcément.
L’ebook à télécharger Design Systems : a practical guide to creating design langage for digital products (extrait gratuit) fournit aussi les grands principes à connaître avant de se lancer dans cette aventure.
Design System et Atomic Design
L’Atomic Design, conçu par Brad Frost, est une méthode pour construire un Design System. L’Atomic Design naît d’un constat : tous les objets qui nous entourent vont potentiellement nous permettre d’accéder à une interface digitale. Les tailles des écrans sont multiples et le contenu doit s’adapter. Il ne s’agit donc plus de construire des « pages » comme les pages d’un livre, ou une interface à l’image d’un tableau figé dans le temps. L’objectif est désormais de concevoir des systèmes de composants pour être en mesure de s’adapter aux changements rapides.
La métaphore de la chimie fait ressortir l’imbrication des composants et l’aspect vivant, évolutif, de l’interface. Elle présente aussi l’avantage d’être facile à comprendre et à expliquer aux entreprises et aux clients en général.
Les animations, la palette de couleur, les boutons, etc., sont des atomes. Les molécules sont des regroupements d’éléments de l’UI, par exemple un texte placé sur un bouton. On gagne en complexité avec les organismes qui rassemblent des groupes et molécules d’atomes, voire d’autres organismes. À ce niveau, on revient à un vocabulaire plus classique avec les templates, permettant de structurer le contenu. Et enfin, on aboutit à la page, l’interface finale. Comme expliqué dans cette présentation, l’atomic design fait donc partie du kit du designer, par exemple au moment d’utiliser un outil tel que Sketch.
Quels sont les avantages du Design System ?
Les avantages du Design System sont nombreux avec des bénéfices multiples pour une entreprise, entre autres :
- Un Design consistant sur l’ensemble du site et toutes les plateformes
- D’où découle une meilleure expérience utilisateur (UX).
- Des composants réutilisables et une UI responsive facile à maintenir
- La communication facilitée entre équipe design et équipe technique
- Moins de silos entre les acteurs d’un projet donc un esprit d’équipe renforcé
- La production est plus rapide et les tests effectués plus tôt
- Le Design scalable apporte un gain de temps et d’argent
Ce dernier point, la scalabilité, est l’un des principaux arguments en faveur du Design System. D’une certaine manière, c’est également sa raison d’être.
Scalabilité du Design System
L’anglicisme « scalabilité » désigne les différents outils et techniques pour faire évoluer ou grandir, un produit ou un service, de la manière la plus rapide et la moins coûteuse, en conservant un niveau de qualité élevée. En l’absence de Design System, dès qu’il est nécessaire de travailler sur une nouvelle application ou de l’adapter à une version mobile, l’équipe ajoute du code, de nouveaux éléments, etc. pour adapter l’interface aux besoins des utilisateurs. Chaque équipe travaille potentiellement de son côté avec ses propres composants graphiques, d’où des incompréhensions entre équipes technique et équipe design. En bref, la construction vise un résultat à très court terme.
De là découle souvent une « dette design » (manque de cohérence graphique et coût excessif pour maintenir ou faire évoluer l’application ou le site). À laquelle peut s’ajouter une dette technique notamment en front-end (l’implémentation varie selon l’équipe, le code n’a pas été optimisé, etc.). Finalement, le contenu est anarchique et l’expérience utilisateur mauvaise (inconsistante voire frustrante). Au contraire, le Design System est scalable. Grâce à son installation, dès que le produit ou le service doit changer d’échelle :
- Avec les composants interdépendants, un changement impacte l’ensemble
- La mission des designers est facile et rapide tout en laissant une part de créativité
- Le travail des développeurs est également facilité, en particulier s’ils sont nombreux
- Le langage partagé aide l’équipe à mieux communiquer (moins de temps perdu)
- Ce gain de temps permet de se focaliser sur l’UX et l’expérience des utilisateurs en est optimisée.
Les bénéfices sont donc qualitatifs et quantitatifs, comme le souligne la présentation « Design Systems : accounting for-quality and scalability »
Les limites du Design System
L’entreprise doit d’abord se demander si un Design System est réellement utile. Ne pas oublier qu’il s’agit d’une solution intéressante à condition d’avoir un problème à résoudre. Par ailleurs, dans une petite équipe agile, cet outil n’est pas forcément indispensable. Pour autant, mieux vaut débuter un Design System avant d’avoir creusé la « dette technique » car plus l’entreprise attend, moins ce sera facile à mettre en place. Il s’agit donc d’un choix qu’il faut mûrir avec l’ensemble des parties prenantes.
Enfin, il faut être conscient qu’un bon Design System est évolutif et adaptatif. Personne ne peut parfaitement anticiper les prochains problèmes et attentes des utilisateurs de service ou de produit. Le Design System ne correspond donc pas à une standardisation figée des interfaces. Par ailleurs, les bénéfices de cette méthode sont souvent vus sous les angles professionnels Design et développement front, au risque d’en oublier l’importance de l’expérience utilisateur et de l’expérience client. L’impact du Design System doit être positif de part et d’autre de l’UI.
Biblio et ressources
Le livre Design Systems, de l’UX Designer Alla Kholmatova, expose les stratégies à appliquer pour les petites et moyennes entreprises ainsi que les écueils à éviter afin de réussir son design System.
L’ebook gratuit Sketch + InVision A guide to high-speed design aide à utiliser au mieux Sketch et InVision.
Très nombreuses références : https://medium.com/@nathanacurtis
Quelques exemples de Design Systems :
https://www.lightningdesignsystem.com/
Voir les slides de Maxime FRERE au Flupa 2018 :
https://speakerdeck.com/maximefrere/design-system
Conclusion
Un design system réunit des composants réutilisables et une documentation afin de concevoir et développer des produits ou services digitaux de manière cohérente et consistante. Cet outil impacte les notions-clés du design, à savoir le visuel, le langage et les usages. En théorie, cette référence commune aiderait à résoudre la problématique de la scalabilité en entreprise. En interne, c’est un vrai moyen de résoudre les incompréhensions entre designers et développeurs lors de la conception d’interface. Le Design System permet également de maintenir et de faire évoluer les applications aussi rapidement que l’exigent les nouveaux besoins. Malgré ces atouts, il reste difficile de « vendre » un tel produit et de faire accepter les changements aux équipes. Designers et développeurs doivent souvent jouer un rôle de coach au sein des départements de l’entreprise. De plus, la conception doit être mûrement réfléchie et soigneusement élaborée pour aboutir à un résultat satisfaisant en termes d’UI et d’UX. Le Design System n’est donc pas une mode à suivre à tout prix, mais reste un outil exceptionnel sous certaines conditions.
Lire aussi :
- Figma, un outil d’excellence pour vos Design Systems
- Annonce du rachat de Figma par Adobe – Une nouvelle explosive !
- Qu’est-ce que l’UI Design ?
- Conception d’interface : Créer une véritable expérience digitale (UX)
- Design graphique : Créer l’identité visuelle de votre interface
- Maquettage d’interface : La maquette interactive “wireframe” est l’outil le plus concret pour construire l’UX
- Refonte d’interface (UI), Rajeunir l’interface
- UI Designer : entre créativité et rigueur
- Panorama des métiers de l’UX/UI Design
- Qu’est-ce que l’Atomic Design ?
- Qu’est-ce que le Design Sprint ?
Voir aussi :
Pour avoir travaillé avec un design system en entreprise ou pour des clients, j’ai rencontré pas mal de réticences quant à sa mise en place. Et pourtant, on se demande avec le temps comment on faisait pour travailler sans. Même si cette solution n’est pas magique, ni indispensable, car toutes les entreprises n’en on pas forcément besoin.
Outil super puissant qui amène de la cohérence visuelle à tous les projets de l’entreprise, de la clarté, de la collaboration, du gain de temps… Pour peu qu’on ait la bonne démarche et qu’on ait envie de le faire vivre !