À propos de ce modèle
Wellness Balance est la référence section hero pour un produit de santé ou de bien-être, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Elle ouvre sur « Discover our new plant-based supplements for daily balance and clean energy » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à blanc #ECEDEC en fond et blanc #FEFDF9 pour le texte, composée en DM Sans. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. La page s’en tient à 0.8s de transitions et cubic-bezier(0.16, 1, 0.3, 1). C’est la référence qu’il faut pour un design de section hero destiné à un produit de santé ou de bien-être, quand le premier écran doit sembler intentionnel.
Conçu pour
- Ce design de section hero est fait pour les agences qui ont besoin que le cadre 640x472 survive à trois séries de retours client.
- Les responsables marketing qui héritent de ce design de section hero utiliseront une typographie de 28px à 35px et des pas d’espacement de 110px pour vérifier qu’une réécriture a gardé l’échelle.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 7 840 caractères comme point de départ.
Ce qui est inclus
- La barre partage la grille. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en DM Sans, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 640x472 sans fond propre, la vidéo court donc bord à bord en dessous. Limitez-vous à quatre ou cinq liens, la rangée est dimensionnée pour ce nombre.
- L’échelle est bornée, pas étagée. Le haut de l’échelle est fluide (un clamp entre 28px et 35px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. L’échelle étant bornée, la ligne display ne saute jamais d’un breakpoint à l’autre.
- Repli des liens à une largeur. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 640x472.
- Des tailles fixées par le brief. Les valeurs sont la spécification, une typographie de 28px à 35px, des pas d’espacement de 110px, des transitions de 0.8s et un easing cubic-bezier(0.16, 1, 0.3, 1), relevées sur 640x472 et non déduites d’une capture d’écran. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
Animation et interaction
L’interaction est sur les contrôles
La couche interactive est petite et prévisible, un slider qui fait défiler le contenu par pages à la demande. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Les états sont nommés dans le brief, donc la page ne dépend pas d’une bibliothèque d’effets de survol.
Rythme court, timings cohérents
L’animation des contrôles est courte et répétable, 0.8s à chaque changement d’état. L’easing est spécifié avec la durée (0.8s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Reprenez ces durées dans votre intégration.
Ce qui fonctionne dans section hero
Il n’y a qu’une promesse sur cette page, maintenue en place par une typographie de 28px à 35px et des pas d’espacement de 110px. « Discover our new plant-based supplements for daily balance and clean energy » fait ce travail dès la première image. Rien sous la ligne de flottaison n’a à porter l’offre en plus. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
Par où commencer dans Wellness Balance
S’il ne vous reste qu’un après-midi, changez le titre et le libellé d’action, ne touchez pas à une typographie de 28px à 35px et des pas d’espacement de 110px, et vous avez une page qui semble voulue. Une autre marque peut réutiliser tout le cadre.
Ce qui bouge dans Wellness Balance
Le compromis est que rien ici ne récompense un second regard par son animation. Ce qui est récompensé, c’est l’ordre de lecture, 0.8s de transitions et un titre mot par mot confirmant un état au lieu de le décorer. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que contient réellement le brief derrière Wellness Balance?
Comptez 7 840 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.
Puis-je reconstruire ce type de section hero de Wellness Balance avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Wellness Balance 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.
Quelle part de Wellness Balance est animée?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 0.8s avec cubic-bezier(0.16, 1, 0.3, 1). Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
