Ces dernières années nous avons eu l’occasion de travailler sur de nombreux projets d’applications ou de plateformes digitales pour des start-ups, des PME et des grands comptes et nous avons été témoins d’une accélération majeure dans les méthodes de conception, d’organisation des équipes et des cadences de production. 

En effet l’hyper concurrence et la course aux levées de fonds entraîne les entreprises et les éditeurs d’applications à produire toujours plus vite, pour tester rapidement de nouveaux concepts “time to market” pour les mettre ensuite à disposition de leurs utilisateurs.

Dans ce contexte ultra agile, il a fallu trouver des moyens de gagner du temps, de mettre en place des ressources partagées disponibles immédiatement et de rationaliser les étapes de conception pour faire travailler plus efficacement des équipes toujours plus grandes et aux profils variés. 

C’est de ce besoin qu’est né le design system, une démarche d’industrialisation du design digital.

Cette nouvelle méthode de conception est aujourd’hui largement répandue chez la plupart des grands acteurs du numérique, mais à quoi sert-elle au juste, quels en sont les bénéfices et comment rentre t-on efficacement dans une démarche de Design System ?

Qu’est-ce qu’un design system ?

Design Harder better faster stronger

Véritable révolution dans les mécanismes de conception de produits digitaux, le Design System s’apparente à une bibliothèque de ressources réutilisables : éléments graphiques, principes UX, et composants développés, afin que les designers et développeurs puissent concevoir ensemble des produits cohérents, rapidement. 

Il obéit notamment à 3 grands principes :

  • Vivant car il évolue constamment
  • Universel car il s’appuie sur des standards de conception
  • Agnostique car il doit s’adapter aux technologies

Ce qu’il faut bien comprendre c’est qu’un Design System peut servir de base à la création de sites internet, d’applications, de montres connectées, d’ipads, de TV connectées, de bornes tactiles… bref tous types de produits digitaux.

Quel bilan sur les projets développés par Limpide ?

C’est un outil formidable, car il permet de capitaliser sur ce qui est réalisé, afin de gagner en rapidité, performance et cohérence dans la réalisation de nouvelles fonctionnalités d’un produit digital. Il concentre également toute la documentation liée à sa prise en main pour faire en sorte d’être autoporteur

Aujourd’hui cette démarche de conception tombe presque sous le sens, mais il faut bien comprendre qu’il y a une dizaine d’années, on était souvent loin de cette façon de concevoir un produit digital.  L’UX n’était encore qu’un concept élitiste, le design se faisait sur Photoshop “au pixel”, on sortait tout juste de Flash et les possibilités techniques étaient bien plus contraignantes.

L’émergence des Design Systems a donc permis de mettre l’expérience utilisateur et le design au centre de la conception, de faire travailler plus facilement des profils différents dans une même direction.

C’est un outil formidable, oui, mais Il faut bien garder à l’esprit que c’est un projet ambitieux, qui nécessite rigueur et méthodologie.

L’origine du Design System

Cette démarche de création a été théorisée par Brad Frost avec l’Atomic Design, une métaphore des atomes transposée au design digital.
Son objectif était simple et ambitieux : concevoir des systèmes de composants pour être en mesure de s’adapter aux itérations rapides. Pour ce faire, il a défini une méthode de rangement issue de la physique des atomes :

  • Atomes : les éléments de base
    Exemple : couleurs typographie..
  • Molécules : groupes d’atomes formant une unité
    Exemple : label, champ texte, bouton…
  • Organismes : les éléments d’interface complexe résultant du groupe de molécules
    Exemple : une liste de produits, un header 
  • Templates :  constitue la structure générale du contenu sans les images et textes
    Exemple : le template de page de liste
  • Pages : contient le contenu réel et abouti
    Exemple : la page finale
design system atomic design
source : medium.com

Le travail de Frost a eu l’effet d’une bombe.

Uber, Google, IBM, Audi, Axa, Atlassian, Lonely Planet… toutes ces grandes marques ont saisi l’intérêt de cette avancée et ont placé le Design System au coeur de leur démarche de conception.

Mais comment sont-elles parvenues à ce résultat ?

Aborder la création d’un Design System

Ne vous y trompez pas, un design system est un projet ambitieux et sa mise en place demande un travail conséquent et continu, parce qu’il est vivant et évolue en permanence. 

Il prend le plus souvent la forme d’un site internet, avec différentes sections. Pour constituer le vôtre, vous devez vous armer d’une bonne stratégie et respecter quelques étapes pour y arriver.

1 : Définir les objectifs du Design System

Avant de se lancer il faut commencer par se poser les bonnes questions. Voici, selon nous, les plus importantes : 

  • Quel est l’objectif du Design System ? 
  • À quoi cela va-t’il vous servir ? 
  • Qui va s’en servir ? 
  • Sa dimension est-elle nationale ou internationale ?
  • Sera-t-il utilisé avec des technologies et appareils différents ?
  • Doit-on opter pour un système libre ou très contraignant ?

Les réponses à ces questions sont structurantes et vont vous permettre d’orienter l’ambition autour du projet, sa philosophie, et de bâtir le projet qui vous correspond, dimensionné à votre organisation.

On retrouvera donc les valeurs, les objectifs et les grands préceptes dans une section du Design System. Elles serviront de base pour fédérer les équipes autour du projet, comme le ferait une plateforme de marque.

objectif du design system
Source : IBM

2 : Faire un état des lieux des ressources existantes

Il est important de faire un état des lieux des ressources que l’on voudrait intégrer dans le Design System. 

Il s’agit ici de bien comprendre les forces et les faiblesses de ce qui existe déjà afin de pouvoir déterminer si l’on peut s’appuyer sur l’existant et le compléter, ou s’il faudra repartir d’un feuille blanche pour arriver à un projet pérenne.

C’est une étape importante pour les entreprises qui ont déjà des applications développées ou en cours de développement.

3 : Déterminer les principes d’expériences

Les principes d’expériences sont les préceptes UX auxquels les composants doivent répondre.

Ils doivent donc aider les équipes à atteindre les objectifs qu’on aura précédemment définis.

Cette partie est assez conceptuelle, elle se doit d’être directrice et inspirante : 

  • Directrice à l’aide de règles qui expliquent le chemin à suivre 
  • Inspirante car elle doit donner envie, en laissant assez de liberté pour favoriser la création et l’innovation

principes du design system
Source : IBM

4 : Construire les éléments d’identité de marque

Cette étape s’apparente à la création d’une charte graphique digitale, car elle rassemble tout ce qui constitue l’univers de la marque, comme les couleurs, les typographies, les images, les animations… à cette différence près qu’elle est vivante et en constante évolution. 
Comme tout guide qui se respecte, il faut y adjoindre un mode d’emploi qui va permettre de comprendre comment assembler ces éléments entre eux. On retrouvera donc dans le design system des bonnes pratiques et des combinaisons à éviter, et ce pour favoriser une bonne prise en main du design. 

identité design system
Source : IBM

5 : Définir les principes de structures

Ce sont toutes les règles de créations des gabarits de pages, de grilles de mise en page, des marges, modules et plus généralement tous les principes qui vont permettre de définir un cadre commun.

structure design system
Source : IBM

6 : Créer les composants et les patterns

C’est une étapes à deux volets : 

  • Un volet UI car le Design System va s’appuyer dans un premier temps sur une librairie graphique de composants et patterns
  • Un volet technique, car il est primordial de mettre à disposition dans le Design System les composants et patterns intégrés, notamment pour des produits tournant sous des technologies  comme Angular, react ou view.

composant design system
Source : IBM

7 : Mettre à disposition des ressources téléchargeables

La réalisation d’un design system c’est l’occasion de rassembler en un seul point l’ensemble des ressources à jours. On aura la possibilité de télécharger ces ressources présentées au travers de différentes pages.

ressources design system
Source : IBM

Commencer par un UI Kit

Nous l’avons vu, concevoir un Design System est un projet ambitieux. Si celui-ci vous semble trop lourd à mettre en place, pas de panique, nous vous conseillons de commencer simplement par l’élaboration d’un UI Kit. 

L’UI Kit est une bibliothèque de symboles et de composants assemblés

 dans un fichier indépendant, et destinée cette fois-ci majoritairement aux designers. Il reprend tous les éléments d’identité de marque, les composants et patterns nécessaires à la construction graphique d’un produit. 

Mettre en place un UI Kit permet de se concentrer dans un premier temps sur la partie design de votre projet. 

Chez Limpide, nous adoptons régulièrement cette approche light pour nos clients. Moins coûteux et plus facile à mettre en place, il permet d’aborder le design system en douceur. 

C’est un premier pas vers l’industrialisation ; il permettra notamment de pouvoir rapidement réaliser des prototypes pour pouvoir tester de nouveaux concepts.

ui kit
Source : Dribbble

Les outils pour concevoir un UI Kit 

Il est primordial d’opter pour les bons outils de conception, et de préférence les outils accessibles au plus grand nombre.

Chez Limpide nous utilisons Sketch ou Figma en fonction des contraintes et des besoins de nos clients. Il est aussi possible d’utiliser Invision Studio, UX Pin, Framer ou Adobe XD, mais nous préférons les deux premiers pour leurs fonctionnalités avancées et la possibilité de gérer simplement les symboles et les librairies de composants. 

Ces bibliothèques sont indépendantes et réutilisables d’un projet à l’autre. Lorsque l’on modifie le fichier bibliothèque maître, les modifications se répercutent sur les fichiers parents. Pratique.
En ce qui concerne le stockage et le versioning de Sketch nous utilisons Sketch Cloud et Dropbox, qui fonctionnent comme des clouds classiques avec le stockage et partage de fichiers, la possibilité d’ajouter des commentaires et d’échanger simplement.

Mesurer pour mieux comprendre l’usage

Chez Limpide l’amélioration continue est au coeur de toutes nos actions. C’est pour cela que nous nous intéressons également à l’usage qui est fait du Design System et que nous regardons systématiquement les comportements au travers de la donnée. Pour ce faire nous mettons en place des plans de taggages, des outils d’analyse quantitative comme Google Analytics sur nos Design Systems. Grâce à nos analyses, nous pouvons ainsi faire remonter les besoins pour ajuster nos outils afin qu’ils correspondent parfaitement aux besoins des utilisateurs.  

Ce qu’il faut retenir

  • Le Design System constitue un projet d’envergure. Il est essentiel de se poser les bonnes questions sur l’utilité de sa mise en place. Par exemple, ce n’est pas forcément justifié pour un projet de site Internet, ou d’application éphémère.
  • Il est indispensable de nommer un garant qui sera en charge de conserver une cohérence et l’harmonie du Design system. Le garant est aussi là pour discuter avec tous les corps de métier, centraliser les retours et pour accompagner les équipes dans l’utilisation de leur Design System.
  • Il est important de s’y prendre tôt. Plus vous commencerez aux prémices des projets, plus cela sera simple et plus vous gagnerez du temps par la suite.. 

Et n’oubliez pas ! Un bon Design System est inspirant, évolutif et adaptatif, il ne correspond en aucun cas à une standardisation figée des interfaces.

Si vous souhaitez en  apprendre davantage sur le sujet, voici quelques ressources très intéressantes : 

Library Sketch, UX power tools : pour prendre connaissance d’un UI Kit bien construit et pouvoir piocher dedans 

Galerie de Design System, Design System Repo : pour effectuer votre veille sur les différents Design System qui existent 

Medium, Nathan Curtis articles : pour suivre un UX Designer qui rédige des articles très intéressants sur l’UX Design

Pour découvrir les prises de paroles de nos experts, rendez-vous à nos prochains Talks ! Nous avons hâte de vous y rencontrer !

(1) Selon le Digital Report réalisé par We Are Social et Hootsuite en 2018