Aller au contenu principal
Institut des Hautes Études Technologiques et Commerciales

Ressources

Le système de composants et les jetons de conception

Un système de composants donne à une organisation une seule définition par élément d'interface : un bouton, une valeur de couleur, une échelle typographique. Il fait gagner du temps, et surtout il fait tenir la cohérence dans la durée.

Une valeur, un seul endroit

Le jeton de conception nomme une décision — la couleur d'accent, l'espacement de base, le rayon d'un angle — et la déclare une fois. Tout ce qui l'utilise la désigne par son nom. Le jour où l'accent change, il change partout, en une modification. À l'inverse, une même couleur recopiée dans plusieurs composants produit une famille de teintes voisines qui se lit comme une erreur d'impression : le système existe justement pour rendre cette divergence impossible.

  • Un jeton par décision : couleur, espacement, rayon, échelle typographique
  • Un composant par élément d'interface, avec tous ses états documentés
  • Une documentation qui montre l'usage attendu et le code correspondant
  • Un nom sémantique plutôt qu'une valeur brute, partout où le composant est employé
  • Une seule source pour la conception et pour l'intégration

Ce que le système apporte à chaque métier

Au concepteur

Le temps passé sur la structure plutôt que sur la redéfinition d'un bouton déjà dessiné trois fois.

À l'intégrateur

Une maquette qui se lit en noms de jetons se transpose directement, sans mesure à la pipette.

Au responsable de marque

Une évolution de charte se déploie en une modification et se vérifie sur toutes les surfaces.

À l'équipe entière

Un vocabulaire commun. Les revues portent alors sur les choix plutôt que sur les écarts de mise en forme.

Monter un système en quatre temps

  1. 01

    Inventorier l'existant

    Recenser les boutons, les couleurs et les espacements réellement employés donne la mesure du chantier.

  2. 02

    Nommer les décisions

    Chaque valeur retenue reçoit un nom qui dit son rôle, jamais son apparence : accent, surface, contour.

  3. 03

    Construire la bibliothèque

    Un composant à la fois, avec ses états et son exemple d'usage. La documentation naît avec le composant.

  4. 04

    Verrouiller par un contrôle

    Une vérification automatisée interdit de réintroduire une valeur brute : c'est ce qui fait tenir le système.

Questions sur le système

À partir de quelle taille un système devient-il utile ?

Dès qu'un même élément d'interface existe sur deux écrans conçus par deux personnes différentes. Un système démarre très bien avec dix jetons et cinq composants : ce qui compte est la source unique, pas le volume de la bibliothèque.

Qui tient la bibliothèque à jour ?

La personne qui ajoute un composant le documente en même temps : la documentation naît avec le composant plutôt qu'après. La revue de conception vérifie ce point, exactement comme la revue de code vérifie les tests.

Comment nommer un jeton ?

Par son rôle dans l'interface — accent, surface, contour, texte secondaire — jamais par sa valeur. Un nom qui dit le rôle survit à un changement de charte, là où un nom qui dit la couleur devient faux le jour où la couleur change.

Le système de composants et les jetons de conception — Ressources | IHETC — IHETC