À propos de ce modèle
Cette fiche présente Vinyl en landing page, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette se limite à bleu ciel #DBE6EE en fond et #0B0B0C pour le texte, et la typographie est Instrument Serif. La livraison tient en un seul fichier HTML autonome, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se résume à 1.2s de transitions, cubic-bezier(.22,1.36,1) et un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de landing page pour une marque lifestyle et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Transmettez un seul fichier HTML autonome à l’ingénieur avec le cadrage 1920x1420 joint, puis laissez-le reconstruire.
- Équipes internes qui étendent ce design de landing page et ont besoin de retrouver des sections de 100vh et des pas d’espacement de 22px à l’identique dans les nouveaux blocs.
- La page sert aux développeurs front-end qui reconstruisent un design de landing page pour une marque lifestyle en un seul fichier HTML autonome et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- La barre partage la grille. Une courte suite de liens et une seule action se posent au-dessus de landing page, tenues à des sections de 100vh et des pas d’espacement de 22px pour ne jamais concurrencer la composition en dessous. Sous 380px, les liens se replient au lieu de passer sur une seconde ligne.
- La vidéo au calque inférieur. La vidéo occupe le calque inférieur de la composition 1920x1420, la typographie est disposée au-dessus, sans rien entre les deux. La boucle est assez courte (6,6s) pour que l’œil la lise comme une texture et non comme une timeline.
- Des fontes à rôle unique. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Instrument Serif à un corps display serré, puis une chute nette vers le texte secondaire. L’interlignage suit les paliers de taille plutôt qu’une valeur globale unique. L’échelle est citée, servez-vous en.
- Les liens avant l’action. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 1920x1420.
Animation et interaction
Le timing reste dans le brief
Les transitions sont fixées à 1.2s avec cubic-bezier(.22,1.36,1), et c’est la durée à laquelle les contrôles sont tenus. L’easing est spécifié avec la durée (1.2s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Ne livrez pas le défaut du navigateur.
Une boucle, pas une timeline
Le mouvement d’ambiance vient de la boucle de 6,6s en 1920x1420 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Les chiffres derrière landing page
La typographie est le premier chiffre, des sections de 100vh et des pas d’espacement de 22px. Les espacements en découlent, et tout le reste de la page se positionne par rapport à ces deux valeurs. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Les timings derrière landing page
L’animation est une courte liste plutôt qu’un système. Le brief nomme 1.2s de transitions, une boucle média de 6,6s et une apparition de ligne masquée, et le reste de la page reste immobile. Rien ne s’anime pour lui-même dans le design de landing page.
Adapter landing page à votre marque
Changez le contenu d’abord et vérifiez le cadre ensuite. Les valeurs à protéger pendant le remplacement du texte sont des sections de 100vh, des pas d’espacement de 22px, des transitions de 1.2s et un easing cubic-bezier(.22,1.36,1). Le sujet est la partie qui doit changer.
Questions fréquentes
Que recevez-vous en copiant le brief de Vinyl?
Comptez 18 878 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 landing page de Vinyl avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Vinyl 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.
Le brief de Vinyl est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 18 878 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
