À propos de ce modèle
Portal est une référence de travail pour un produit IA ou SaaS, un exemple de section hero entièrement mesuré et prêt à reproduire. La couleur se réduit à neutre #F2F2EE en fond, assombri #192837 pour le texte et assombri #7342E2 pour les accents, composée en Helvetica Now Display. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. La page s’en tient à 0.3s de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 5 718 caractères est la partie qui se transfère à votre page.
Conçu pour
- Reprenez le cadre 640x474 et des sections de 100vh et des pas d’espacement de 24px de ce design de section hero avant tout le reste.
- Studios qui remettent ce design de section hero à un client et doivent vérifier #7342E2 contre #F2F2EE avant d’appliquer la charte.
- Les responsables design qui comparent des références SaaS utiliseront neutre #F2F2EE et assombri #7342E2 pour départager.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Les liens tiennent sur une ligne à un seul corps, et l’action en #7342E2 ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #7342E2 est le seul élément de la barre à porter du gras. Une seule action par barre.
- Chaque mesure est écrite. Chaque mesure du brief est un nombre que vous pouvez remesurer, des sections de 100vh, des pas d’espacement de 24px et des transitions de 0.3s. 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. Vérifiez une reconstruction contre les mêmes chiffres.
- La typographie fait la hiérarchie. Avec Helvetica Now Display 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. La fonte est associée à des tailles fixes, ce qui maintient le lien entre la ligne display et le texte d’interface. Une famille aux rôles clairs vaut mieux que deux qui se concurrencent.
- Une structure en un seul écran. La composition est complète en 640x474, avec le texte, les médias et les contrôles tous nommés dans le brief. La page est une seule composition en 640x474, c’est pourquoi elle tient quand le texte change.
Animation et interaction
Assez rapide pour être voulu
L’animation des contrôles est courte et répétable, 0.3s à chaque changement d’état. L’easing est spécifié avec la durée (0.3s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Des changements d’état rapides, aucune timeline de scroll.
L’interaction est sur les contrôles
La couche interactive est volontairement réduite, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Parce que les états sont simples, ils se portent dans n’importe quel système de composants.
L’ordre de section hero
La page suit un ordre délibéré. La navigation installe le produit et donne au visiteur de retour des repères familiers. Le titre prend le corps display, la ligne de soutien explique la promesse, et l’accent assombri #7342E2 marque l’action principale, donc l’étape suivante ne fait aucun doute. Rien d’autre ne concurrence cette première décision, aucune grille de cartes en amont, ce qui évite à une section hero de paraître lourde dans un travail SaaS. Un lecteur SaaS reçoit l’offre avant les options.
Les chiffres derrière section hero
S’engager sur des sections de 100vh, des pas d’espacement de 24px et des transitions de 0.3s échange de la souplesse contre de la répétabilité. C’est tout l’intérêt de la référence, la même page dans une autre marque, sans nouvelle série d’estimations. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’argument de section hero
Un écran signifie une décision pour le lecteur, et c’est le prix de cette mise en page, tout le reste passe sous la ligne de flottaison. Le brief énonce des sections de 100vh, des pas d’espacement de 24px et des transitions de 0.3s pour que les sections basses gardent le même rythme. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Questions fréquentes
Le prompt de Portal est-il une spécification aboutie ou un simple point de départ?
Comptez 5 718 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.
Qu’est-ce qui déclenche les animations de Portal?
Les entrées et les changements d’état se situent dans la plage de 0.3s. Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
Comment cette fiche de Portal est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 5 718 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
