Vos projets digitaux ont besoin d’un “design system”

Un “design system” est un kit de design digital complet définissant les grands principes de design sur lesquels un produit digital ou un site web doivent être construits. Il définit le design des plus petits éléments (textes, titres, formulaires) aux grilles, palettes de couleurs, blocs ou composants, mais il peut aussi être poussé plus loin avec la définition de règles d’animation, d’interaction, ou encore de grands principes.

D’un point de vue technologique, le “design system” peut être défini comme un guide visuel. Il peut également inclure des extraits de code (HTML/CSS/JS) et définir des normes de codage technique que les développeurs front-end pourront appliquer.

Construisez votre propre design system

Décider de bâtir un “design system” est toujours une bonne idée en soi. Il est aisé de percevoir q’une telle méthode est bénéfique pour les équipes de design et de front-end de sociétés comme Uber, Google ou Dropbox, mais cela l’est moins pour les petites et moyennes entreprises et même pour un projet personnel. Or ça l’est tout autant.

La mise au point d’un “design system” prend du temps et consomme des ressources, mais il améliore de façon déterminante la notoriété de marque. Il harmonise l’expérience de l’utilisateur sur plusieurs points d’interactions et supports, et permet aux équipes de construire des produits de meilleure qualité et plus rapidement. Il simplifie la maintenance et le débuggage grâce à l’amélioration des connaissances de l’équipe.

Si vous travaillez au sein d’une grande équipe, un “design system” vous donnera les moyens de définir des règles claires, des systèmes communs de navigation, des composants de structure, des flux d’utilisateurs, etc. L’expérience utilisateur bénéficiera de cette cohérence et la courbe d’apprentissage de vos utilisateurs s’accélérera.

Si vous travaillez au sein d’une petite équipe, votre design system n’a pas besoin d’être aussi détaillé, mais en documentant le design, vous aurez une structure claire qui servira de fondation.

Petite équipe ? Voici comment commencer

Si vous pensez toujours que votre équipe est trop petite pour adopter cette méthodologie, voici une démarche type que vous pouvez appliquer.

Tout d’abord, ne réinventez pas la roue. Commencez par sélectionner un framework open source et respectez leurs règles dans votre projet. Les plus populaires sont bootstrap et foundation, mais tout framework fera l’affaire. Vous n’avez pas besoin de passer du temps à coder tout un ensemble HTML, CSS et JS afin d’avoir une colonne vertébrale technique pour votre design. Pour réduire leur empreinte, commencez par le plus petit ensemble de fonctions et activez celles dont vous avez besoin quand vous en avez besoin.

Ensuite, passez au design. Commencez avec les lignes directrices de la marque : logo, polices, couleurs, icônes. Puis, concevez vos éléments du bas vers le haut : éléments HTML d’abord (titres, textes, liste, boutons, formes, etc.) puis navigation (menu, navbars, call2action, etc.). Essayez de créer des éléments qui ajoutent un sens à votre design, et qui transmettent les messages de la marque.

La prochaine étape dépend du contenu digital du produit en question. Faîtes un inventaire rapide en définissant chaque composant dont vous avez besoin : cartes, carrousels, onglets, modaux, alertes, etc. Construisez pièce par pièce avec une image globale en tête. Alors, vous êtes prêt à commencer à utiliser votre “design system” sur vos projets.

En utilisant un “design system” et les éléments qui le composent, vous recueillerez alors des retours de vos utilisateurs. Si vous avez besoin de l’affiner et de l’améliorer, faites-le avec de petites itérations. Cela vous permettra de gagner en qualité de conception au lieu de réinventer votre design tous les deux ans. Testez et apprenez de vos utilisateurs, murissez votre connaissance du design. Et, chaque fois que vous commencez à vous sentir limité par votre design system, penchez-vous davantage dessus, remettez en question votre framework, définissez votre propre ensemble de règles, ou mieux encore, codez un cadre qui vous est propre, afin de vous permettre d’avancer.