coastdigitalgroup/coastai-skills

Système de Conception Hero

Objectif

Le Système de Conception Hero propose une méthodologie pour concevoir l'espace spatial le plus critique d'une page web : la section d'introduction. Alors que hero-section-optimization dans la catégorie Croissance se concentre sur le message et la conversion, ce système de conception se concentre sur l'anatomie visuelle, la composition spatiale et le calque du hero. Il garantit que le contenu et les visuels travaillent en harmonie pour établir l'autorité de la marque, maintenir une hiérarchie visuelle et guider l'œil vers l'action principale sur tous les types d'appareils.

Cas d'Utilisation

• Concevoir le point d'entrée principal des pages d'accueil et des pages d'atterrissage.
• Créer des introductions "Sous-Hero" pour les pages de produits ou de services de niveau profond.
• Établir un modèle d'introduction cohérent sur un site multi-pages.
• Gérer le calque complexe de texte, d'images et d'éléments interactifs.
• Concevoir des adaptations responsives pour des introductions immersives et riches en médias.

Quand NE PAS Utiliser

• Navigation Globale du Site : Utiliser site-navigation-system pour l'en-tête persistant.
• Orientation au Niveau de la Page : Utiliser page-header-system pour les introductions à forte utilité (ex : tableaux de bord ou paramètres) qui privilégient les métadonnées à l'impact.
• Articles de Contenu : Lorsque l'accent est mis sur un simple titre et une signature ; utiliser la typographie standard ou page-header-system.
• Modaux ou Superpositions : Utiliser overlay-and-dialog-system pour les couches d'interface temporaires.

Entrées

1. Priorité du Contenu : Le Titre (H1), le Sous-titre et l'Appel à l'Action principal.
2. Actifs Visuels : Photographie, illustrations, vidéo ou motifs abstraits.
3. Mode de Mise en Page : S'agit-il d'une composition Fractionnée, Centrée ou Pleine largeur ?
4. Système d'Espacement Fluide : Pour des marges, un remplissage et un rythme vertical cohérents.
5. Palette de la Marque : Pour les traitements d'arrière-plan et la lisibilité des superpositions.

Sorties

1. Spécification de l'Anatomie du Hero : Définition des zones de contenu (Introduction, Contenu principal, Action, Visuel).
2. Plan de Composition : Règles d'alignement (Gauche vs Centré) et relation avec les médias.
3. Stratégie de Calque Visuel : Règles pour les superpositions de texte, les écrans et la profondeur.
4. Carte de Transformation Responsive : Comment le hero s'adapte des fenêtres paysage aux fenêtres portrait.

Flux de Travail

1. Sélectionner un Modèle de Composition

Choisir un modèle en fonction de la relation entre le contenu et les médias :

• Le Fractionné (50/50) : Texte d'un côté, visuel de l'autre. Idéal pour la clarté et les produits techniques.
• La Pile Centrée : Tout le contenu centré, souvent avec une image ou une vidéo en arrière-plan. Idéal pour les déclarations percutantes et à fort impact.
• Le Contenu Encadré : Le contenu se trouve dans une boîte contenue sur un arrière-plan pleine largeur. Idéal pour une sensation premium ou éditoriale.
• La Superposition Décalée : Le texte chevauche partiellement un élément visuel pour créer de la profondeur.

2. Définir la Hiérarchie Spatiale (Anatomie)

Appliquer visual-hierarchy-system aux zones du hero :

• Introduction/Sourcil (Optionnel) : Une petite étiquette ou un libellé au-dessus du H1 pour le contexte.
• Le Titre (H1) : Le plus grand élément de texte de la page.
• Le Sous-titre : Un texte de soutien fournissant des détails (2-3 lignes maximum).
• La Zone d'Action : Boutons d'appel à l'action principal (et secondaire facultatif).
• L'Ancre (Visuel) : Le point focal qui soutient le récit.

3. Établir le Calque et la Lisibilité

Si vous utilisez des médias en arrière-plan, assurez-vous que le texte est lisible :

• Écrans et Dégradés : Appliquer une Couche de Lisibilité (de imagery-and-media-system) pour garantir un contraste de 4,5:1.
• Traitements de Flou : Utiliser des filtres d'arrière-plan pour adoucir les arrière-plans chargés derrière le texte.
• Profondeur : Utiliser des ombres ou des décalages subtils pour distinguer le "plan" du contenu du "plan" de l'arrière-plan.

4. Appliquer le Rythme Vertical et l'Espacement

Utiliser fluid-spacing-system pour définir une "marge de respiration" :

• Remplissage Haut/Bas : Assurer que le hero a une hauteur verticale suffisante (généralement de 60vh à 90vh sur ordinateur de bureau).
• Écarts Internes : Utiliser un espacement cohérent entre le H1, le Sous-titre et les CTA (généralement --space-m à --space-xl).

5. Planifier le Pivot Responsive

Planifier comment la mise en page se transforme pour les écrans plus petits :

• Empilement : Les mises en page fractionnées s'empilent généralement avec le visuel en haut (pour le contexte) ou en bas (pour prioriser le H1).
• Changement de Ratio : Les images d'arrière-plan doivent passer du paysage (16:9) au carré ou portrait (1:1 ou 4:5) pour maintenir les points focaux.
• Mise à l'Échelle du Texte : Assurer que le H1 se réduit élégamment en utilisant fluid-typography-system.

Règles de Décision

• La Règle du H1 Unique : Le hero DOIT contenre le H1 unique de la page.
• Clarté avant Complexité : Si l'actif visuel rend le texte même légèrement difficile à lire, privilégier un arrière-plan plus simple ou un écran plus épais.
• La Zone "Pouce" : Sur mobile, s'assurer que les CTA sont placés dans les 2/3 inférieurs de l'écran pour une portée facile.
• Poids Visuel : Le H1 et le CTA principal doivent être les deux éléments visuellement les plus distincts du hero.
• Alignement du Point Focal : Dans les mises en page fractionnées, le "Sujet" de l'image doit être tourné vers le contenu, pas loin de lui.

Contraintes

• Accessibilité : Le texte sur les images doit respecter le contraste WCAG AA (4,5:1). Les titres doivent utiliser des balises <h1> sémantiques. Si le hero inclut une vidéo ou une animation en arrière-plan en lecture automatique, fournir un contrôle de pause visible (WCAG 2.2.2) et respecter prefers-reduced-motion.
• Responsivité : Le hero ne doit jamais provoquer de débordement horizontal. Les mises en page doivent être fluides, non à hauteur fixe, pour s'adapter aux longueurs de texte variables. Éviter les verrous 100vh sur mobile, qui se comportent mal avec la barre d'outils dynamique du navigateur — préférer 100dvh ou une hauteur minimale avec un remplissage fluide.
• Performance : Les vidéos en arrière-plan doivent être muettes et avoir une image "poster" de secours pour les connexions lentes.

Modèles d'Échec Courants

• L'"Échec de Contraste" : Placer du texte blanc sur une image chargée ou claire sans écran, rendant le titre illisible.
• L'Enfouissement de l'Action : Mettre le CTA trop bas pour qu'il soit coupé "sous la ligne de flottaison" sur les ordinateurs portables plus petits.
• La Surcharge Médiatique : Utiliser une vidéo d'arrière-plan trop distrayante qui empêche l'utilisateur de lire la proposition de valeur.
• Le "Tassement Mobile" : Forcer une mise en page fractionnée de bureau sur mobile, résultant en un texte minuscule et une image à l'étroit.

Critères de Validation

• Le hero contient un H1 clair qui est l'élément de texte le plus important.
• Le CTA principal est visuellement distinct et suit interactive-state-system.
• Les superpositions de texte respectent les exigences de contraste WCAG AA (4,5:1).
• La composition spatiale (ex : Fractionné, Centré) est cohérente avec les objectifs de la marque.
• L'espacement vertical (remplissage/écarts) utilise des jetons du système d'espacement fluide.
• La mise en page reste fonctionnelle et lisible sur les fenêtres mobiles.
• Les points focaux dans les images sont préservés lors de l'empilement responsive.
• La vidéo/l'animation en lecture automatique dispose d'un contrôle de pause et respecte prefers-reduced-motion.