Design System : principes et mode d’emploi pour les débutants

Le concept de “Design System” se popularise depuis quelques mois dans le monde du digital. Mais de quoi s’agit-il ? Voici notre explication et notre retour d’expérience, en tant qu’agence spécialisée en design interactif.

Design Interactif 23 / 04 / 2020 3 minutes de lecture

Si on vous parle d’atomes, de molécules ou encore de composants, vous allez sûrement vouloir fermer cette page et fuir cette leçon de chimie, et pourtant ! Restez là : c’est bien de Design System dont nous allons parler. Quand on crée un site ou une application, il n’y a pas qu’une seule personne dédiée au projet ; ça va se déplacer de main en main, d’ordinateur en ordinateur. Et c’est pour qu’on met en place un… Design System. Avec Jean, notre UX Designer, on vous explique tout.

Mais un Design System, qu’est-ce que c’est ?

Imaginez une énorme bibliothèque remplie de tout ce que dont vous avez besoin dans la vie, absolument tout : toutes les informations sur les personnes que vous connaissez, des recettes de cuisines, votre façon d’écrire, votre arbre généalogique… Oui c’est vaste, mais voilà !

Un Design System est une plateforme, souvent en ligne, qui permet à n’importe qui arrivant sur le projet d’avoir tout ce qu’il faut à disposition.

design system Polaris de Shopify
Le Design System de Shopify, nommé “Polaris”.

Chartes graphique et éditoriale, sons, principes rédactionnels, ton de voix, icônes… Certains éléments sont plus simples que d’autres à mettre en place. Il est plus évident de transmettre une police d’écriture qu’un ton de voix… Pourtant, il est nécessaire de donner à une marque une personnalité, pour créer un lien avec l’utilisateur.

Quand vous passez la main à un rédacteur, il saura exactement quel style utiliser et le développeur sera assez content d’avoir les codes des couleurs utilisées dans le site à portée de clics.

Vous n’êtes pas convaincu par l’importance des couleurs, de la police et du ton de voix chez une marque ? Regardez la photo juste en dessous.

affiche mac donalds

Annonceur: McDonald’s
Agence: Cossette (Toronto)
Agences médias: OMD, Novus

Combien de temps avez-vous mis à trouver la marque ?

Le Design System, une bibliothèque organisée

Revenons à ce concept de bibliothèque. Mais parlons maintenant de librairie, une librairie assez simples avec quatre étagères. Chaque étagère aura son style :

  • Les atomes
  • Les molécules
  • Les composants
  • Les templates

Petites additions pour faire comprendre le concept :

  • H1, bouton, logo, icône… Il s’agit d’atomes. Et comme en chimie, plusieurs atomes forment une molécule.
  • Texte + bouton = Molécule
  • Molécule d’un formulaire de recherche + navigation = Composant
  • Header + CTA + Zone de texte + Photos = Template

Une fois vos templates tous beaux tous propres, il ne vous reste plus qu’à créer vos pages. Alors oui, c’est plus simple à dire qu’à faire. Selon le client, le Design System peut être plus ou moins poussé, avec ou sans charte éditoriale, avec ou sans bouton.

Il existe également des patterns. Ces derniers sont des recommandations d’utilisation pour des logiques de cohérences, notamment pour des composants plus complexes et les pages spécifiques.

L’avantage de réaliser un Design System, outre l’unification des équipes qui n’ont plus besoin de chercher à droite et à gauche les informations, c’est d’avoir le pouvoir de changer les atomes rapidement. Si vous décidez de changer une police ou encore une couleur pour les pages, vous n’aurez qu’à le changer sur le Design System et tout pourra (idéalement) être harmonisé à chaque endroit où l’atome aura été utilisé.

Un cas pratique chez NTMY

On parle, on parle, mais si on vous proposait un véritable exemple, ça serait peut-être mieux ! Pour l’Agence Régionale de Santé des Hauts de France, un Design System a été créé.

bases du design system

Notre UX Designer a donc créé des onglets pour chaque atome pour que tout soit rangé et que tout soit plus simple à retrouver.

C’est ici que vous, qui que vous soyez dans la chaîne du projet, trouverez ce dont vous avez besoin ! Par exemple, pour les titres et les couleurs, tout est rentré dans cette “base” pour que tout reste uniforme.

C’est la même chose pour les atomes plus formels comme les boutons. Toutes les types de boutons sont créés et référencés dans le Design System, pratique s’il faut en rajouter sur un composant : il n’y aura pas à le recréer.

Composants d'un design system

Et au final, une fois tout cela assemblé, les composants naissent et vous pourrez créer vos templates et, au fil de l’eau, vos pages !

Si on devait vous résumer l’utilité d’un Design System en… 5 points

  • Il facilite le travail des équipes. Vous n’aurez qu’à envoyer le lien du Design System à un de vos collègues pour qu’il puisse travailler dessus sans problème.
  • Des couleurs ou des H1 qui changent selon les pages ? C’est fini ! Tout est ici regroupé pour que le projet entièrement cohérent, que ce soit sur des éléments graphiques ou sur la partie communication.
  • En cas de nouvelle création de pages, il vous suffira de piocher dans les atomes, molécules ou même composants déjà créés. Un gain de temps qu’on vous dit !
  • Tout devient actualisable en un rien de temps. Ce qui se change sur le Design System se change EVERYWHERE. Et ça, c’est cool.
  • Vous pouvez mettre une catégorie “Tips” pour conseiller la personne qui reprend le projet. Si le site vient d’une autre agence, vous allez sûrement apprécier l’aide que la précédente personne vous a laissée grâce à des informations sur importantes sur l’UX ou la rédaction, par exemple.

Faites bon usage de ces précieux conseils !

Charlotte

AngePozzo di Borgo
image
letter
Saisissez votre adresse e-mail et vous recevrez chaque nouvel article dans votre boîte mail. No Spam Inside.
image
pro
4 CYCLES DE FORMATION AU DIGITAL
pour les professionnels, sur Lille ou Paris