C'est quoi un design system ? Le référentiel pour vos produits digitaux

Véritable guide pour les designers et les developers, le design system regroupe tout un ensemble d’éléments permettant de faciliter le travail des équipes, mais également d’améliorer l’expérience utilisateur. Alors c’est quoi le design system ? Comment le construire ? Quels sont ses avantages et inconvénients ? Les réponses à vos questions sont dans cet article.

 

C’est quoi un design system ?

 

Définition 

 

Le design system reprend à la fois la charte ergonomique et la charte graphique. Plus précisément, il s’agit d’un guide au service des developers et des designers dans le but de créer un site web ou tout autre produit digital.

Ce guide (ou bibliothèque) est à disposition de toutes les personnes participant au projet, que ce soit lors du design, de la conception, du prototypage, ou encore de la production. Les éléments de la bibliothèque peuvent être accessibles en ligne ou sur le cloud. Tous les départements peuvent ainsi y avoir accès afin de créer un nouveau produit ou pour le faire évoluer.

En amont de la création du design system, il est primordial de réfléchir à l’image de marque de l’entreprise et de répertorier l’ensemble des éléments existants.

 

Les composants du design system

 

Le design system est souvent confondu avec les mots de bibliothèques, lignes directrices, styleguide ou encore langage visuel. En réalité, il reprend l’ensemble de ces éléments afin d’aider les developers et designers à créer un ensemble cohérent.

Chaque entreprise peut définir elle-même les composants de son design system. De manière générale, certains points communs réapparaissent :

• Composant UI (interface utilisateur)
• Patterns
• Typographie
• Couleur
• Icône et image
• Grid layout (principes déterminants la structure des éléments, les espaces, etc)
• Tonalité
• Éléments réutilisables de l’UI

 

 

Comment créer un design system ?

 

Les étapes 

Créer un design system nécessite l‘intervention d’une multitude de collaborateurs, et surtout un développement dans le temps. En effet, ce système a vocation à évoluer au même rythme que la marque. Ce n’est donc pas un outil linéaire. Néanmoins, quelques étapes doivent être intégrées dans la création du design system :

• Définir ses objectifs : quelles sont les problématiques de l’entreprise ? Pourquoi a-t-elle besoin d’un design system ? La création d’un design system peut intervenir dans le cadre d’une création ou d’une refonde de site. Dans ce cas, les problématiques seront différentes.
• Mener des audits UI : l’audit doit porter au niveau du design, du front end, etc. Il faut parler à la fois avec les utilisateurs du système, mais également les internautes qui représentent les utilisateurs finaux.
• Définir les solutions en fonction de son budget, de ses priorités, de ses délais, etc.
• Définir un langage compréhensible par tous les intervenants.
• Construire le design system.
• Faire évoluer le design system.

 

Design system et atomic system

 

Parmi les méthodes de construction du design system, il y a l’atomic design. Il s’agit d’une méthode conçue par Dan Frost qui implique d’appréhender les pages web comme un système de composants. Ainsi, les pages sont divisées en catégorie ; les atomes, les molécules, les organismes, les templates et les pages. Ces éléments s’imbriquent les uns dans les autres afin de concevoir un ensemble cohérent.

Par exemple, un logo constitue un atome. Un texte sur un bouton constitue la molécule. Ces deux éléments regroupés et accompagnés d’autres composants forment le header, autrement dit, l’organisme. Ensuite, c’est le template et la page web. Chaque niveau est plus complexe que le précédent afin d’aboutir à la version finale de la page.

Chacun de ces composants est réutilisable afin de faciliter la conception des pages et du site web dans son ensemble. Cela crée une certaine harmonie.

 

Les outils 

 

In Visio

 

C’est une application spécialement conçue pour les designers web. Cet outil est très utile pour créer des maquettes interactives. En effet, la plateforme collaborative permet aux designers de présenter leur travail à leurs clients ou à leurs collaborateurs.

Pour la création du design system, la version InVision DSM est la plus performante. Ainsi, vous pourrez créer votre bibliothèque d’outils, mais surtout faire évoluer le site web.

 

Sketch

 

Il s’agit d’un outil de confection pour les propriétaires de MAC. À l’origine, il était plutôt utilisé dans l’esprit de Photoshop. Mais avec le développement du design system, Sketch permet de créer des guidelines pour les designers et developers.

Il permet entre autres :

• une collaboration entre les équipes UX et UI ;
• les partages de styles avec plusieurs templates ;
• la création d’icônes réutilisables …

Vous pouvez y ajouter le plugin Craft pour dupliquer les éléments et synchroniser le tout avec InVisio.

 

 

Quels sont les avantages et inconvénients du design system ?

 

Avantages

 

Les avantages du design system sont multiples :

• Un design cohérent pour le site dans son intégralité, mais également pour tous les autres éléments web, comme une application mobile. Cela permet ainsi de diminuer la dette design (autrement dit, un manque de cohérence du site nécessitant un coût colossal pour rattraper ce retard).
• Une meilleure expérience utilisateur ; la cohérence permet d’éviter les frustrations des utilisateurs qui ne reconnaissent plus la marque. Et surtout, grâce au gain de temps gagné par le design system, les designers et developers ont plus de temps à consacrer à l’expérience utilisateur.
• La réutilisation des composants pour faire évoluer l’interface facilement.
• Une meilleure communication entre les différentes équipes grâce au langage partagé. Ainsi, la dette technique diminue davantage (cela correspond aux variations d’implémentation selon les équipes, des non-optimisations de codes, etc.).
• Une production plus efficace et des tests plus rapides.
• Une scalabilité : grâce à cette méthode, l’entreprise peut faire évoluer son site web, tout en économisant son temps et son argent.

En moyenne, les entreprises utilisant le design system constatent, en moyenne, des économies de l’ordre de 25 %. Et cette rentabilité est constatée dès le premier projet.

 

Inconvénients 

 

Le design system est surtout adapté aux grandes entreprises. En effet, si les équipes de designer et developers sont très restreintes, il ne sera pas nécessaire. Cependant, il ne faut pas attendre d’avoir une dette technique trop importante pour le mettre en place.

Il peut y avoir un risque d’appréhender ce système sous un angle trop professionnel. Or, dans la conception d’un site web, l’objectif final reste l’amélioration de l’expérience utilisateur.

 

Quelques exemples de design system

 

Exemples de design system 

 

Le Groupe BPCE a développé un design system pour l’ensemble de ses marques.

 

Pour que chaque intervenant travaille de manière efficace, le design system de BPCE, appelé NEO, divise les règles applicables selon le métier auquel elle s’applique. Ainsi, NEO reprend les guidelines pour les designers, pour les developers, les product owners ou les rédacteurs, webmasters. Pour accéder aux thématiques spécifiques du design sytem de BPCE, il est primordial d’avoir des identifiants et un mot de passe.

Néanmoins, il existe des principes communs à tous les métiers, comme la nomenclature des fichiers, la validation d’un design system ou encore l’accessibilité numérique.

 

 

Airbus fournit les ressources nécessaires pour un visuel uniforme. Ces dernières s’adaptent aussi bien sur mobile que sur ordinateur. Pour son design system, Airbus définit plusieurs catégorie.

Par exemple, la marque définit d’abord ses valeurs pour que les designers s’imprègnent pleinement de l’état d’esprit. Ensuite, le géant de l’aéronautique ajoute plusieurs éléments visuels, comme les couleurs, la typographie, le logo, les blocks de titres.

 

 

 

À cela s’ajoute des guides concernant la communication et la publication. Cela concerne notamment les règles relatives aux newsletters, brochures, banner d’email, etc.

 

 

Afin de faciliter le travail des designers developers, Airbus fournit plusieurs fichiers PPT reprenant l’ensemble des éléments de la marque.

 

Le design system d’Engie aide les designers et developers à travailler en toute harmonie.

Le fournisseur de gaz et d’électricité utilise un design system (nommé fluid) afin de renforcer son image de marque auprès de l’utilisateur final, gagner du temps et surtout fournir une référence aux équipes digitales. En ce sens, Fluid se veut flexible, facile à utiliser et efficace.

Engie met à disposition de ses équipes tous les outils nécessaires pour produire un design system cohérent et uniforme.

 

 

Exemples de design system dans le monde de l’assurance 

 

L’assurtech Luko a également développé son design system pour une meilleure cohérence entre son site web et son application.

 

 

La Maif a mis en place son design system autour d’une multitude d’éléments (logo, typographie, couleurs, etc). L’assureur invite sa cible à le découvrir pour mieux appréhender son image de marque.

 

 

La Maif propose également à ses équipes plusieurs règles à respecter pour la création d’un site web ou d’une application mobile.

 

 

Au-delà des éléments purement visuel, l’assureur présente aussi ses services. L’objectif est d’apporter une cohérence d’ensemble grâce au design system.

 

De son côté, le Crédit Agricole a crée son design system Muesli. Tous les composants visuels de la banque sont documentés pour une meilleure cohérence.

 

 

Outre, les éléments classiques relatifs à la typographie et au logo, vous retrouverez toutes les références pour insérer des icônes sur le site web ou application mobile.

 

 

Par ailleurs, le Crédit Agricole définit les différentes taille d’écran afin de faciliter l’utilisation des breakpoints pour un site responsive design.

 

 

De même, la banque détermine aussi les différents niveaux à insérer pour le fil d’ariane.