Über diese Vorlage
Lies Place Saver als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Die Überschrift der Seite lautet „The place for all your places“, und die Komposition ist um genau diese Worte gebaut. Die Palette umfasst weiß #F4F4F4 darunter und tiefes blau #0C0C0E für die Schrift, die Schrift ist Playfair Display. Geliefert wird eine einzelne Komponente, erfasst bei 1480x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 0.9s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife. Nimm es als Briefing für eine Reise- oder Tourismusmarke: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Teams, die Landingpage-Designs für eine Reise- oder Tourismusmarke bauen und eine einzelne Komponente schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Wenn drei Leute an einem Landingpage-Design arbeiten, gib Content-Leads Radius 48px und Abstände in 28px-Schritten statt eines Screenshots.
- Schreib deine eigene Headline und baue dieses Landingpage-Design dann in eine einzelne Komponente mit unveränderten Maßen nach.
Was enthalten ist
- Gemessen statt geschätzt. Das Briefing nennt die Zahlen: Radius 48px, Abstände in 28px-Schritten, 0.9s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr. Ändere das Thema, nicht die Stufen.
- Das Video ist Hintergrund, keine Fläche. Der Clip läuft 5,6s in 1480x1080 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Die Schleife ist kurz genug (5,6s), dass das Auge sie als Textur liest und nicht als Zeitachse. Exportiere bei 1480x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Eine Schrift, diszipliniert eingesetzt. Die Schriften sind Rollen zugewiesen und nicht gemischt: Playfair Display trägt Display und Oberfläche zusammen. Die Ziffern nutzen dieselbe Schrift wie das Interface, Statistiken und Labels gehören damit zu einem System.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Radius 48px, Abstände in 28px-Schritten, 0.9s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 5,6s-Schleife in 1480x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Zeiten in Millisekunden
Zustandswechsel sind mit 0.9s angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Das Easing steht zusammen mit der Dauer im Briefing (0.9s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Bemiss die Rückmeldung exakt.
Place Saver als Spezifikation lesen
Wenn du das an die Entwicklung übergibst, ist das Briefing das nützliche Artefakt: Radius 48px, Abstände in 28px-Schritten, 0.9s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) stehen darin, und ihr müsst nichts interpretieren. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie der Eintrag Landingpage umbricht
Der Preis einer fluiden Skala ist weniger Kontrolle über exakte Größen. Dafür bleibt die Display-Zeile proportional, und deshalb steht die Klemmung im Briefing: eine Größe zwischen 66px und 28px. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Was sich in Place Saver bewegt
Ein fertiges Animationspaket wäre schneller ausgeliefert gewesen. Das Briefing hält es stattdessen kurz: Übergänge von 0.9s und eine Medienschleife von 5,6s, und deshalb wirkt die Seite verfasst statt inszeniert. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Brauche ich eine einzelne Komponente, um Place Saver nachzubauen?
Place Saver 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.
Ist das Briefing zu Place Saver dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 8.226 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Place Saver?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1480x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
