🎁 Formez-vous en continu à l'UX Design et au CRO (Optimisation des conversions)
Formation CRO gratuite
Boostez vos conversions avec le process CRO ultime
.png)
Florent Kiecken
23/5/2020
Dernière MAJ :
19/4/2024
Le but de cet article est de vous montrer les bonnes pratique à avoir en tête pour créer un design system pour votre projet.
Si vous souhaitez approfondir les notions de design UX/UI en CRO, je vous invite à découvrir notre formation vidéo gratuite sur le sujet.
5/5
Mettre en place un design system lorsque l’on développe un produit est une excellente solution. Mais cette méthode est souvent mal comprise et mal utilisée. En effet, cela demande un travail assidu sur le long terme et des efforts de collaboration. Mais finalement, ce procédé a énormément d’avantages.
Un design system est un procédé englobant tous les éléments concernant le point de contact entre les acteurs du développement d’un produit. Un design system a donc pour objectif de réunir tous les éléments graphiques, visuels, liés aux règles, de branding, de ton, etc. dans un seul et même système standardisé.
On peut donc comparer le design system à une charte graphique. Or, le design system est une version moderne de la bibliothèque d’éléments classiques sous forme de kit UI. On retrouve aussi bien des éléments visuels que des éléments explicatifs sur l’image de marque et sur l’UI Design.
C’est donc un véritable point de contact entre les développeurs et les designers qui n’est pas figé mais qui est dynamique. Les acteurs d’un design system le font évoluer en temps réel afin de s’assurer que les différents acteurs travaillent avec le même design et les mêmes règles.
Le design system a pour objectif de centrer les acteurs du développement d’un produit en question sur les même bases et sur les mêmes règles. On va donc souvent trouver dans des design systems, des bouts de codes CSS par exemple, ou des fichiers sketch.
On peut retrouver dans un design system des éléments tel que :
On peut retrouver également des informations concernant l’état d'esprit de la marque, ses positionnements par rapports à des sujets, ses valeurs, etc.
Le design system représente une manière de penser, un état d’esprit qui encourage le travail d’équipe et la collaboration. Dans la plupart des cas, un design system est disponible par tous directement sur internet, grâce au cloud par exemple. Cela permet à tous les collaborateurs de travailler directement en temps réel avec l’ensemble de l'équipe et d’avoir des retours rapides.
On observait souvent les mêmes problèmes dans le passé: chaque acteur, développeur et designer, travaille dans son coin. Et arrivé à la fin, chacun mettait en commun. Cela se passait en général mal car les designers n’étaient pas alignés avec les règles des développeurs et inversement. On perdait donc en cohérence au niveau du design en général.
Cela fait donc perdre un temps considérable, avec des va-et-vient interminables.
Le design system est donc principalement utilisé pour cette raison: faire en sorte que toute l’équipe de conception d’un produit soit alignée dès le départ avec un design system qui se met à jour en temps réel. Grâce à ça, une cohérence d’UI, d’UX et d’ergonomie sera respectée par tous.
Cela fait donc gagner un temps considérable au développement des produits. La méthode du Design système s'apparente au procédé de scalabilité. Dans son objectif à vouloir garder un niveau de qualité élevé tout en économisant du temps et donc en étant plus productif.
Les avantages de design system sont :
Par ailleurs, le design system semble présenter que des avantages. Néanmoins, le design system n’a pas sa place pour les petits projets où l’on ne fait pas appel à de réelles équipes pour la conception du produit. Dans ce cas-là, la création d’un design system peut être contre-productif et peut faire perdre du temps à la conception.
Lorsqu’on met en place un design system, l'objectif est de mettre en place le plus d’éléments possibles qui sont susceptibles d’être réutilisés plusieurs fois. Pour cela, il est important de créer des paternes, des composants et des layouts dans différents niveaux de profondeur.
On parle dans ces cas là d’atomic design. L’atomic design est une méthode qui consiste à découper en différents composants le design d’une interface. Cela va permettre d’avoir des petits éléments qui vont former des plus gros et ainsi de suite.
Par exemple les micro-animations, les couleurs, les textes sont des atomes.
Et les molécules sont des groupes d’éléments comme des boutons par exemple.
Ces éléments travaillent ensemble pour former différents layouts, composants et groupes d’éléments.
Il est important de les séparer distinctement afin d’avoir la main sur tout et pouvoir réutiliser chaque atome et chaque molécule comme bon vous semble. Que ce soit pour les développeurs ou les designers.
Par exemple si un développeur veut intégrer un design de bouton dans différents groupes d’éléments, il faut qu’il existe un paterne uniquement pour ce bouton afin que le développeur soit parfaitement flexible à ce niveau-là.
Les étapes de création d’un design system sont les suivantes.
Avant de mettre en place quoi que ce soit, il est important d’analyser votre situation et les problèmes que vous voulez résoudre.
Posez-vous les bonnes questions :
Si c’est par exemple pour la refonte de votre site web, faites d'abord un audit complet de votre site afin de voir quels sont les problèmes et les améliorations à apporter sur votre site. En faisant ça, vous serez en mesure de créer un design system cohérent avec vos besoins et ceux de vos utilisateurs.
Il est également important de faire de la recherche sur vos utilisateurs afin de récolter des données qualitatives et quantitatives. Plus vous connaîtrez votre cible, plus vous serez en mesure de concevoir un design system qui leur correspond.
Pour en apprendre plus sur vos utilisateurs et faire de la recherche UX, plusieurs méthodes existent :
N'oubliez pas que finalement, votre design final doit être pensé pour l'expérience utilisateur et pour les conversions. Sachant que votre design system est le cœur de tous vos éléments graphiques, visuels, textuels, il doit être pensé dans un objectif d’optimisation de l’UX et des conversions.
Le métier d’UI design est un métier qui consiste à travailler sur l'aspect visuel d’un produit, sur le retour graphique que va avoir l’utilisateur face à l’interface. L’UI est donc le point de contact entre l’utilisateur et le produit.
Cette étape consiste donc à créer la maquette et les différents composants que va contenir votre produit, votre application ou votre site web.
Plusieurs éléments doivent donc être traités ici :
A la manière de l’atomic design, le but ici va être de créer et de placer l’ensemble des boîtes. L'emboîtage et la structure de vos éléments doivent être définis de façon standard.
Vous pouvez répertorier ces éléments, ces formes sur une page dédiée à l’aide de Sketch ou Figma par exemple.
Le but est de réunir l’ensemble des boîtes et des parties de votre interface que vous allez réutiliser. Il faut que ces éléments soient divisibles afin de les utiliser comme bon vous semble par la suite.
Cette méthode de wireframe permet de placer vos éléments au préalable et d’avoir une idée sur les boîtes que vous allez utiliser souvent.
Vous devez également choisir et respecter une grille qui est propre à toutes les pages de votre site et les sections de votre produit. Vous pouvez choisir de travailler avec 12 colonnes afin que tous vos éléments soient espacés équitablement.
La palette de couleur est un élément crucial dans votre design system. Vous devez définir quelles sont les couleurs utilisées bien sûr, mais vous devez également spécifier d’autres informations les concernant.
Plusieurs infos doivent être présentes concernant les couleurs utilisées :
Sachant qu’un design system doit être évolutif et entièrement flexible, vous vous devez de créer des variables pour vos couleurs. Afin de gagner du temps si vous devez modifier la couleur de l’ensemble de vos éléments.
Par exemple, si vous avez déjà fini la maquette et que vous devez changer tous les boutons rouge en boutons bleus, il vous suffira juste de changer la variable rouge en bleu. Il est important d’utiliser cette méthode aussi bien sur les maquettes des designers que pour le code JS et CSS des développeurs.
Les textes occupent sûrement une grande partie de votre design. Vous avez sûrement des polices de caractères qui reviennent souvent et des tailles de textes standards. Comme pour les couleurs, il est important de définir quels sont les différentes typographies utilisées.
Mais il est également important de définir les règles à respecter et les infos à avoir concernant les textes :
Là aussi, il est important de créer des variables afin d’avoir la main sur la totalité des paramètres et de gagner du temps.
L’important est d’avoir une homogénéité dans votre design, utilisez donc les paramètres des polices avec intelligence. Essayez d’utiliser les mêmes paramètres le plus possible. Changez le graissage, la taille, la typographie quand cela aide à la hiérarchisation.
Les éléments purement graphiques doivent eux aussi être répertoriés dans une bibliothèque. Mais le design system impose là aussi de donner des règles à respecter et des paternes à utiliser.
Mettez-y donc tous les éléments à utiliser, en donnant les fichiers svg, png et jpeg.
Établissez également des règles concernant l’échelle, les dimensions, les marges à respecter.
Pour les icônes, vous pouvez là encore les associer aux couleurs. Dire par exemple que les icônes doivent être d’une certaine couleur.
Autre exemple, vous pouvez dire que dans le menu les icônes seront bleues mais que dans le bas de page elles seront rouges.
Il n’y a pas de limite concernant les règles, tout est possible. C’est ça le design system, ce sont des règles bien spécifiques qui vous faciliteront la tâche.
Avec tous ces éléments définis au préalable, vous aurez donc un design system qui fonctionne, à condition que tout soit correctement paramétré.
Que ce soit vos couleurs, vos textes, vos layouts, vos menus, vos structures… Tout doit être sous forme d’objets réutilisables et combinables entre eux.
Il est important donc de faire cet effort dans les maquettes Figma, Adobe XD, Sketch ou autres. Créer au fur et à mesure de la conception des composants et des paternes afin d’avoir un produit homogène dans l’ensemble de son design.
Également au niveau du code, il est important d’implémenter un fichier CSS de Design system afin de regrouper toutes les normes définies au préalable lors du design. Sachant que le design system doit être évolutif, l'utilisation de variables pour les couleurs, les textes, les marges et tout autre élément nécessaire est primordial.
Il vous faut les compétences d'un UX Designer pour réaliser votre design system. Vous pouvez vous faire accompagner par un membre de l'équipe pour la réalisation de votre design system.
Le material design de Google a été créé en 2014 afin de mettre à disposition un véritable langage de conception et de design.
On retrouve dans ce design system complet des composants, des guides de typographies de couleurs de positionnement de boutons.
Le material design est basé sur du code et des ressources open-source, ce qui facilite la collaboration entre les designers et les développeurs et aide l’équipe à créer des produits rapidement et facilement.
Toutes les ressources concernant le design system de Google sont disponibles sur le site material.io.
Airbnb partage ses informations sur son propre système de design et ses différentes règles de conception. On retrouve donc ici des propriétés, des composants tout en donnant le ton et la personnalité de la marque.
Les composants et les éléments peuvent donc être utilisés seul ou ensemble lorsqu'ils sont combinés.
Le géant Microsoft a bien sûr lui aussi un design system très clair et efficace. Le fluent design system a été développé en 2017.
On y retrouve différentes directives pour les designers et développeurs concernant les logiciels et les appareils qui utilisent la plateforme Windows 10.
MailChimp est un outil de gestion et d’envoi d’email automatique très réputé. Ils ont eu aussi un design système bien établi qui existe depuis bien longtemps.
L’entreprise propose donc des guides de style pratique que tout le monde peut utiliser pour ses designs de mails et d’interfaces.
Shopify est une société de-commerce dotée d’une plateforme permettant à chacun de créer sa propre boutique en ligne assez facilement. Shopify a également crée un design system nommé Polaris qui a pour objectif d’aider l’entreprise mais aussi ses utilisateurs à créer une bonne expérience utilisateur.
Elle est composée donc de composant, de règles graphiques et visuels, de conseils pour le contenu, le ton, la grammaire, etc.
L'entreprise de logiciel d’entreprise australienne Atlassian a elle aussi son design system.
Publié pour la première fois en 2012 le design system est extrêmement détaillé et est composé de modèle de conception, de code et d’une bibliothèque de ressources d’interface disponible dans sketch. On y trouve également différentes explications concernant les choix pris.
Le design système d’IBM n’est peut-être pas aussi complexe et flashy que les autres, mais il a le mérite d'être élégant, fonctionnel, direct et simple.
On peut retrouver quelques exemples d'utilisations de leur design, des aperçus logiques, des animations, couleurs, codes réutilisables, etc.
