À propos de ce modèle
Cette fiche présente RIVR en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La page affiche son propre titre, « Fluid Asset Streams », et la composition est construite autour de ces mots exacts. La palette repose sur gris #969BA2 en fond, et la page est composée en Helvetica. La livraison est en React et Tailwind CSS, capturée en 800x599 pour que le cadre soit fixé avant la première ligne de code. Cette référence s’adresse à un produit fintech qui veut un premier écran réglé avant le début du build.
Conçu pour
- Équipes internes qui étendent ce design de section hero et ont besoin de retrouver une typographie de 12px à 80px et des pas d’espacement de 14px à l’identique dans les nouveaux blocs.
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour un produit fintech, sans design system derrière.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 8 089 caractères comme point de départ.
Ce qui est inclus
- Rangée du haut, une action. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en Helvetica, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. La barre se pose sur la composition 800x599 sans fond propre, la vidéo court donc bord à bord en dessous. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Les chiffres portés jusqu’au build. Rien dans la mise en page n’est laissé à l’impression, le brief cite une typographie de 12px à 80px et des pas d’espacement de 14px et le build doit atteindre ces valeurs. La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée.
- Une rangée de chiffres plutôt qu’une affirmation. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer section hero en liste de fonctionnalités. Les libellés se placent sous les chiffres au plus petit palier du brief, la rangée se lit donc comme une donnée et non comme un ornement.
- Une navigation sans fond. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Testez la barre sur vos propres médias avant de lui donner un fond.
Animation et interaction
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. Quelques états fiables valent mieux qu’une longue liste d’effets.
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 800x599 reste immobile et seuls les éléments qui vous répondent bougent. Seuls les éléments qui répondent au pointeur bougent.
Le gain pour un produit fintech
Là où un template remplit le premier écran de modules, le design de section hero se sert de la navigation, la ligne de statistiques, la liste de fonctionnalités et le clip de fond et s’arrête. La différence se voit dans une typographie de 12px à 80px et des pas d’espacement de 14px, rien n’est gonflé pour occuper l’espace. RIVR énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Comment RIVR 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, la ligne de statistiques, la liste de fonctionnalités et le clip de fond devant le lecteur et retient le reste. Un lecteur fintech reçoit l’offre avant les options.
Les timings derrière section hero
L’animation est une courte liste plutôt qu’un système. Le brief nomme des états de survol et de clic, et le reste de la page reste immobile. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Quelle est la longueur du prompt derrière RIVR?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x599, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que RIVR 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.
Comment gérer les médias de RIVR dans un projet client?
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 800x599.
