À propos de ce modèle
Vertex est un design de landing page pour une marque e-commerce, livré avec les instructions qui l’ont produit. Elle ouvre sur « Streamline the shop » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette est bleu profond #020204 en fond, composée en Poppins. La construction repose sur un seul fichier HTML autonome. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. L’animation se limite à 620ms de transitions, cubic-bezier(.4,0.2,1) et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Elle est surtout utile quand le texte de landing page E-commerce change sans qu’une refonte soit nécessaire.
Conçu pour
- Transmettez un seul fichier HTML autonome à l’ingénieur avec le cadrage 1920x1414 joint, puis laissez-le reconstruire.
- Cette composition est prévue pour les studios qui doivent expliquer à un client le comportement à 158px sans construire de prototype.
- Équipes qui reprennent un design de landing page e-commerce repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre se superpose à landing page au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Les libellés tiennent sur une ligne à 158px, et l’élément actif se signale par la graisse et non par une pastille.
- La vidéo est le fond, pas un panneau. La vidéo occupe le calque inférieur de la composition 1920x1414, la typographie est disposée au-dessus, sans rien entre les deux. Exportez en 1920x1414 ou plus large et le recadrage en cover continue de fonctionner.
- La pastille d’annonce. Un badge, un message. La pastille se place au-dessus du titre en Poppins au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il est positionné pour que le titre garde le centre de la composition. Gardez-le au-dessus du titre, jamais à côté.
- Une ligne, aucun tiroir. Testez la barre sur vos propres médias avant de lui donner un fond. La référence a été capturée en 1920x1414.
Animation et interaction
Le canvas fait le visuel
Un canvas WebGL donne sa profondeur à la page, et la mise en page autour reste plate pour que le rendu soit le seul élément qui demande l’attention. Le rendu est le dernier élément prêt, donc la page doit fonctionner dans l’état qui précède son chargement. Gardez l’interface plate autour.
Les durées du brief
Les contrôles répondent en 620ms, assez vite pour que la page réagisse dès qu’on la touche, et non après. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé.
Ce qui tient la route pour E-commerce
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 une typographie de 12px à 54px, une grille de 4 colonnes, des angles de 12px, des pas d’espacement de 16px et des transitions de 620ms pour que les sections basses gardent le même rythme. Vertex énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière landing page
Quand une reconstruction dérive, les espacements lâchent en premier. Vertex l’évite en publiant une typographie de 12px à 54px, une grille de 4 colonnes, des angles de 12px et des pas d’espacement de 16px avec la composition. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Par où commencer dans Vertex
Composez le nouveau texte au corps d’affichage nommé dans le brief (une typographie de 12px à 54px et des pas d’espacement de 16px), et le reste de l’échelle suit sans refonte. Votre accent doit passer le même test de contraste que celui de la référence.
Questions fréquentes
Le prompt de Vertex est-il une spécification aboutie ou un simple point de départ?
Comptez 51 432 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.
Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Vertex 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 Vertex est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 51 432 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
