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

L’expression « design system » est à la mode dans le domaine du design front-end au sein des entreprises pionnières du digital “GAFA” (Google, Apple, Microsoft, SAP), mais aussi au sein des nouvelles licornes (Salesforce, Airbnb, MailChimp, Uber, etc.) et autres institutions (Starbucks, GOV.uk) qui y investissent beaucoup de temps et d’argent.

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.

Pour aller plus loin

DĂ©couvrez nos services en design