Vous avez dit « Design System » ?

Afin de faire évoluer le concept de charte graphique, relativement figée à un instant T (celui de sa conception).

# C'est quoi ?

Un design system est un référentiel unique qui propose un ensemble de règles à suivre dans le design et l'utilisabilité. Il se traduit par :

• Des principes fondamentaux de conception : rythme vertical, transitions, contraste, etc.
• Une bibliothèque de composants visuels mettant en œuvre ces principes : notifications, boutons, etc.
• Une traduction en code informatique de ces composants.
• Une documentation expliquant comment fonctionne tout ce qui précède.

# C'est pour qui ?

L'avantage non-négligeable d'un design system est sa capacité à toucher un nombre d'acteurs important.

• Concepteurs : ils disposent d'une bibliothèque partagée de principes et de composants dans des outils adaptés (Sketch, Figma, etc.).
• Développeurs : le temps d'intégration est réduit au minimum grâce à un code réutilisable et documenté.
• Chefs de projet : les règles de design spécifiques à un cas marginal peuvent être récupérées facilement et permettent une décision rapide ne nécessitant pas de monopoliser concepteurs et développeurs comme auparavant.
• Utilisateurs : sur application ou site Internet, d'un forum à un espace client, l'expérience de navigation est unifiée et visuellement homogène, assurant alors une image de marque forte.

# Comment ça fonctionne ?

Un design system repose généralement sur le concept d'Atomic Design, imaginé par Brad Frost : chaque élément à sa plus petite échelle est un atome, qui va se conjuguer avec d'autres atomes pour devenir des molécules puis des organismes. Dans le cadre d'une page web, cela donne :

• Un atome est par exemple un <input> pour remplir un formulaire, un <button> pour soumettre un formulaire ou un simple <a> qui permet de créer un lien. On pourrait résumer à atome = élément HTML.
• Une molécule, composée de plusieurs atomes, sera par exemple un ensemble libellé + champ + bouton permettant de construire un petit formulaire tout simple.
• L'organisme fera cohabiter plusieurs molécules : un logo, à côté d'un menu de navigation suivi d'un simple formulaire de recherche. On pourra alors imaginer des parties complètes d'un site web, qui formeront alors des pages entières.