Über diese Vorlage
Vectrus Energy: Landingpage für Industrie, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Sie beginnt mit „Advancing resources for a cleaner future“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist grau #C7CED7 darunter und tiefes blau #1D3045 für die Schrift, gesetzt in Helvetica, Arial. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung bleibt auf Übergänge von 200ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife beschränkt. Nimm es als Briefing für ein Industrieunternehmen: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm ein 1468x1080 Rahmen als Maßstab für jede Zeile.
- Inhouse-Teams, die ein Landingpage-Design erweitern und 500vh hohe Sektionen und Abstände in 40px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 5,6s Video in Schleife hinter dem Text lesbar bleibt.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Eine kurze Reihe Links und eine einzelne Aktion liegen in Landingpage, auf 500vh hohe Sektionen und Abstände in 40px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1468x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Die Feature-Liste ist als Text gesetzt. Die Features sind als Liste in Helvetica, Arial gesetzt und nicht als Wand aus Karten. Die Gruppierung entsteht über den Abstand zwischen den Zeilen, Kästen sind dafür nicht nötig.
- Zahlen in Display-Größe. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Landingpage) davon ab, zur Feature-Liste zu werden. Die Zahlen nutzen dieselbe Schrift wie die Oberfläche, damit sie zur Seite gehören und sie nicht unterbrechen. Gib jeder Zahl ein kurzes Label.
- Schmale Navigationsleiste. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 1468x1080 erfasst.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 5,6s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren. Dreh oder exportiere in 1468x1080 oder breiter.
Eine Dauer für die Bedienelemente
Die Zeiten sind kurz und einheitlich: Übergänge laufen 200ms auf cubic-bezier(0.16,1,0.3,1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Die angegebene Zeit betrifft Zustandswechsel, die Rückmeldung ist damit der spezifizierte Teil der Bewegung. Liefere nicht den Browser-Standard aus.
Was du in Vectrus Energy zuerst änderst
Ändere zuerst den Inhalt und prüf danach den Rahmen. 500vh hohe Sektionen, Abstände in 40px-Schritten, 200ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1) sind die Werte, die du beim Tauschen des Textes schützt. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Wie Vectrus Energy den ersten Blick ordnet
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag Landingpage die Navigation, die Überschrift, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich Industrie bekommt das Angebot vor den Optionen.
Wie der Eintrag Landingpage umbricht
Die meisten Responsive-Arbeiten hören beim Ausblenden auf. Hier ändert das Layout seine Form: die Skala ist fließend statt gestuft, der Bereich wird auf 500vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen, und nichts Wichtiges fällt weg, damit der Fold passt. Die Breite ändert die Maße, nicht den Lesepfad.
Häufige Fragen
Wie lang ist der Prompt hinter Vectrus Energy?
Das erfasste Briefing umfasst 8.300 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Ist das Briefing zu Vectrus Energy dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 8.300 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Kann ich Landingpage von Vectrus Energy in einem anderen Stack nachbauen?
Vectrus Energy wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
