Dans les années 70, des graphistes commencent à documenter les codes qu’ils utilisent dans leur création et à mettre en place des systèmes de règles pour créer des livrables communs cohérents visuellement, notamment au sein de grandes organisations comme la NASA (Graphic Standards Manual de 1975). C’est le début des chartes graphiques, toujours populaires aujourd’hui, qui rassemblent les éléments et codes de l’identité visuelle d’une organisation.

Les designs systems sont l’aboutissement de cette volonté d’harmonisation entre les pratiques et les livrables. C’est un exercice extrêmement long et complexe. Un design system renforce la cohérence en interne et le caractère différenciant de l’organisation concerné·e (marque, entreprise, institution), sa singularité, et c’est pourquoi on les limite parfois à tort à des chartes graphiques (identité visuelle), des banques de données (stock de composants) ou encore des brand books  (identité visuelle et identité de marque). Or, si un design system peut contenir tous ces éléments, ils ne suffisent pas à eux seuls à former un design system, qui compte nécessairement les quatre catégories d’éléments suivantes :

• • un stock de composants (couleurs, composants UI, sons, templates, layouts)
  • leur mode d’emploi (mesures, espacements, interactions inter-éléments, exemples)
  • des principes (fondements de ces choix, manifeste des valeurs de l’organisation, vision de la marque)
  • les conditions d’auto-évolution (processus d’ajout de composants et de règles au design system existant).

Les 4 essentiels d’un design system

Un design system contient un stock de composants

Un stock de composants (ou bibliothèque d’éléments) est indispensable à un design system. Toute ressource de conception duplicable est un composant : logo, palette de couleurs, bibliothèque de sons, typographie, pattern, pictogramme, sélection iconographique, mise en page, template, layout, bouton, composant UI, interface de programmation, élément de langage.

Un design system est un référentiel

Un design system ne se limite pas à un ensemble de ressources. C’est le mode d’emploi associé aux composants et à leur articulation entre eux qui distingue le design system d’une simple banque de ressources classée, et qui forme un référentiel : espacements, dimensions, contextes d’utilisation, conventions et codes d’utilisation, exemples de bonnes et mauvaises pratiques, ton, interactions inter-éléments.

Un design system est justifié par des principes

Le design system comporte l’ensemble des principes qui justifient ces règles : manifeste de l’organisation, vision, plateforme de marque, brand book. La compréhension du design system est essentielle à son appropriation par les utilisateur·rice·s concerné·e·s.

Un design system a vocation à évoluer

Un design system est une ressource opérationnelle pour la conception de nouveaux produits et services numériques : loin d’un code statique, il est intrinsèquement lié à des créations futures qui engendreront de nouveaux cas de figure, composants, usages et adaptations. Il doit donc nécessairement contenir des indications qui ont vocation à le faire évoluer : procédés de révisions, démarches de conception et de contribution.

Pourquoi un design system ?

Des bénéfices des deux côtés de l’UI

Le design system fait le lien entre designers et développeur·euse·s, il améliore le travail des concepteur·rice·s et permet d’améliorer trois aspects de la production : l’harmonisation des pratiques, l’augmentation de la scalabilité et l’optimisation du workflow.

• • Harmonisation des pratiques : un design system est une ressource commune aux designers  et développeur·euse·s qui prend en compte les usages, supports et formats spécifiques de ces deux catégories de métiers, et facilite les passages d’un·e intervenant·e à l’autre (du·de la webdesigner au·à la développeur·se par exemple).

• • Augmentation de la scalabilité : le design system permet de simultanément créer de nouveaux produits, accroître une équipe et modifier des produits existants sans coûts supplémentaires excessifs, même à distance. L’anglicisme “scalabilité” désigne le changement d’échelle : un design system préserve le niveau de qualité des productions lorsqu’on passe à une échelle plus grande.

• • Optimisation du processus de travail : un design system est un dispositif clé en main d’intervention sur la conception d’un service ou produit numérique, donc d’organisation du travail. Il affecte le processus par lequel on réalise un projet, du début à la fin, étape par étape et améliore le déroulement des opérations, les flux.

Au-delà de l’utilisation professionnelle des design systems, ces améliorations de fonctionnement permettent de gagner du temps et de se consacrer entièrement à l’optimisation de l’expérience conçue et à sa qualité : les bénéfices des design systems se font des deux côtés de l’UI, pour les concepteurs comme pour les utilisateurs.

10 exemples de design systems

Différents design systems et leurs spécificités

1. Le Design Language System d’Airbnb est composé d’unités très indépendantes les unes des autres et capables d’exister en dehors du design system. C’est aussi une ressource éditoriale riche d’articles, d’étude de cas et de projets et sur le design et l’expérience utilisateur

2. Apple Developer met en avant sa section “actualités,” pour informer ses utilisateur·rice·s des nouveautés créatives d’Apple et des récents ajouts à Apple Developer (comme le lancement de la bibliothèque d’éléments SF Symbols 2 ou la sortie du Guide Human Interface). Les valeurs de marque sont davantage exprimées dans les choix de structure que formulées (grande visibilité de la section « accessibilité des applications”). Fréquemment cité comme exemple, c’est une référence majeure dans le design d’interface.

3. Atlassian Design est structuré autour d’un principe atomique avec un double niveau de ressources : Components (les plus petites unités de composants comme des boutons) et Patterns (des combinaisons prêtes à l’emploi de ces composants pour résoudre des problèmes récurrents identifiés). Sa section dédiée aux contenus éditoriaux est très détaillée : langage inclusif, vocabulaire, style, ton.

4. Design System MAIF a choisi un parti-pris très pédagogique avec des kits “ressources et mode d’emploi” : kit de démarrage, d’UI designers, d’UX designers. La plateforme est simplifiée avec seulement trois parties : Identité de marque, Interfaces publiques, Interfaces collaborateurs.

5. Oxygen de Doctolib montre son caractère participatif avec des release notes, messages d’informations réguliers sur les changements du design system ainsi que des sections visibles appelées next improvements sur les points d’amélioration identifiés (comme une accessibilité accrue de la palette) et les recherches correspondantes en cours.

6. Barnardo’s Design System guide l’utilisation en agrémentant ses six sections d’une micro-définition qui va droit au but et en donnant une visibilité immédiate aux processus de contribution au design system.

7. Lightning de Salesforce est un plug-in direct sur Sketch.

8. Material Design de Google est à la fois un design system et une vitrine pour la marque et la marque employeur notamment avec des engagements éthiques. Intensivement utilisé, c’est une ressource et une référence qui fait autorité dans le design d’interface.

9. Polaris de Shopify s’adresse à des problématiques qui vont au-delà du numérique, comme la vente en personne.

10. GOV.UK, le design system du gouvernement du Royaume-Uni est une référence incontournable du design system de la démarche de design centrée usager appliquée en politique publique. Cette initiative est un exemple pour d’autres états, dont la France (avec le programme Designers d’intérêt général) qui ont également commencé à concevoir des designs systems : l’Argentine, l’Australie, le Canada, l’Estonie, l’Italie, les Etat-Unis, la Nouvelle-Zélande, Singapour ou encore la Suisse.

Limites et critiques du design system

5 remises en question du design system

1. Un design system n’est pas indispensable, surtout au sein d’une petite organisation où la scalabilité n’est pas un enjeu prioritaire. Au-delà de s’avérer inutile, un projet aussi chronophage et énergivore peut dangereusement empiéter sur le temps passé à développer les produits et services du portfolio, nécessaires à la survie de la structure.

2. L’expertise UX n’est pas automatisable. Le design system peut fournir des solutions pratiques à des problèmes récurrents, identifiés comme tels par une recherche approfondie, mais son application ne peut être assimilée à un remplissage cartographié de templates, au risque de commencer à résoudre des problèmes d’UX avec de l’UI.

3. La qualité d’un design ne se mesure pas à sa vitesse de conception. Déprécier l’importance des tâches systématisées par le design system et identifier le temps gagné comme un signe indubitable de performance entraîne une pression susceptible de limiter les phases d’expérimentation et la sérendipité des recherches des designers, donc de nuire à la qualité des produits développés.

4. Un design system est réellement différent d’une charte graphique, d’une bibliothèque d’éléments ou d’un brand book, car la justification des directives ainsi que le caractère interne, global et évolutif d’un design system sont conditionnels à sa réussite, ainsi que l’implémentation d’un dispositif performant et continuel d’adoption, de consultation et de feedbacks des utilisateur·rice·s.

5. L’aboutissement d’un design system n’est pas forcément synonyme de succès. Le paradoxe du design system est que son itération doit être constante, sous peine de devenir uniquement un cadre de contraintes limitantes et statiques, mais que son implémentation est suffisamment difficile pour dissuader les changements, conditionnés à une chaîne de révision longue et un processus laborieux.

6 ressources alternatives aux design systems

Chartes graphiques, brand books, mais aussi libraries, style guides et design languages

1. Buffer Style Guide de GitHub est une bibliothèque qui entre directement dans le vif du sujet via les composants de construction, en commençant par une unité de base : les boutons.

2. Solid de BuzzFeed a fait le choix de l’open source sur GitHub et montre son processus de conception par un historique chronologique visible des changements accomplis.

3. Pattern Library de Mailchimp détaille des guidelines graphiques (comme des couleurs) et d’UI (boutons, messages d’alerte) ainsi que des recommandations marketing avec exemples et explications.

4. IBM Design Language est une charte essentiellement visuelle agrémentée d’éléments d’identité de marque (philosophie).

5. Uber a conçu un brand book en ligne.

6. Fluent de Microsoft est un mode d’emploi pour la conception de produits rattachés à la marque.

La mission d’un produit ou service numérique est de fournir des solutions répondant aux besoins de ses utilisateurs. Celui d’un design system est d’être le début d’une conversation sur les problèmes récurrents rencontrés par les concepteurs d’une équipe. Concevoir un design system est un exercice complexe : une misapplication comme la systématisation du design va à l’encontre d’une démarche de recherche centrée sur l’utilisateur. C’est aussi ignorer la dimension anticonformiste nécessaire à la naissance de nouveaux mouvements et pratiques créatives.

Un design system est l’aboutissement d’un processus nécessairement interne et participatif, qui ne s’arrête pas à la conception du design system mais à son adoption et son inscription pérenne dans les processus de travail. C’est un équilibre difficile à trouver et à maintenir, et le succès d’un design system se mesure d’abord aux opportunités qu’il offre aux concepteurs de développer leurs savoir-faire, visibles à travers la qualité des produits, et au degré de remise en question qu’il intègre dans son fonctionnement, autant d’éléments qui influencent ensuite les performances d’une organisation.