Avez-vous besoin d'un système de design pour votre site ?
Un système de design est un ensemble de composants réutilisables et les règles pour les utiliser. Sur un grand site où plusieurs personnes font des modifications, il supprime énormément de décisions prises en double. Sur un site vitrine de cinq pages, c'est un coût sans retour.
Ce guide couvre où se situe la ligne, ce que contient vraiment un système minimal utile, et quoi faire à la place quand un système complet ne se justifie pas.
Quand cela se rentabilise et quand non#
La valeur vient de la répétition : la même décision prise une fois au lieu de quarante, et de façon cohérente. S'il n'y a pas de répétition, il n'y a pas de valeur non plus.
| Situation | Verdict |
|---|---|
| Site vitrine de cinq pages, un designer, changements rares | Non : une page de guide de style suffit |
| Un site, plusieurs gabarits, changements de contenu occasionnels | Léger : jetons et une planche de composants |
| Site plus application partageant une marque | Oui : la surface partagée est là où la dérive apparaît |
| Plusieurs sites dans une même organisation | Oui : c'est le cas le plus net |
| Tests A/B fréquents et pages de campagne | Oui : la vitesse d'assemblage est le gain |
| Refonte prévue dans l'année | Pas encore : construisez le système avec la refonte |
Le système minimal utile#
L'essentiel du bénéfice vient d'un petit noyau. Cela se construit en jours, pas en mois, et suffit à la plupart des sites qui en ont besoin.
- Jetons : couleur, échelle typographique, échelle d'espacement, rayons, ombres, points de rupture — nommés, pas des nombres en dur.
- Typographie : niveaux de titre et styles de texte courant avec leur comportement adaptatif.
- Boutons et liens : tous les états — normal, survol, focus, actif, désactivé, chargement.
- Contrôles de formulaire : champ, liste, zone de texte, case à cocher, bouton radio, plus les styles d'erreur et d'aide.
- Cartes et listes : les deux ou trois conteneurs de contenu répétés que votre site utilise vraiment.
- Navigation : en-tête, pied de page, fil d'Ariane, pagination.
- Retour utilisateur : état vide, état d'erreur, état de chargement, message de succès.
Les états sont la partie que l'on saute et celle qui compte le plus. Un composant défini seulement dans son état normal renvoie chaque cas limite à celui qui l'implémente.
Le coût d'entretien que personne ne budgète#
Un système de design est un produit avec des utilisateurs, et il lui faut un responsable. Sans lui, il dérive : le site gagne des composants que le système n'a pas, le système garde des composants que personne n'utilise, et au bout d'un an les gens travaillent à côté plutôt qu'avec.
- Quelqu'un en est propriétaire et décide de ce qui entre. Un système géré par un comité cesse d'évoluer.
- Un chemin documenté pour proposer un nouveau composant, afin qu'on l'étende plutôt qu'on le contourne.
- Un versionnement, pour qu'un changement ne modifie pas silencieusement toutes les pages d'un coup.
- Un audit périodique de ce qui existe sur le site en production et pas dans le système : cet écart est l'indicateur de santé.
- La suppression. Les composants inutilisés sont un coût, pas une valeur.
Alternatives plus légères#
Si le cas d'un système complet n'est pas là, il existe des étapes moins chères qui captent une grande partie du bénéfice de cohérence.
| Option | Effort | Convient à |
|---|---|---|
| Propriétés personnalisées CSS pour couleur, typo et espacement | Heures | N'importe quel site : c'est le plancher |
| Une page unique de guide de style vivante dans le site lui-même | Une journée | Petits sites avec des contributeurs occasionnels |
| Bibliothèque de composants dans le CMS ou la couche de gabarits | Jours | Équipes de contenu qui assemblent des pages |
| Framework CSS établi, légèrement thématisé | Jours | Outils internes et écrans d'administration |
| Système de design complet et documenté | Semaines à mois | Plusieurs produits ou plusieurs équipes |
Une page de guide de style vivante à l'intérieur du site réel vaut mieux qu'un document : elle utilise le même CSS, elle ne peut donc pas s'écarter de la réalité sans casser visiblement.
Questions fréquentes
Puis-je utiliser un système de design prêt à l'emploi ?
Oui, et pour des outils internes c'est généralement le bon choix : la marque compte peu et vous obtenez immédiatement des composants accessibles et testés. Pour un site marketing public, la contrepartie est que votre site ressemble à tous ceux qui utilisent le même système, donc la plupart des organisations le thématisent lourdement, et une partie de l'économie d'entretien disparaît alors.
Qui doit être responsable du système de design ?
Une personne nommée, avec les apports du design et du développement. Une responsabilité partagée entre design et ingénierie sonne collaboratif et signifie en pratique que personne ne tranche, donc le système cesse d'évoluer et les gens le contournent. Le responsable n'a pas à tout construire ; il doit dire oui et non.
Quelle différence entre un guide de style et un système de design ?
Un guide de style documente l'apparence : couleurs, typographies, usage du logo. Un système de design inclut cela plus des composants fonctionnels, leurs états, les règles pour les combiner et généralement le code. Un guide de style vous dit à quoi ressemblent les choses ; un système de design vous donne les pièces et vous dit quand utiliser chacune.
Comment éviter qu'il devienne obsolète ?
Faites-en le chemin de moindre résistance et auditez l'écart. Si utiliser le système est plus lent qu'écrire du CSS ponctuel, les gens écriront du CSS ponctuel. Listez périodiquement les composants du site en production absents du système : une liste qui grossit signifie que le système ne sert pas ceux qui construisent les pages, et c'est un problème de conception du système lui-même.
système de designguide de style webjetons de designbibliothèque de composantscohérence d'interfacedesign system web
