Organiser un système de design cohérent pour son site

Partir de pages et composants réels

Inventoriez les titres, cartes, boutons, formulaires, messages et espaces utilisés sur les pages importantes. Repérez les variantes qui remplissent le même rôle et celles qui répondent à un besoin distinct. Fusionnez les doublons avant d’ajouter un nouveau composant.

Documentez pour chaque élément son usage, son contenu attendu et les états nécessaires : normal, focus, erreur, chargement ou indisponible. Une carte de guide et une carte de service peuvent partager une base tout en gardant des informations différentes.

• Composants inventoriés sur de vraies pages.
• Doublons rationalisés.
• États utiles décrits.

Relier style et signification

Définissez une hiérarchie de titres, de texte, d’espacement et de couleur. Un bouton primaire doit annoncer une action prioritaire de manière cohérente ; sa couleur seule ne doit pas être le seul indice. Préservez les contrastes, la taille du texte et le focus visible dans chaque variante.

Vérifiez aussi les langues longues et les caractères différents. Une étiquette allemande ou une direction arabe peut déborder là où le français passe. Le guide multilingue rappelle ces contraintes éditoriales et d’interface.

Évaluez une paire de couleurs et son usage, pas une couleur isolée du nuancier. Exemple pédagogique calculé en sRGB opaque : #777777 sur #FFFFFF donne environ 4,478:1 ; ce résultat reste inférieur au minimum de 4,5:1 du critère WCAG 1.4.3 pour le texte hors exceptions. Le W3C précise de ne pas arrondir le résultat pour décider : afficher 4,5 avec une seule décimale ne transforme pas cet échec en réussite. #767676 sur le même blanc donne environ 4,542:1 et franchit ce seuil précis. Ce contrôle ne démontre pas la conformité globale d’un composant.

Le seuil de 3:1 prévu pour le grand texte n’est pas déclenché par un nom de style « grand titre ». Le critère définit notamment 18 points ou 14 points en gras ; vérifiez la taille effectivement rendue et les autres conditions applicables. Documentez le rôle du texte, la paire premier plan/fond et l’état essayé. Pour une transparence, un dégradé ou une image de fond, les deux codes d’un nuancier ne décrivent plus nécessairement les couleurs réellement adjacentes. Conservez une marge de lisibilité et rejouez les variantes au lieu de valider définitivement un jeton de couleur seul.

• Rôle visuel cohérent.
• Contraste et focus vérifiés.
• Variantes testées avec plusieurs langues.

Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

Éprouver les composants en situation

Placez les éléments dans des pages chargées de vrai texte et de vraies images. Une carte élégante avec deux mots peut échouer avec un titre de trois lignes. Testez largeur mobile, zoom, erreur de formulaire et état vide avant de considérer un composant prêt.

Associez aux exemples des critères de validation simples. Le guide de vérification aide à transformer les règles en contrôles de parcours plutôt qu’en capture d’écran isolée.

• Contenus longs et courts testés.
• États vides et erreurs visibles.
• Mobile et zoom contrôlés.

Faire évoluer la charte sans dérive

Attribuez un responsable aux décisions de design. Lorsqu’une variante est ajoutée, expliquez le besoin qu’elle couvre et où elle peut être utilisée. Une exception répétée signale peut-être qu’une règle générale doit changer.

Après un changement de typographie, d’espacement ou de couleur, vérifiez les pages représentatives et les autres langues. Conservez des exemples à jour plutôt qu’une documentation volumineuse mais obsolète. Le guide de maintenance aide à organiser ces contrôles.

• Décisions et usages documentés.
• Exceptions suivies.
• Pages représentatives revues après changement.

Documenter le comportement des variantes

À côté des couleurs et espacements, décrivez les contrats de chaque commande : navigation ou action, état sélectionné, indisponibilité et annulation. Un bouton visuellement identique peut ouvrir un complément ou envoyer un formulaire ; cette différence doit figurer dans la documentation et dans les tests.

Conservez un exemple avec texte long, erreur et absence de donnée. Reliez chaque variante aux pages qui l’utilisent pour savoir quoi recontrôler après une modification. Si la variante change le fonctionnement au clavier, traitez-la comme un changement de comportement et pas uniquement comme une nouvelle apparence.

Choisir les liens, boutons et actions d’une interface · Choisir et tester des onglets dans une interface web · Organiser les contenus avec des accordéons et des détails