À propos de ce modèle
Vectrus Energy conserve sa trace de décision, puisque le brief de landing page fait 8 300 caractères. Elle ouvre sur « Advancing resources for a cleaner future » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette repose sur gris #C7CED7 en fond et bleu profond #1D3045 pour le texte, et la page est composée en Helvetica, Arial. 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 brief consacre son budget d’animation à 200ms de transitions, cubic-bezier(0.16,1,0.3,1) et un fond vidéo en boucle. Traitez-la comme le brief de landing page pour une entreprise industrielle, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Ce design de landing page est fait pour les agences qui ont besoin que le cadre 1468x1080 survive à trois séries de retours client.
- Si l’animation doit sauter, le design de landing page reste lisible, des sections de 500vh et des pas d’espacement de 40px assurant la hiérarchie.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 5,6s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Une barre sans superflu. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Helvetica, Arial pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 1468x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. Rien dans la mise en page n’est laissé à l’impression, le brief cite des sections de 500vh, des pas d’espacement de 40px, des transitions de 200ms et un easing cubic-bezier(0.16,1,0.3,1) et le build doit atteindre ces valeurs. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- La preuve sur une seule rangée. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer landing page en liste de fonctionnalités. L’accent est dépensé sur les chiffres qui portent une affirmation, pas sur toute la rangée.
- Un pied de page qui porte la marque. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. L’accent est réemployé sur une seule action du pied de page plutôt que sur toute la bande. Regroupez les liens, ne les déversez pas.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 5,6s en 1468x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est assez court pour boucler sans couture visible, ce qui compte plus que sa résolution. Tournez ou exportez en 1468x1080 ou plus large.
Les durées du brief
Les changements d’état sont fixés à 200ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé. Appliquez la durée exacte au retour.
Par où commencer dans Vectrus Energy
Un template vous demande d’accepter sa mise en page, cette référence vous demande de la garder en changeant tout l’intérieur. La différence est que le sujet bouge alors que des sections de 500vh, des pas d’espacement de 40px, des transitions de 200ms et un easing cubic-bezier(0.16,1,0.3,1) ne changent pas. La composition est la partie réutilisable, et elle survit à une autre marque.
Comment Vectrus Energy ordonne la première lecture
Vous pourriez mélanger ces blocs, la page se chargerait encore. Elle cesserait en revanche de se lire comme un argument, car ce qui porte la page est l’ordre de la navigation, le titre, la ligne de statistiques, la liste de fonctionnalités et le clip de fond, réglé par des sections de 500vh et des pas d’espacement de 40px. Un lecteur industrie reçoit l’offre avant les options.
Le réagencement de landing page
Responsive signifie ici que l’échelle change et non la hiérarchie, l’échelle est fluide plutôt que par paliers, la section est tenue à 500vh et la navigation se replie en menu mobile. Le texte reste au-dessus de la ligne de flottaison, les contrôles restent assez grands pour être touchés et le mouvement réduit est respecté. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Questions fréquentes
Que contient réellement le brief derrière Vectrus Energy?
Comptez 8 300 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.
Quelle part de Vectrus Energy dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Vectrus Energy 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 200ms dans Vectrus Energy?
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 200ms en cubic-bezier(0.16,1,0.3,1). 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.
