Über diese Vorlage
Orbit Flora hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 9.402 Zeichen Briefing. Farbe bleibt auf #161616 darunter, #FFFFFF für die Schrift und magenta #FD86DB für die Akzente begrenzt, gesetzt in Inter. Geliefert wird eine einzelne Komponente, erfasst bei 1454x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 620ms, cubic-bezier(.16, 1.3, 1) und eine Videospur in Schleife. Nimm es als Briefing für eine Lifestyle-Marke: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Das Landingpage-Design zielt auf Teams, die eine einzelne Komponente schon kennen und nur Easing cubic-bezier(.16, 1.3, 1) schriftlich brauchen.
- Gemacht für Agenturen, die Projekte aus dem Bereich Lifestyle pitchen und eine einzelne Komponente schon in der ersten Antwort an den Kunden brauchen.
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm ein Breakpoint bei 900px als Maßstab für jede Zeile.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #FD86DB und kommt über 55vh hohe Sektionen und Abstände in 34px-Schritten nicht hinaus, damit aus ihr kein zweiter Header wird. Unter 900px klappen die Links ein, statt in eine zweite Zeile umzubrechen. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Ein Medien-Element trägt die Stimmung. Der Hintergrund ist eine einzelne Schleife von 8,2s bei 1454x1080, auf Cover zugeschnitten und ohne Tönung. Alles andere schwebt darüber auf einer höheren Ebene. Die Schleife ist kurz genug (8,2s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Schmale Navigationsleiste. Die Labels passen bei 900px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Eine Skala für Schrift und Rahmen. Das Layout ist gegen feste Werte gelöst (55vh hohe Sektionen, Abstände in 34px-Schritten, 620ms Übergänge und Easing cubic-bezier(.16, 1.3, 1)), und das hält den ersten Screen bei jeder Breite komponiert. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
Bewegung & Interaktion
Die Leinwand trägt den ersten Bildschirm
Das Rendering zur Laufzeit ist hier die Designentscheidung (ein WebGL-Canvas), das Layout lässt ihm bewusst Platz. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Zustandswechsel mit Zeitwert
Das Animationsbudget ist klein und ausdrücklich benannt: 620ms mit cubic-bezier(.16, 1.3, 1), eingesetzt für Zustandswechsel und nicht für Auftritte. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Die Reihenfolge im Eintrag Landingpage
In dieser Reihenfolge: die Navigation, das Ankündigungs-Badge und die Kennzahlen-Zeile. Jedes Element hat eine Aufgabe, und magenta #FD86DB ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich Lifestyle bekommt das Angebot vor den Optionen.
So wird der Eintrag Landingpage deiner
Das Briefing nennt Inter und die Skala daneben. Ersetz die Schrift durch eine mit denselben Proportionen, und die Komposition überlebt. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Warum diese Komposition für Lifestyle trägt
Verglichen mit einem Template-Hero liegt der Unterschied im Weggelassenen. Es gibt kein Kartenraster, kein Karussell und keinen zweiten Call-to-Action: nur die Navigation, das Ankündigungs-Badge und die Kennzahlen-Zeile, und 55vh hohe Sektionen und Abstände in 34px-Schritten geben die Maße vor. Es gibt einem Leser im Bereich Lifestyle den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Warum nennt der Eintrag eine einzelne Komponente überhaupt?
Orbit Flora wurde in eine einzelne Komponente 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 bekomme ich, wenn ich das Briefing zu Orbit Flora kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1454x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich eine aus Orbit Flora nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1454x1080 erfasst.
