Craft et technique
Comment construire un design system qui laisse une place aux pages exceptionnelles ?
Un design system laisse une place aux pages exceptionnelles lorsqu’il distingue les invariants de marque des choix de composition. Les couleurs, les comportements et certains repères peuvent rester communs, tandis qu’une page de lancement ou un projet majeur reçoit une mise en scène spécifique. La cohérence ne demande pas une répétition littérale.
L'essentiel.
Un design system peut protéger une identité sans imposer la même composition partout. Il faut distinguer les règles communes, les variantes prévues et les créations spécifiques, puis donner à chaque exception une raison et un mode de maintenance.
- Séparer les fondations communes, les composants récurrents et les compositions particulières.
- Prévoir des variantes qui répondent à de vrais usages, avec des limites explicites.
- Donner à chaque exception une raison liée au contenu ou au concept.
- Vérifier les comportements et l’accessibilité même lorsque l’apparence change fortement.
Le système doit donc expliquer ce qui peut varier, pourquoi et avec quelles conséquences. Sans cette distinction, il peut devenir trop rigide pour les contenus singuliers ou trop permissif pour être utile. L’objectif est de rendre les exceptions intentionnelles, produisibles et maintenables.
Définir les invariants qui portent l’identité
Une marque peut être reconnaissable par ses contrastes, ses rapports d’échelle, ses cadrages et son ton. Ces éléments forment un langage, sans imposer une seule grille à chaque page. Le système doit nommer ces qualités et fournir des exemples de leur utilisation.
Les valeurs communes peuvent être traduites dans le code. Les propriétés personnalisées CSS permettent de définir et de réutiliser des valeurs. Leur intérêt dépend toutefois du modèle choisi : centraliser des valeurs sans expliciter leur rôle ne crée pas une direction artistique.
Distinguez une couleur destinée au texte d’une couleur décorative, un espace de séparation d’un espace expressif. Ces noms rendent les décisions compréhensibles. Ils permettent aussi de modifier un thème ou une page sans casser les usages auxquels les valeurs étaient destinées.
Organiser trois niveaux de liberté
Une structure simple peut séparer les fondations, les variantes et les exceptions. Il s’agit d’une proposition de méthode, à adapter à la taille et aux besoins du site.
| Niveau | Contenu | Responsabilité |
|---|---|---|
| Fondations | Typographie, couleurs, repères et comportements | Cohérence de l’ensemble |
| Variantes prévues | Tailles, compositions et thèmes documentés | Réponse à des cas récurrents |
| Exception justifiée | Scène ou composition propre à un contenu | Conception et maintenance explicites |
Une exception n’a pas besoin de réinventer toutes les commandes. Les modèles de composants ARIA du W3C donnent des références pour certains comportements interactifs. Une apparence particulière peut conserver des attentes familières de navigation et de commande.
Le système gagne ainsi à séparer ce qui s’exprime librement et ce qui doit rester prévisible. Une scène peut surprendre visuellement sans obliger le visiteur à réapprendre comment fermer un panneau ou rejoindre un lien.
Exemple pédagogique : un site culturel aux projets très différents
Imaginons une institution fictive qui présente des expositions, des performances et des archives. Une grille unique rendrait certains contenus artificiellement semblables. Des pages entièrement indépendantes créeraient au contraire une maintenance difficile et une navigation dispersée.
Le système partage les informations pratiques, les commandes, les styles de texte et les repères d’identité. Les expositions disposent d’une variante centrée sur les œuvres ; les performances d’une composition temporelle ; un projet majeur reçoit une scène spécifique, avec son propre dossier de réalisation.
Trois niveaux de liberté
- FondationsIdentité, hiérarchie et comportements communs forment le socle.
- VariantesDes compositions documentées répondent aux besoins récurrents.
- ExceptionsUne création propre au contenu possède un objectif et un responsable.
- Contrôles partagésLecture, commandes et maintenance restent vérifiées à chaque niveau.
La scène particulière conserve les mêmes exigences de lecture et de commande. Son propriétaire, ses médias et ses règles de mise à jour sont précisés. L’exception peut rester unique si elle ne répond qu’à ce projet ; elle n’a pas besoin d’être généralisée artificiellement à toutes les pages.
Faire évoluer le système à partir des usages réels
Lorsqu’une demande apparaît, posez trois questions : une variante existante répond-elle au besoin, une nouvelle variante sera-t-elle réutilisée, ou le contenu justifie-t-il une exception ? La réponse doit tenir compte du sens, du coût et de la fréquence attendue.
Un composant trop paramétrable peut devenir difficile à comprendre et à tester. À l’inverse, dupliquer un même comportement pour chaque page rend les corrections coûteuses. Il faut trouver le niveau de généralisation utile, puis le réexaminer à mesure que les contenus arrivent.
Documentez une exception avec son objectif, ses dépendances, ses limites éditoriales et ses contrôles. Précisez ce qui doit être vérifié lorsque les textes ou les médias changent. Une page exceptionnelle doit pouvoir vivre après la livraison, même si elle demande une intervention spécialisée.
La recette du système doit inclure des exemples ordinaires et des cas limites. Vérifiez qu’une correction de fondation n’abîme pas une page spécifique, et qu’une exception ne modifie pas involontairement les autres. La cohérence se maintient par ces relations contrôlées, pas par le seul nombre de composants disponibles.
Questions fréquentes
Faut-il un design system complet pour un petit site ?
Pas nécessairement. Quelques fondations, des composants récurrents et des règles de variation peuvent suffire. Le système doit rester proportionné au contenu, aux intervenants et aux évolutions prévues. Son utilité se mesure à la clarté des décisions et à la facilité de maintenance, pas à la taille de sa documentation.
Quand une exception doit-elle devenir un composant réutilisable ?
Lorsqu’un besoin comparable revient et que la structure peut être partagée sans déformer les contenus. Il faut examiner les usages réels avant de généraliser. Une scène très spécifique peut rester unique, tandis qu’un comportement récurrent mérite une règle commune et une couverture de tests adaptée.
Les pages peuvent-elles utiliser des typographies différentes ?
Cela dépend du langage de marque et du rôle de ces variations. Il faut définir les usages, les limites et les relations entre les familles. Une liberté typographique contrôlée peut servir une programmation culturelle ; une accumulation sans règle risque de rendre l’ensemble difficile à identifier et à maintenir.
Sources
LVX : organiser la cohérence et la liberté
LVX peut définir les fondations de l’identité numérique, puis identifier les contenus qui demandent une expression particulière. Le système distingue les règles réutilisables des scènes qui méritent une conception propre. Cette démarche permet de discuter la singularité avec ses conditions de production et de maintenance. Le client dispose d’un cadre clair pour enrichir son site, tandis que la direction artistique conserve une place pour les projets importants, les changements de rythme et les compositions qui donnent du caractère à l’ensemble. Découvrir notre approche.
