À propos de ce modèle
Retro-Futurist est la référence section hero pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Le titre affiché est « Glad you stopped in. Good taste tends to find us. Now, what are we building? », et le reste de section hero s’organise autour de lui. La palette repose sur gris #B3B1B3 en fond, et la page est composée en HelveticaNowDisplay-Medium. 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. Le budget d’animation est 38ms de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 5 713 caractères est la partie qui se transfère à votre page.
Conçu pour
- Prestataires qui récupèrent un design de section hero et veulent voir un cadre 640x474 dans le dépôt avant le premier commit.
- Des équipes qui construisent une section hero pour une agence ou un studio et veulent le détail mesuré (une typographie de 13px à 32px et des pas d’espacement de 26px) plutôt qu’une capture d’écran à copier.
- 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 Retro-Futurist.
Ce qui est inclus
- Une barre de navigation discrète. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en HelveticaNowDisplay-Medium, 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 640x474 sans fond propre, la vidéo court donc bord à bord en dessous. Une seule action par barre.
- Mesuré contre le viewport. Le brief énonce ses tailles à la capture (une typographie de 13px à 32px, des pas d’espacement de 26px et des transitions de 38ms), une reconstruction peut donc être vérifiée au lieu d’être approximée. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- La preuve en haut de l’écran. 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. Le palier des libellés est cité dans le brief, il reste donc sous les chiffres après une substitution. N’enfermez pas les nombres dans un cadre.
- Une navigation sur une seule ligne. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre. La référence a été capturée en 640x474.
Animation et interaction
L’entrée comme signature
L’animation d’entrée est dépensée sur un seul élément (une passe de machine à écrire compose la ligne d’introduction), et c’est ce qui évite à un premier écran chargé de paraître surchargé. Si la technique est retirée, le contenu est là et la mise en page ne bouge pas.
Le timing reste dans le brief
Une seule durée couvre les interactions (38ms), et c’est ce qui fait que survol et pression se lisent comme un seul système. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger.
Par où commencer dans Retro-Futurist
La composition est la partie réutilisable, le sujet vous appartient. Gardez une typographie de 13px à 32px et des pas d’espacement de 26px et remplacez les mots, les médias et les signes de marque. Le cadre et l’échelle sont ce qu’il faut laisser tranquilles.
Lire Retro-Futurist comme une spécification
S’engager sur une typographie de 13px à 32px, des pas d’espacement de 26px et des transitions de 38ms é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.
Le gain pour une agence ou un studio
Si votre premier écran explique aujourd’hui trois choses, voici la version qui en explique une. Ici, la séquence de la navigation, le badge d’annonce, la ligne de statistiques et le clip de fond se déroule dans l’ordre de lecture, une typographie de 13px à 32px et des pas d’espacement de 26px donnant le rythme. Elle donne à un lecteur agence le chemin le plus court vers l’offre.
Questions fréquentes
Que recevez-vous en copiant le brief de Retro-Futurist?
Comptez 5 713 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 Retro-Futurist?
La fiche indique React et Tailwind CSS pour la provenance, parce que Retro-Futurist 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 se comportent les transitions de 38ms dans Retro-Futurist?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 38ms. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
