À propos de ce modèle
Immersive Ocean conserve sa trace de décision, puisque le brief de section hero fait 4 030 caractères. Elle ouvre sur « Shaping visual narratives, one pixel at a time » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à bleu profond #000410 en fond, gris #C2CFCA pour le texte et sarcelle #0E4154 pour les accents, composée en Geist. La livraison est en React et Tailwind CSS, capturée en 640x478 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à cubic-bezier(0.16,1,0.3,1). Traitez-la comme le brief de section hero pour une agence ou un studio, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Si l’animation doit sauter, le design de section hero reste lisible, des sections de 100vh et des pas d’espacement de 80px assurant la hiérarchie.
- 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 Immersive Ocean.
- Cette page est pensée pour une équipe qui a déjà Geist en place, un export 640x478 prêt et un créneau de build cette semaine.
Ce qui est inclus
- Une barre sans superflu. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #0E4154, dimensionnée pour rester discrète face au reste de la page. Une surcouche mobile prend le relais sous le breakpoint tablette. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #0E4154 est le seul élément de la barre à porter du gras. Testez la barre sur vos propres médias avant de lui donner un fond.
- Le brief nomme les pas. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des sections de 100vh, des pas d’espacement de 80px et un easing cubic-bezier(0.16,1,0.3,1)). La liste est assez courte pour être vérifiée élément par élément. Emportez les valeurs avec la mise en page.
- Une famille, deux rôles. Avec Geist aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution.
- Rangée du haut, une action. La barre se pose sur la composition 640x478 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Les durées du brief
Une seule durée couvre les interactions (0 avec cubic-bezier(0.16,1,0.3,1)), et c’est ce qui fait que survol et pression se lisent comme un seul système. La même durée est réutilisée sur tous les contrôles, ce qui garde les interactions dans un seul système.
L’interaction est 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. Parce que les états sont simples, ils se portent dans n’importe quel système de composants. Quelques états fiables valent mieux qu’une longue liste d’effets.
Le réagencement de section hero
La mise en page étroite est conçue, pas héritée, et la hiérarchie survit à la réorganisation, la section est tenue à 100vh et la navigation se replie en menu mobile à chaque largeur. Les deux états sont décrits dans le même brief.
Par où commencer dans Immersive Ocean
S’il ne vous reste qu’un après-midi, changez le titre et le libellé d’action, ne touchez pas à des sections de 100vh et des pas d’espacement de 80px, et vous avez une page qui semble voulue. Votre accent doit passer le même test de contraste que celui de la référence.
L’ordre de section hero
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 badge d’annonce, la ligne de statistiques, la liste de fonctionnalités et le clip de fond devant le lecteur et retient le reste. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Que recevez-vous en copiant le brief de Immersive Ocean?
Comptez 4 030 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.
Faut-il React et Tailwind CSS pour reconstruire Immersive Ocean?
La fiche indique React et Tailwind CSS pour la provenance, parce que Immersive Ocean 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 Immersive Ocean 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 640x478.
