Design system : pourquoi les petites équipes en ont besoin
Pourquoi un design system fait gagner plus de temps à une petite équipe qu'à une grande, et par où commencer avec quelques éléments réutilisables.
Équipe rabbitclipPublié: 6 min de lecture
En bref
Un design system est une source unique qui rassemble les éléments récurrents d'une marque, couleur, typographie, boutons, formulaires, cartes, pour qu'une nouvelle page ou fonctionnalité se construise à partir de ces éléments prêts à l'emploi plutôt que d'être redessinée à chaque fois. Pour une petite équipe, cela signifie ne plus jamais avoir à redemander 'à quoi ce bouton était-il censé ressembler'.
Un design system peut sembler être un luxe réservé aux grandes entreprises, mais c'est plutôt l'inverse qui est vrai: une petite équipe aux ressources limitées est justement celle qui peut le moins se permettre de perdre du temps à corriger des incohérences.
Cet article explique ce qu'est réellement un design system, et ce qu'il apporte concrètement à une petite équipe. Aussi réduite que soit son ampleur, le bénéfice joue dans le même sens.
Ce qu'est vraiment un design system
Un design system documente le langage visuel d'une marque, palette de couleurs, typographie, règles d'espacement, ainsi que les composants réutilisables construits à partir de ce langage, boutons, champs de formulaire, cartes, notifications, tout au même endroit.
Cela peut être un document, une bibliothèque de code, ou les deux ensemble. Ce qui compte, c'est qu'un designer ou un développeur construisant une nouvelle page puisse piocher un composant prêt à l'emploi plutôt que de se demander à chaque fois de quelle couleur devrait être ce bouton.
Si le bouton de réservation d'une chaîne de spas apparaît dans une nuance de vert légèrement différente sur chaque page, c'est un signe concret qu'un design system fait défaut.
Un designer n'a pas besoin de construire ce système seul; s'accorder tôt avec le développeur sur la façon dont chaque composant est nommé dans le code réduit bien des confusions par la suite.
Pourquoi c'est particulièrement crucial pour une petite équipe
Dans une grande équipe, l'incohérence est un problème de vigilance; dans une petite, c'est un problème de temps. Si une équipe de deux ou trois personnes rediscute couleur, espacement et taille de police à chaque nouvelle page, ce temps ne va pas vers le vrai travail, le contenu ou la nouvelle fonctionnalité.
Quand une nouvelle catégorie de produits s'ajoute au site d'un fabricant de vêtements de travail, un design system existant permet de boucler ce travail en quelques heures; sans lui, cela prend des jours. La différence tient à ce que chaque élément soit redessiné depuis une page vierge ou non.
Le gain de temps ne se voit pas qu'à la conception, il se voit aussi au développement; avec une bibliothèque de composants prête à l'emploi, un développeur réutilise un élément existant plutôt que de coder un nouveau formulaire depuis zéro, ce qui réduit aussi le risque d'erreurs.
Ce qui se passe sans design system
Avec le temps, un site accumule des dizaines de styles de boutons, de champs de formulaire et de tailles de titres qui ne s'accordent plus tout à fait entre eux. Cela devient une expérience déroutante pour le visiteur, et pour l'équipe, une charge de vérification à chaque changement: 'est-ce pareil sur les autres pages?'
Un exemple courant: le site vieux de dix ans d'un fabricant, dont les pages ajoutées à différentes époques n'ont plus rien de commun visuellement; chaque page porte le goût de la personne qui l'a conçue à l'époque.
Par où une petite équipe commence
Construire un design system corporate complet n'est pas nécessaire; commencer par une poignée d'éléments de base suffit: une palette de couleurs principale, deux ou trois tailles de police, et des styles cohérents pour les boutons et les champs de formulaire.
Si ces éléments de base vivent dans une bibliothèque de code, un fichier de composants partagé par exemple, une nouvelle page se construit en les appelant; un changement de couleur ou de taille se fait à un seul endroit et se répercute sur tout le site.
Un bon point de départ consiste à auditer les trois pages les plus consultées du site existant et à lister les éléments qui s'y répètent; cette liste offre un démarrage plus rapide que concevoir un système depuis une page blanche.
- Une palette principale et des couleurs secondaires sont définies à un seul endroit
- Deux ou trois tailles de police sont fixées (titre, corps de texte, petit texte)
- Les composants boutons, champs de formulaire et cartes deviennent réutilisables dans le code
- Une nouvelle page se construit à partir de ces composants plutôt que d'être redessinée depuis zéro
Ce qu'un design system apporte à mesure que l'entreprise grandit
À mesure qu'une entreprise grandit, l'ajout d'une nouvelle page d'agence, d'une nouvelle catégorie de produits ou d'une nouvelle page de campagne se fait en quelques jours sur un site doté d'un design system; sans lui, cela prend des semaines.
Il donne aussi à un nouveau designer ou développeur rejoignant l'équipe un point de référence unique; il apprend le langage visuel de la marque à partir d'une seule source, plutôt qu'en le reconstituant page par page.
À qui revient l'entretien du design system
Un design system ne reste pas à jour tout seul une fois construit; quelqu'un doit suivre les changements de couleur, de composant ou de règle. Dans une petite équipe, cette responsabilité revient généralement au designer ou au développeur le plus expérimenté, sans besoin de créer un rôle à part.
Sans propriétaire clairement désigné, l'incohérence se réaccumule avec le temps: quelqu'un ajoute un nouveau style de bouton, personne ne vérifie s'il correspond au système existant, et le système se dérègle tout seul. C'est pourquoi relire le système existant avant d'ajouter un nouveau composant vaut la peine de devenir une habitude simple.
Si l'équipe marketing d'un fabricant confie une nouvelle page de campagne à une agence qui ignore le design system existant, cette page se détache visuellement du reste du site; cela montre qu'un design system a besoin d'être entretenu, pas seulement construit.
Cette responsabilité peut sembler lourde, mais dans la pratique elle est légère; une heure de relecture par mois suffit pour la plupart des petites équipes.
Un design system n'est pas le luxe d'une grande entreprise, c'est la façon dont une petite équipe protège son propre temps. Lors d'un premier échange avec rabbitclip, les incohérences du site existant se repèrent ensemble, et le point de départ d'un design system de base devient clair. Même un petit début vaut toujours mieux qu'aucun. Les petites incohérences accumulées au fil du temps finissent par coûter plus cher qu'une seule grande erreur.
Questions fréquentes
Un design system est-il réservé aux grandes entreprises?
Non, c'est au contraire une petite équipe qui protège le plus son temps de cette façon; l'ampleur peut rester proportionnellement réduite. L'ampleur grandit avec l'entreprise.
Combien de temps faut-il pour construire un design system?
Un système de base, couleurs, typographie, quelques composants, peut se construire en quelques jours; un système plus complet dépend de la taille du projet.
Peut-on ajouter un design system à un site existant?
Oui, les pages existantes sont auditées pour repérer les éléments récurrents, qui deviennent ensuite les briques du système.
Un design system n'est-il qu'une question visuelle?
Non, il couvre aussi la réutilisation des composants dans le code; c'est pourquoi il concerne à la fois le designer et le développeur.
Un design system doit-il vivre dans un seul outil de conception?
Non, il doit exister à la fois dans le fichier de design et dans le code; si les deux se désynchronisent, le système perd sa cohérence avec le temps. Cela peut être aussi simple qu'ouvrir un fichier de composants partagé dans le code.
