À propos de ce modèle
Cette fiche présente Bold Studio en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. « FSP DEMO - PODIUM Sharp 4.11 » est la ligne que la mise en page doit porter. La palette est rouge #A60D29 en fond et blanc #F6E9EB pour le texte, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 640x474 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 100ms de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 6 067 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Bold Studio.
- Ce design de section hero convient aux équipes growth qui vont tester le titre en A/B sans toucher à Inter.
- Si vous redessinez le design de section hero de Bold Studio avec votre propre fonte, gardez les proportions de Inter, sinon l’échelle de tailles ne correspond plus.
Ce qui est inclus
- La barre partage la grille. La navigation tient sur une seule rangée, sans second niveau en dessous. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 640x474 sans fond propre, la vidéo court donc bord à bord en dessous.
- Fluide là où il faut. La typographie est dimensionnée avec un clamp entre 11px et 30px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. L’échelle étant bornée, la ligne display ne saute jamais d’un breakpoint à l’autre.
- L’échelle chute nettement. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. L’interlignage suit les paliers de taille plutôt qu’une valeur globale unique.
- Une navigation sur une seule ligne. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre.
Animation et interaction
Une durée pour les contrôles
Survol, appui et focus se règlent tous en 100ms, et c’est ce qui rend l’interface immédiate. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition.
Le retour sur les contrôles
Chaque élément interactif ne fait qu’une chose (des états de survol sur les boutons et les liens plutôt que sur chaque carte), et c’est ce qui rend les états prévisibles. Le survol et le focus sont spécifiés ensemble, donc la souris et le clavier reçoivent la même information. Si un état ne confirme pas une action, supprimez-le.
Comment Bold Studio ordonne la première lecture
Là où une page marketing empile les preuves sous la ligne de flottaison en espérant, le design de section hero met la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond devant le lecteur et retient le reste. Un lecteur agence reçoit l’offre avant les options.
Pourquoi cette composition fonctionne pour agence
Vous pourriez reconstruire ceci en pile de cartes séparées et ne perdre que l’argument. Le design de section hero se lit plutôt comme une seule décision, la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond dans une séquence unique. Bold Studio énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Adapter section hero à votre marque
Un template vous demande d’accepter sa mise en page, cette référence vous demande de la garder en changeant tout l’intérieur. La différence est que le sujet bouge alors que des pas d’espacement de 30px et des transitions de 100ms ne changent pas. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Questions fréquentes
Le prompt de Bold Studio est-il une spécification aboutie ou un simple point de départ?
Comptez 6 067 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Bold Studio a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Puis-je publier une page reconstruite d’après Bold Studio sans mentionner la source?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 640x474.
