Über diese Vorlage
Vertex ist die Referenz (Landingpage) für dieses Publikum, also für eine E-Commerce-Marke. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Die Überschrift der Seite lautet „Streamline the shop“, und die Komposition ist um genau diese Worte gebaut. Die Palette umfasst tiefes blau #020204 darunter, die Schrift ist Poppins. Der Eintrag nennt den Stack, der die Seite erzeugt hat (eine eigenständige HTML-Datei), statt ihn zu verschweigen. Das Bewegungsbudget umfasst Übergänge von 620ms, cubic-bezier(.4,0.2,1) und eine Videospur in Schleife. Nimm es als Briefing für eine E-Commerce-Marke: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Übergib eine eigenständige HTML-Datei zusammen mit dem 1920x1414-Zuschnitt an die Entwicklung und lass sie den Rest nachbauen.
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer eine eigenständige HTML-Datei behalten und den Rest des Landingpage-Designs neu bauen.
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm ein Breakpoint bei 158px als Maßstab für jede Zeile.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unter 158px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 158px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Das Video ist Hintergrund, keine Fläche. Ein Clip von 6,9s bei 1920x1414 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Exportiere in 1920x1414 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Die Ankündigungs-Pille. Ein Badge, eine Botschaft: die Pille sitzt in Poppins auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es gibt nur eine Ankündigung, und das lässt das Badge wie eine Neuigkeit wirken. Halte es über der Headline, nie daneben.
- Ein Breakpoint für die Links. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt. Die Referenz wurde mit 1920x1414 erfasst.
Bewegung & Interaktion
Szene statt Standbild
Die visuelle Arbeit übernimmt hier ein WebGL-Canvas. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen. Halte die Oberfläche darum flach.
Eine Dauer für die Bedienelemente
Die Zeiten sind kurz und einheitlich: Übergänge laufen 620ms auf cubic-bezier(.4,0.2,1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Ein Wert wird für alle Bedienelemente wiederverwendet, ihr Timing kann also nicht auseinanderlaufen.
Warum das Briefing für E-Commerce trägt
Das Design argumentiert auf einem einzigen Screen. Das Medium ist eine Schleife von 6,9s in 1920x1414. Die Medien tragen die Atmosphäre, der Text trägt das Angebot, und Schrift von 12px bis 54px und ein 4-Spalten-Raster halten beides auseinander. Vertex nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Zahlen hinter dem Eintrag Landingpage
Konkrete Zahlen altern: Ein Wert, der bei 1920x1414 passt, muss nicht zu deinem Rahmen passen. Das Briefing hält die Werte trotzdem fest: Schrift von 12px bis 54px und ein 4-Spalten-Raster, weil ein genannter Wert leichter zu ändern ist als ein ungenannter. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
So wird der Eintrag Landingpage deiner
Wo ein Theme dir Komponenten gibt, gibt dieses Briefing dir eine Komposition: Schrift von 12px bis 54px, ein 4-Spalten-Raster, Radius 12px und Abstände in 16px-Schritten und einen Medienrahmen, das Thema bleibt bei dir. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Vertex kopiere?
Das erfasste Briefing umfasst 51.432 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.
Kann ich Landingpage von Vertex in einem anderen Stack nachbauen?
Vertex wurde in eine eigenständige HTML-Datei 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.
Was kann ich mit dem Briefing zu Vertex machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 51.432 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
