L'importance du nommage dans un Design System

Le nommage, c’est la recherche et l’attribution d’un nom permettant d’identifier et de différencier des éléments. Sa finalité : s’assurer que tous les membres d’une équipe parlent la même langue.

Dans un article précédent nous vous parlions du Design System et de son fonctionnement en structure atomique. 

 

Structure atomique du Design System. Source : Atomic Design by Brad Frost

 

En tant que documentation complexe, composée d’éléments hiérarchisés, le Design System se doit de désigner de façon explicite, homogène et rationnelle chacun des atomes, molécules, organismes… qui le constituent.

Si certaines désignations sont universelles (modal ou checkbox par exemple), le nommage est propre à chaque Design System et à l’équipe qui l’a créé.

 

Dans Mozaic, le Design System d’Adeo, le tag est un élément interactif « utilisé pour catégoriser, afficher des filtres ou faire des sélections. Ils expriment des caractéristiques produits ». Chez Décathlon et leur Design System Vitamin, cette fonction est remplie par les chips.

Quels sont les enjeux du nommage d'un Design System ?

S'organiser

Le nommage est une pratique que l’on met en oeuvre déjà depuis toujours au travail et dans notre quotidien. Nous avons tous un nom et un prénom et tout ce qui nous entoure est défini et nommé. C’est ce qui nous permet de communiquer. Nous pouvons voir le nommage du Design System comme un second langage unique que nous définissons et utilisons par la suite au sein d’un groupe de personnes.

Il nous permet de structurer et classer les différents composants et pages réalisés. Un peu comme nous le faisons (si on le fait 😇) avec les fichiers et dossiers de notre ordinateur.

Cette classification est nécessaire car un Design System se travaille souvent à plusieurs. Il est donc important de donner de l’ordre aux composants pour que chacune des personnes qui intervient sur le projet retrouve ses petits.

 

Mieux communiquer

En entreprise, selon les métiers, nous ne parlons pas de la même manière et les termes peuvent varier.

Le Design System va permettre de définir des éléments et de leur attribuer un terme fixe que tout le monde utilisera. Cela permet ainsi une meilleure communication entre métiers. Chez Goweb, c’est d’ailleurs l’objectif premier du Design System. Nos UX/UI designers construisent et nomment leurs composants pour qu’ils soient compris et utilisables aisément par les développeurs.

 

Etre plus efficient

Le nommage permet de gagner en efficacité et en automatisation des processus de construction des pages. Plus le Design System est organisé, plus son utilisation sera simple et plus le gain de temps sera conséquent.

 

Quelle méthodologie pour le nommage dans un Design System ?

Il n’y pas de recette universelle pour mettre en place un nommage efficace, mais on définit chez Goweb trois étapes clés tout au long d’un projet :

1. Définir les bons termes dès le lancement

La communication s’amorce dès le début du projet, juste après le brief entre les différentes parties prenantes, afin d’être conscients de la production à venir (soit from scratch, soit à partir de l’existant)

Avant de démarrer la construction du Design System, développeurs et designers se réunissent pour définir ensemble les composants et les différentes catégories de composants, en les listant et en leur attribuant une nomination. Il est important de prendre le temps de passer en revue chaque élément pour s’assurer de n’oublier aucun composant, ce qui évitera une perte de temps coûteuse par la suite.

2. Construire des composants selon les normes établies

Lors de la phase de production, côté UX-UI comme côté développement, on met en place le nommage défini ensemble. Ainsi, dès le début de cette phase, toutes les parties prenantes du projet sont sur la même longueur d’onde et se comprennent plus facilement.

3. Documenter !

BEM : un exemple de convention de nommage

BEM (Block Element Modifier) est une convention de nommage en CSS, et surtout en SCSS. Elle admet deux types de composants :

• le bloc, qui est un composant parent indépendant de la page à laquelle il appartient
• l’élément, qui appartient systématiquement à un bloc.

Le modificateur (modifier) définit le comportement d’un élément ou d’un bloc (par exemple lors du survol).

Le nommage respecte les conventions suivantes :

• un bloc et un élément sont séparés par deux underscores
• un modificateur et un élément (ou un bloc) sont séparés par deux tirets.

« .bloc__element—modifier »

 

Convention de nommage BEM

 

La méthodologie BEM permet d’organiser, structurer et normaliser le code CSS et par extension la structure HTML. Elle évite non seulement les conflits de nommage, mais aussi la duplication du code, ce qui permet des composants graphiques autonomes et aisément réutilisables, améliorant ainsi la maintenabilité du code.

 

Si vous aussi êtes convaincu de l'intérêt du Design System et souhaitez en déployer un dans votre organisation, contactez-nous !