Landing : direction visuelle
Le style provient du profil de l’entreprise et du profil de son client, pas du goût du moment.
Règle absolue (Iron Law)
AUCUNE CONSTRUCTION SANS 2 OU 3 DIRECTIONS PRÉSENTÉES
ET UNE CHOISIE PAR FELIPE.
TOUT VISUEL, INTERNE OU EXTERNE, PASSE PAR frontend-design.
Première action : node check-gate.js --client <nom> --avant-de direction-visuelle ; lire intégralement le fichier 01 et le fichier inventaire-assets.md ; node check-assets.js --root <client> --phase direction-visuelle. Ne pas utiliser la mémoire de la conversation.
Fonction de porte (Gate Function)
- Dérivez les axes des deux profils (
references/profils-et-styles.md). - SOUS‑COMPÉTENCE REQUISE : Utilisez frontend-design:frontend-design pour chaque direction.
- Chaque direction apporte : nom, idée en une phrase, typographie (display et texte, auto-hébergées), palette avec hex, structure des sections, hero, assets par id (
A-nnn) et ce qui manque, risque. - Pour chaque palette, remplissez
paires-contraste.jsonet exécuteznode check-contrast.js --css <css> --pairs <paires>; ne présentez pas de palette refusée. - Recommandez une direction, en liant la recommandation aux deux profils.
- Attendez le choix de Felipe. Enregistrez
direction-visuelle.md(frontmatter,choisie) et approuvez.
Landing nouvelle : sans mockup, construisez la page (ça demande le même travail). Ajout à quelque chose d’existant : mockup d’abord ; une fois approuvé, vérifiez point par point ce qui est construit par rapport à ce qui a été montré. Une amélioration justifiée en cours de construction est autorisée et va dans le registre de feedback.
Révision visuelle (avant la porte de publication)
Hiérarchie et typographie cohérentes · 375 et 1280 px, capture de la fenêtre (pas fullPage), après avoir fait défiler lentement · contraste (check-contrast) · états de focus, survol, erreur, vide et chargement · espacement, composants et couleurs cohérents · CTA adaptée au métier · la page implémentée, pas le mockup · check-page.
Drapeaux rouges : arrêtez
- Choisir le style « qui semble le meilleur » et construire
- CSS générique pour un écran interne « parce que c’est seulement pour elle »
- Présenter une seule direction
- Asset cité sans id ou chemin inventé
| Rationalisation | Réalité |
|---|---|
| « Un interne n’a pas besoin de design » | L’écran que le client utilise tous les jours fait partie de la marque |
| « Felipe a dit « ce que vous trouvez le mieux » » | C’est une délégation de la recommandation, pas du choix |
| « Une direction est plus rapide » | Deux ou trois avec recommandation ont été plus rapides que discuter par texte |
| « La photo dont j’ai besoin doit exister » | Notez le besoin ; ne présumez jamais du fichier |