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
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.
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
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.
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.
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.
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.
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 : Dribble
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 :
Comment créer un design system ?
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 :
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 :
Exemple : couleurs typographie..
Exemple : label, champ texte, bouton…
Exemple : une liste de produits, un header
Exemple : le template de page de liste
Exemple : la page finale
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 :
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.
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 :
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.
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.
6 : Créer les composants et les patterns
C’est une étapes à deux volets :
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.
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 : Dribble
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
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
Le live