Design System : pourquoi cet outil est-il indispensable pour gagner en cohérence et en efficacité ?
Qu’est-ce qu’un Design System exactement ? Pourquoi les Design Systems sont-ils devenus essentiels pour les entreprises, grandes comme petites ? Quels sont les nombreux avantages de ces outils ainsi que les principes qui permettent de les structurer efficacement ? Cet article abordera toutes ces questions mais aussi les éléments essentiels que les design systems doivent contenir ainsi que leurs éventuelles limites. En résumé, un tour d’horizon pour comprendre pourquoi et comment adopter cette approche structurée et collaborative au service du design et du code.
Les expériences numériques sont au cœur des interactions entre les utilisateurs et les marques, rendant essentiel la conception d’un design homogène et efficace. Pourtant, garantir cette cohérence tout en répondant aux exigences de rapidité, d’évolutivité et de collaboration s’avère être un défi de taille pour les équipes de design et de développement. C’est dans ce contexte que les Design Systems se sont développés, devenant des outils incontournables qui offrent une réponse structurée à ces problématiques complexes.
Qu’est-ce qu’un Design system ?
Il existe de nombreuses définitions de ce que peut être, ou doit être, un Design System.
Pour le blogeur Brad Frost (Développeur) dans son article Design Systems are for user interfaces, il s’agit de « L’histoire officielle de la façon dont votre organisation conçoit et construit des interfaces numériques. »
Dans son ouvrage Laying the Foundations, Andrew Couldwell (Designer) nous propose quant à lui la définition suivante : « Les design systems apportent de l’ordre et de la cohérence aux produits numériques. Ils aident à protéger la marque, à améliorer l’expérience utilisateur et à augmenter la rapidité et l’efficacité avec lesquelles nous concevons et construisons des produits. »
Pour d’autres professionnels, réutiliser quelques styles et quelques boutons constitue déjà en soi un design system (1).
De manière globale, un design system est une bibliothèque organisée de composants et patterns réutilisables (2) ainsi que de pratiques partagées, conçue pour offrir aux designers et aux développeurs une « source unique de vérité » (3). Véritable guide établissant des normes claires, il permet de créer des produits numériques cohérents. Un design system crée également un vocabulaire partagé (4) pour les différentes équipes intervenant sur le projet (designers, développeurs, chefs de projet, client, …), et aide ainsi à fluidifier les échanges.
Une courte histoire des Design Systems
Les design systemes ne sont pas nouveaux, dès les années 1920 – avec l’émergence du Bauhaus et son approche priorisant la fonctionnalité du design – des systèmes de mise en page, basés sur des grilles et des ratios, apparaissent et se développent (5).
En 1940, Jan Tschichold établit un premier système de design pour la conception graphique des couvertures de livre Penguin (5). Ce système de design se base sur des codes graphiques forts et reconnaissables immédiatement.
Le terme “Design system” serait apparu pour la première fois à la fin des années 1960 sous la plume de Christopher Alexander dans son ouvrage “A Pattern Language” (5). Dans ce livre, les patterns architecturaux étudiés identifient un problème puis proposent une solution pour le résoudre.
À partir de la fin des années 1980, Apple, IBM et Microsoft commencent à élaborer des langages de design complets pour définir l’apparence graphique de leurs interfaces utilisateur (6). Ces systèmes visuels répondaient à des problématiques esthétiques mais ont avant tout une utilité pratique en offrant une documentation détaillée et des modèles réutilisables.
En 2006, Yahoo! lance la Yahoo! User Interface Library (YUI) qui a suscité l’intérêt du public pour les languages de design à l’ère du numérique. Néanmoins, c’est Google avec sa librairie Material Design qui a été le premier à se définir comme “langage de design” dès 2014 (6).
Des guides de styles papier jusqu’à l’apparition de langages de design numériques, les design system ont évolué en suivant les avancements technologiques. Depuis le milieu du XXe siècle les system de design ont pris de l’ampleur (6) grâce au besoin accru de cohérence visuelle dans l’image de nombreuses marques. Avec la révolution numérique, ces principes se sont adaptés aux interfaces numériques, en devenant plus complexes afin de répondre aux besoins croissants de produits et services numériques.
Les Six avantages de l’utilisation d’un Design System
De plus en plus d’entreprises adoptent des design systems internes (12), les raisons sont nombreuses : ils sont une promesse de cohérence, d’efficacité (6), d’évolutivité (9) et d’accessibilité (12) et pour 84% des professionnels du numérique, une exigence (14).
“Les entreprises qui utilisent des design system ont constaté une transformation du cycle de développement de leurs produits, avec des délais de mise sur le marché plus courts et une expérience utilisateur homogène”. (6)
Chad Bergman Designer Advocate, Figma
Les avantages de l’utilisation d’un design system sont transverses. Pour les designers, il garantit une cohérence de marque, coté développeurs il contribue à une standardisation du code et à la fluidification du workflow entre le design et le code (9). Enfin, d’un point de vue commercial, un design system présente un fort ROI en accélérant la commercialisation tout en réduisant la dette technique (9).
# 1 : Gain de temps et amélioration de la productivité
Le design system permet de se concentrer sur l’essentiel, en libérant les designers des tâches répétitives et des ajustements visuels afin qu’ils puissent se consacrer à des problématiques nouvelles telles que l’amélioration de l’expérience utilisateur, la base étant déjà prise en charge par le design system (3)(2)(11).
Certes, la mise en place d’un design system nécessite un premier effort de réflexion et de structuration, néanmoins, il devient par la suite une base solide pour créer de nouvelles pages aisément. Grâce à la normalisation des composants, les tâches redondantes sont réduites, ce qui optimise le processus de conception (7)(6).
Chez Razorpay (entreprise de commerce en ligne), 80% des développeurs et designers affirment “se sentir plus productifs en utilisant notre design system Blade que sans lui.” (10)
#2 : Facilite l’arrivée dans un projet
Le design system facilite l’intégration des nouveaux membres dans une équipe ou un projet en leur offrant une compréhension rapide des principes du produit (6) ainsi que des directives claires (2) pour contribuer au projet.
#3 : Scalabilité
Un design system est synonyme d’une adaptabilité continue (3) en alignant les équipes autour de normes applicables à grande échelle. Il s’améliore continuellement (11) : chaque utilisation enrichit la base de composants, afin de répondre à de nouveaux cas d’usage et de proposer des solutions inédites. De plus, il aide les équipes produit à faire des choix éclairés en cas d’options multiples (8), devenant ainsi un véritable outil de prise de décision.
#4 : Fluidifie durablement la communication
Les design systems établissent un langage commun qui améliore la communication et facilite la collaboration (2), tout particulièrement avec des équipes transversales ou géographiquement dispersées. Grâce à une documentation claire, ils assurent une compréhension partagée des éléments, comme l’apparence ou la fonctionnalité d’un composant. En unifiant les visions créatives, il réduit les malentendus et renforce l’autonomie, favorisant ainsi une coopération harmonieuse et durable (7)(3). De plus, l’utilisation d’un design system réduit les dépendances entre les membres de l’équipe (3) et limite ainsi le risque de perte d’informations.
#5 : Améliore l’expérience utilisateur
Les design systems ont l’avantage de réduire les incohérences (6) et d’améliorer la cohérence visuelle, afin d’offrir une expérience utilisateur homogène. Cela est particulièrement vrai dans le cas d’équipes organisées en silos et travaillant sur divers produits ou interfaces liées entre elles. La maintenance continue, assurée par toute l’équipe, garantit que le design system reste aligné sur les dernières évolutions visuelles et fonctionnelles (9).
#6 : Garantir l’accessibilité
D’après une étude menée par Material Design en 2020, 47% des interrogés déclarent que leur design system comporte des fonctions d’accessibilité (12). Les meilleurs produits sont conçus pour être accessibles (13). En intégrant l’accessibilité dès le début avec un design system accessible par défaut, les entreprises s’assurent que chaque composant et chaque élément de code respecte les standards, évitant ainsi les problèmes d’accessibilité futurs.
Comme nous l’avons vu, les avantages de l’adoption d’un design system sont multiples, de l’amélioration de la productivité à la fluidification des échanges tout en passant par l’expérience utilisateur et l’accessibilité, les design systems sont essentiels à la conception de produits et services numériques.
L’Atomic Design, une méthode clé pour structurer un Design System
Rentrons dans la méthodologie pure et dure avec l’Atomic Design, une approche solide pour structurer un design system de manière logique et efficace, en décomposant les interfaces en éléments fondamentaux pour créer des systèmes modulaires et cohérents.
Qu’est-ce que l’Atomic Design ?
L’Atomic Design est une approche créée par Brad Frost en 2013 (15) qui a redéfini la structure des design systems numériques en proposant une hiérarchisation claire de leurs éléments. Cette méthode repose sur la compréhension de comment les plus petites unités de l’interface utilisateur peuvent contribuer à construire le produit final.
L’Atomic Design est organisé en 5 étapes : les atomes, les molécules, les organismes, les templates et les pages. Toutes ces étapes se construisent et existent de manière simultanée dans les interfaces et dans le design system.
Atomes : Les atomes, en tant qu’éléments fondamentaux de la matière, correspondent aux éléments de base de nos interfaces, servant de blocs de construction essentiels pour l’ensemble de nos interfaces utilisateur.
Molécules : Dans le contexte des interfaces, les molécules représentent des combinaisons simples d’éléments d’interface utilisateur (atomes) qui fonctionnent ensemble comme une seule entité.
Organismes : Les organismes se définissent comme des composants d’interface plus complexes, constitués de groupes de molécules, d’atomes et/ou d’autres organismes. Ils constituent des sections distinctes au sein d’une interface.
Templates : Les templates sont des structures de mise en page au niveau de la page, qui organisent des composants et décrivent la structure sous-jacente du contenu dans le design.
Pages : Les pages représentent des exemples concrets de templates, illustrant à quoi ressemble une interface utilisateur avec un contenu réel. C’est à cette étape que nous testons la résilience des composants.
Pourquoi adopter l’Atomic Design ?
“ L’un des plus grands avantages que l’Atomic Design offre est la capacité de passer rapidement de l’abstrait au concret. Nous pouvons simultanément voir nos interfaces décomposées en leurs éléments atomiques et voir comment ces éléments se combinent pour former nos expériences finales” (15).
Brad Frost, design system consultant, web designer, conférencier, écrivain
L’Atomic Design, en tant que méthodologie de construction de systèmes de design, permet aux équipes de créer des composants de manière réfléchie et adaptée à leurs besoins (16). En développant les composants atomiques et les interfaces réelles simultanément, les équipes sont encouragées à privilégier la réutilisation des composants existants plutôt que de créer de nouvelles versions.
Un bon design system doit prendre en compte le contenu qu’il présente, et un contenu bien conçu doit être conscient de son affichage dans l’interface utilisateur (UI), l’approche Atomic Design reconnaît que ces deux éléments s’influencent mutuellement.
L’Atomic Design fournit également un vocabulaire commun pour discuter des éléments qui composent les interfaces.
L’Atomic Design est avant-tout un modèle mental utile pour la conception et le développement d’interfaces utilisateur (15).
Que doit contenir un Design System ?
Comme nous l’avons rappelé au début de cet article, il existe de nombreuses définitions de ce qu’est un Design System. Chaque entreprise ayant des besoins spécifiques, il n’est pas possible de concevoir un modèle unique de Design System qui convienne à tous.
Dans le cas d’un langage visuel comme design system, il s’agira de construire une bibliothèque de composants visuels (4). Cette approche est très largement utilisée pour les produits numériques.
Pour les grandes organisations, le design system peut prendre la forme d’un outil numérique connecté et versionné. Dans ce cas, il comportera un ensemble de composants de base ainsi que des directives pour donner la possibilité aux équipes projet de créer des produits numériques de manière cohérente, efficace et agréable (4). Ce type de design system est plébiscité par les entreprises qui possèdent plusieurs produits numériques.
Un Design System peut également s’abstraire d’éléments visuels et être conçu comme un processus. Dans cette configuration, le Design System est une méthodologie exposant les étapes et principes de gouvernance nécessaires à la conception des interfaces (4).
Parfois, le Design System est conçu comme un service à part entière géré par une équipe dédiée (interne ou externe à l’organisation). Dans ce cas, les équipes projet “passent commande” aux équipes en charge du design system qui leur retournent des composants (4).
Enfin, il est possible d’adopter un design system en tant que pratique (4). Dans cette optique, le design system est constitué d’une bibliothèque de composants visuels versionnés, de processus et est souvent maintenu par une équipe dédiée. Il s’agit du stade de maturité le plus élevé pour un design system.
Les limites des Design System
Bien que les design systems offrent de nombreux avantages en termes de cohérence et d’efficacité, ils présentent également certaines limites qui peuvent freiner leur adoption et leur flexibilité.
Les mythes autour des Design System
Les mythes liés aux design systems sont nombreux et il est essentiel de démystifier ces idées reçues pour mieux comprendre les véritables avantages qu’ils offrent dans la création d’interfaces cohérentes et fonctionnelles.
Les design system seraient réservés aux très grandes entreprises.
Quelque soit la taille de votre entreprise, les objectifs d’un design system restent les mêmes : augmenter l’efficacité, aider à maintenir une homogénéité et encourager la collaboration des équipes (17).
Il serait nécessaire d’utiliser les dernières tendances du secteur.
Les techniques de design évoluent constamment et il n’y a pas d’approche universelle. Si s’inspirer des autres peut être bénéfique, l’essentiel est de trouver un système qui correspond à vos objectifs (2). Un design system doit être fonctionnel et répondre à vos besoins, plutôt que de suivre uniquement les tendances du secteur.
Ce qui fonctionne pour Material Design fonctionnera pour nous.
Material Design de Google est souvent vu comme une référence en matière de design systems, mais il n’est pas adapté à toutes les situations (17). Un design system doit avant tout refléter l’identité spécifique de votre marque et être ajusté à vos besoins et objectifs.
Un Design System se construirait de zéro.
De nombreuses ressources Open Source de grande qualité sont disponibles, offrant de véritables trésors. Il n’y a aucune honte à s’appuyer sur le travail des autres ; au contraire, c’est souvent une approche pratique et efficace (17).
L’approche en Design System étoufferait la créativité.
Les design systems favorisent la créativité en offrant des bases solides sur lesquelles les designers peuvent se reposer pour se concentrer sur l’innovation et la résolution de problèmes (17).
Les écueils à éviter dans l’adoption d’un Design System
Tout d’abord un design system nécessite une maintenance continue, il n’est jamais véritablement terminé ou figé car il suit les évolutions du produit qu’il documente (6). Pour maintenir un design system, en particulier si celui-ci est complexe et/ou s’applique à plusieurs produits, des ressources dédiées sont nécessaires. Lors de la mise en place d’un design system il est donc essentiel d’anticiper les ressources et le temps disponible (2).
Mal maintenus, le design system risque de devenir une collection encombrante de composants, à l’inverse de sa vocation initiale de simplification du travail des équipes de conception visuelle (2).
Les avantages de la mise en place d’un design system sont principalement perceptibles à long terme. L’adoption du design system doit donc s’accompagner d’une évolution de la culture d’entreprise pour que tous les collaborateurs concernés comprennent son intérêt et partagent cette nouvelle manière de travailler. (6)
Conclusion
En conclusion, les Design Systems ne sont pas une simple tendance : ils représentent une réponse structurée aux défis croissants de la conception d’interfaces. En fournissant une base solide, cohérente et évolutive, ils permettent aux équipes de gagner en efficacité, tout en offrant aux utilisateurs des expériences harmonieuses. Leur ancrage dans des méthodologies comme l’Atomic Design et leur structure adaptable en font des outils stratégiques majeurs.
Néanmoins, leur mise en place nécessite des ressources, du temps et un engagement collectif pour garantir leur succès à long terme. Un Design System ne se résume pas à une collection de composants : c’est un investissement stratégique, capable de transformer la manière dont une entreprise conçoit, développe et évolue.
Adopter un Design System c’est se doter d’un langage commun et d’une vision partagée, deux atouts précieux dans un écosystème numérique en constante évolution.
Pour aller plus loin
Quelques exemples de design system en libre accès
Uber Base : https://www.figma.com/community/file/805195278314519508
Google Material 3 : https://www.figma.com/community/file/1035203688168086460
Spotify Backstage : https://www.figma.com/community/file/850673348101741100
Pipedrive : https://www.figma.com/community/file/1110537691858131226/web-app-components
Microsoft Teams : https://www.figma.com/community/file/916836509871353159
Sales Force : https://www.figma.com/community/file/854593583696357016
Carbon (IBM) Design system : https://carbondesignsystem.com/
Open Design System Repo Figma : https://www.designsystems.com/open-design-systems/?utm_source=Shortcut&utm_medium=Blog&utm_campaign=ds_101&utm_content=ds_101
Sources :
(1) “Do we need a design system ?” Jesse Showalter with Dan Mall https://www.youtube.com/watch?v=DAtu69jULgw&t=2s
(2) “Design Systems 101”, Therese Fessenden, April 11, 2021
https://www.nngroup.com/articles/design-systems-101
(3) “Benefits of a Design System – Why It Matters and What Sets It Apart”, Michael Wong, 13 Octobre 2013
https://www.thedesignership.com/blog/benefits-of-good-design-system
(4) “What is a design system ? 6 types of Design Systems”
(5) “A history of design systems”, Rune Madsen https://assets.runemadsen.com/classes/programming-design-systems/a-history-of-design-systems/index.html
(6) “Tout savoir sur les design systems : Qu’est-ce qu’un design system ?” Chad Bergman, Designer Advocate, Figma, 24 Février 2024
https://www.figma.com/fr-fr/blog/design-systems-101-what-is-a-design-system
(7) “Design system and their benefits”, Kara Pernice, NN Group
(8) “Design systems at scale, Episode 6 : Maintaining and evolving your design system”, Dan Mall
(9) “L’avenir des design systems est dans le marketing”, Ana BoyerDesigner Advocate, Figma, 10 avril 2024
https://www.figma.com/fr-fr/blog/the-future-of-design-systems-is-marketing
(10) “Comment Razorpay a rationalisé la charge de travail des développeurs”, Annie Berrones, Customer Marketer, Figma, 9 janvier 2024
https://www.figma.com/fr-fr/blog/how-razorpay-sharpened-developer-workflows
(11) “Design at scale, Episode 4 : New Rôles & Processes for Design Systems”, Dan Mall
(12) “The State of Design Systems: 2020”, Material io, Dec 16, 2020
https://m3.material.io/blog/research-state-of-design-systems-2020
(13) “L’avenir des design system est dans l’accessibilité”, par Figma, 9 mai 2023 https://www.figma.com/fr-fr/blog/the-future-of-design-systems-is-accessible/
(14) Design system Survey, Fith Edition, by Sparkbox, 2022
https://designsystemsurvey.sparkbox.com/2022/#section-1
(15) Atomic Design, Brad Frost
https://atomicdesign.bradfrost.com/table-of-contents
(16) “Design System at scale, Episode 3 : applying atomic design and choosing pilot”, Dan Mall
(17) “Six Mythes qui se dressent entre vous et les design systems”, Ana BoyerDesigner Advocate Figma, 26 janvier 2024
https://www.figma.com/fr-fr/blog/six-myths-holding-you-back-from-embracing-design-systems