Concevoir une page web ou un flux
Lisez d'abord web-craft. Un DESIGN.md existant ou un système de design fait autorité : suivez-le, n'inventez pas une nouvelle direction pour un produit existant.
1. Direction avant le code (nouveaux produits et nouvelles grandes surfaces)
Décidez et notez brièvement :
| Décision | Réponse |
|---|---|
| Utilisateur et tâche | Quelle tâche cette surface facilite-t-elle ? |
| Priorité | Qu'est-ce qui doit être vu et fait en premier ? |
| Composition | Flux éditorial, mise en page fractionnée, espace de travail dense, vitrine produit, ou autre chose |
| Typographie | Caractère, échelle, longueur de ligne, couverture des scripts pour chaque langue prévue |
| Matériel visuel | Images réelles du produit, photographie, illustration, diagrammes ou typographie dominante |
| Surface et densité | Bordures, teinte, espacements, densité des données, rythme de la page |
| Motion | Retour fonctionnel, plus une motion narrative uniquement là où le produit en a besoin |
| Détail signature | Un ou deux détails cohérents qui soutiennent la marque |
Références : la marque existante prime, puis ce que l'utilisateur a fourni. Pour une nouvelle direction, choisissez quelques sources adaptées et dites ce que chacune apporte (densité, photographie, rythme, interaction, type). Les adjectifs comme « moderne » ou « propre » ne sont pas une décision. Ne copiez pas les logos, le texte ou une composition entière. Les options pour un nouveau produit doivent différer en composition et en priorité, pas seulement en couleur. Détails : references/direction-and-references.md, references/composition.md, references/typography.md.
2. Tokens
La couleur (sémantique, claire et sombre), l'échelle typographique, l'espacement, le rayon, l'élévation et la motion vivent sous forme de tokens dans un seul endroit et se mappent sur le thème du kit. L'élévation est limitée : bordures et teinte de surface d'abord, quelques tokens d'ombre à faible opacité sur une seule couche pour les couches flottantes, des surfaces plus claires au lieu d'ombres en mode sombre, et pas de box-shadow animé. Détails : references/tokens-color-elevation.md.
3. Copie et hiérarchie
Chaque texte a un seul rôle. Pas de sourcil (eyebrow) au-dessus d'un titre par défaut (uniquement pour le progrès, une date, un objet parent ou un contexte juridique ; les étiquettes de niveau comme « Premium » deviennent un badge sur la fonctionnalité). Les sous-titres restent uniquement pour la portée, le résultat, le risque ou un fait concret. Les niveaux de titre suivent la structure, pas la taille de police. Les espaces réservés ne remplacent jamais les étiquettes. Les boutons disent ce qui se passe. Détails : references/copy-hierarchy.md.
4. États
Construisez une matrice d'états pour chaque surface de données et formulaire : chargement initial (squelette adapté à la mise en page, retardé pour éviter un flash, statique en mouvement réduit), vide (première utilisation vs aucun résultat), erreur avec reprise et données conservées, rafraîchissement, erreur de pagination, soumission, succès, interdit, non trouvé, hors ligne. Détails : references/states.md.
5. Formulaires
Validez au blur, re-validez lors du changement une fois qu'une erreur apparaît, vérifications asynchrones anti-rebond. Lors de la soumission avec erreurs : concentrez le premier champ invalide, faites-le défiler dans la vue sous tout en-tête collant, ouvrez la section ou étape réduite qui le contient, et affichez un résumé d'erreur sur les longs formulaires. Les messages disent ce qui ne va pas et comment le corriger, se placent à côté du champ et sont liés avec aria-describedby. Le bouton de soumission est désactivé uniquement pendant l'envoi. Les erreurs de champ côté serveur atterrissent sur leurs champs avec le même défilement et focus. Détails : references/forms.md.
6. Motion
Remplissez la matrice de motion (references/motion-matrix.md) avant de choisir une bibliothèque :
- Boutons et liens : survol là où le survol existe, pressé, focus-visible, chargement, désactivé.
- Boîtes de dialogue, panneaux, menus, popovers, toasts : toujours une animation d'entrée et de sortie (opacité plus une petite échelle ou translation, la sortie se termine avant le démontage), piège de focus et retour, fermeture. Détails :
references/overlays.md. - Listes : insertion, suppression et réorganisation sont compréhensibles.
- Graphiques : un court dessin à la première vue, transitions lors du changement de données, aucune au-dessus d'une taille de données mesurée, aucune sous mouvement réduit ; les infobulles accessibles au clavier et une alternative sous forme de tableau. Détails :
references/charts.md. - Récit marketing : limité, spécifique au produit, ne cache jamais le contenu derrière une animation.
La durée, l'easing et la distance proviennent des tokens. Toutes les pages ne reçoivent pas le même fondu-enchaîné échelonné. Pas de délai artificiel sur les formulaires ou les écrans de données. Le mouvement réduit est géré de manière centralisée et couvre le CSS, les bibliothèques et la vidéo.
7. Responsive
Les points de rupture suivent le contenu. Définissez ce que font la navigation, les filtres, les tableaux, les actions collantes, les boîtes de dialogue et les popovers sur un écran étroit. Vérifiez 320 px, le texte long traduit, le zoom à 200 %, le tactile et le clavier. Une boîte de dialogue web ne devient pas par défaut une bottom sheet React Native. Détails : references/responsive.md.
8. Vérifiez le résultat
Regardez-le dans un navigateur aux largeurs mobile et desktop, dans les deux thèmes et les deux langues, uniquement au clavier, et avec le mouvement réduit activé. Une capture d'écran statique ne permet pas de vérifier la motion ; interagissez avec elle.
Lorsqu'un kit est réutilisé sur des produits très différents, exécutez le test de divergence dans references/pilot-divergence.md.