Créer un système de design utile et maintenable
Un système de design relie les règles visuelles aux composants et à leurs usages. Commencez par les éléments répétés et les problèmes constatés. La valeur tient à des décisions cohérentes et maintenues, pas au nombre de composants dessinés.
Photo : Glenn Carstens-Peters / Unsplash · Photographie de contexte ; aucune affiliation à FDS n’est sous-entendue.
Inventorier les incohérences réelles
Comparez des pages représentatives sur téléphone et grand écran. Relevez variations de titres, marges, boutons, formulaires et cartes. Associez chaque variation à une justification ou à un défaut.
Regroupez les éléments par fonction. Deux cartes différentes peuvent répondre à des besoins différents ; deux boutons qui réalisent la même action demandent une règle commune.
Définir les règles de base
Fixez largeur de lecture, échelle typographique, espacements, couleurs et points de rupture. Testez les titres longs, les traductions et le zoom. Conservez des unités et variables explicites plutôt que des corrections isolées.
Séparez texte courant, légende et contrôle interactif. Une légende discrète ne doit pas imposer une taille minuscule à un filtre. Vérifiez aussi les contrastes et la visibilité du focus.
Documenter les états et comportements
Décrivez état normal, survol, focus, désactivation, erreur et chargement lorsque pertinents. Pour les formulaires, reliez libellés et messages aux champs. Pour les tableaux, préservez la lecture sur petit écran.
Privilégiez les éléments HTML adaptés et vérifiez clavier et technologies d’assistance. Les pratiques ARIA servent à des interactions définies ; copier des attributs ne remplace pas le comportement attendu.
Organiser adoption et évolution
Publiez exemples, règles d’emploi et contre-exemples. Désignez qui accepte une variante et qui maintient son code. Testez les changements sur plusieurs pages avant de généraliser.
Prévoyez comment retirer un ancien composant et suivre les pages restantes. Un système devient fragile lorsque documentation et production divergent. Incluez la vérification visuelle dans les changements partagés.
Une fiche à conserver avec la décision
| Élément | Preuve |
|---|---|
| Fondations | Variables et exemples responsive |
| Composant | États, clavier et erreurs |
| Maintenance | Responsable et évolution |
Questions fréquentes
Faut-il commencer par une bibliothèque complète ?
Commencez par les éléments répétés sur les parcours importants. Faites adopter une petite base cohérente avant de multiplier les variantes.
Références
W3C · ARIA Authoring Practices
La grille pratique est une synthèse éditoriale à adapter à votre service. Elle ne constitue ni une certification ni un résultat d’audit.