Über diese Vorlage
Für eine Lifestyle-Marke löst Vinyl das Thema Landingpage mit einem einzigen erfassten Briefing. Das Farbschema ist himmelblau #DBE6EE darunter und #0B0B0C für die Schrift, und die Seite ist in Instrument Serif gesetzt. Die Referenz ist mit eine eigenständige HTML-Datei gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Das Bewegungsbudget umfasst Übergänge von 1.2s, cubic-bezier(.22,1.36,1) und eine Videospur in Schleife. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Lifestyle-Marke.
Gemacht für
- Übergib eine eigenständige HTML-Datei zusammen mit dem 1920x1420-Zuschnitt an die Entwicklung und lass sie den Rest nachbauen.
- Gemacht für Agenturen, die Projekte aus dem Bereich Lifestyle pitchen und eine eigenständige HTML-Datei schon in der ersten Antwort an den Kunden brauchen.
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das ein Breakpoint bei 380px schon enthält, statt sie dem Modell zu überlassen.
Was enthalten ist
- Leiste im Raster der Seite. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Instrument Serif gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Unter 380px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 380px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Vollflächiges Video, keine Kachel. Die Medien sind ein Clip von 6,6s, auf volle Abdeckung des Rahmens 1920x1420 zugeschnitten, damit bei keiner Breite schwarze Ränder entstehen. Das Poster bei 1920x1420 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Fließend, wo es nötig ist. Das obere Ende der Skala ist fließend (eine Größe zwischen 24px und 22px), der Rest ist fest, damit der Rahmen auch bei schmalerem Viewport komponiert bleibt. Mit schmalerem Viewport ändert die Schrift ihre Größe, nicht ihre Rolle. Prüf den ersten Screen auf dem Smartphone.
- Links vor der Aktion. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 1920x1420 erfasst.
Bewegung & Interaktion
Dauern aus dem Briefing
Die Bedienelemente reagieren in 1.2s, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Das Easing steht zusammen mit der Dauer im Briefing (1.2s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Wenn du das Easing änderst, ändere es überall.
Eine Schleife, keine Timeline
Der Hintergrundclip läuft 6,6s in 1920x1420 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Vinyl als Spezifikation lesen
Der Eintrag Landingpage ist vermessen und nicht geschätzt. 100vh hohe Sektionen und Abstände in 22px-Schritten stammen aus dem Briefing, und das Layout folgt diesen Schritten, statt zurechtgeschoben zu werden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Was sich in Vinyl bewegt
Bewegung ist eine kurze Liste und kein System: Übergänge von 1.2s, eine Medienschleife von 6,6s und ein maskierter Zeilen-Reveal, und der Rest der Seite bleibt still. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Was du in Vinyl zuerst änderst
Du musst den Eintrag Landingpage nicht neu bauen, um ihn zu deinem zu machen. Ersetz die Zeile und die Medien, behalt die Skala (100vh hohe Sektionen und Abstände in 22px-Schritten), und das Layout liest weiterhin wie entworfen. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Vinyl kopiere?
Das erfasste Briefing umfasst 18.878 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.
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Vinyl 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.
Wie ist dieser Eintrag zu Vinyl aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 18.878 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
