Über diese Vorlage
Bevor du beim Thema Landingpage für ein KI- oder SaaS-Produkt nachbaust, lies Growth Decisions: Komposition und Spezifikation stehen beide hier. Farbe bleibt auf #FFFFFF darunter, #0A0A0A für die Schrift und blau #006CD2 für die Akzente begrenzt, gesetzt in Inter. Geliefert wird eine einzelne Komponente, erfasst bei 1468x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 0.16s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 11.164 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Das Landingpage-Design zielt auf Teams, die eine einzelne Komponente schon kennen und nur eine einzelne Komponente schriftlich brauchen.
- Product Manager, die den Aufwand schätzen müssen, lesen ein Breakpoint bei 821px als Umfang der Arbeit.
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich SaaS nachbauen und eine einzelne Komponente festlegen wollen, bevor sich jemand auf ein Framework festlegt.
Was enthalten ist
- Navigation ohne Hintergrund. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #006CD2, alles auf der kleinsten Schriftstufe des Briefings. Unter 821px klappen die Links ein, statt in eine zweite Zeile umzubrechen. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Video in der untersten Ebene. Ein stummer, loopender Clip füllt das Format von 1468x1080 über 7,1s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Das Poster bei 1468x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Zwei Schriften, klare Aufgaben. Die Schrift ist Inter an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Gewichte sind pro Rolle festgelegt, damit die Hierarchie beim Bauen nicht vom Schätzen abhängt. Prüfe die Skala in Graustufen.
- Fließend, wo es nötig ist. Breitenänderungen stecken in der Schrift selbst: eine Größe zwischen 28px und 18px trägt die Headline vom Smartphone bis zum Desktop, ohne eigene mobile Komposition. Mit schmalerem Viewport ändert die Schrift ihre Größe, nicht ihre Rolle.
Bewegung & Interaktion
Dauern aus dem Briefing
Übergänge sind auf 0.16s mit cubic-bezier(0.16, 1, 0.3, 1) festgelegt; dieser Wert gilt auch für die Bedienelemente. Das Easing steht zusammen mit der Dauer im Briefing (0.16s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Der Auftritt bleibt im Kopf
Ein maskierter Zeilen-Reveal ist die ganze Geste: mehr bewegt sich auf der Seite nicht. Die Animation läuft einmal beim Laden und nicht bei jedem Scrollen, deshalb spielt die Seite nie erneut, während du liest. Die Referenz wurde mit 1468x1080 erfasst.
Das Argument des Eintrags Landingpage
Zähl die Entscheidungen im Eintrag Landingpage, und sie führen auf ein einziges Dokument zurück: 11.164 Zeichen, die den Rahmen bei 1468x1080, die Schrift und den Rhythmus benennen. Growth Decisions nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Growth Decisions den ersten Blick ordnet
Der Eintrag Landingpage hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip der Reihe nach, und genau das verhindert, dass ein einzelner Screen als Liste liest. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Landingpage umbricht
Verglichen mit einem Mobil-Layout, das Sektionen ausblendet, behält dieses sie und ändert ihre Form: die Skala ist fließend statt gestuft, das Layout wechselt bei 821px und der Bereich wird auf 100vh gehalten. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Häufige Fragen
Brauche ich eine einzelne Komponente, um Growth Decisions nachzubauen?
Growth Decisions 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 Growth Decisions kopiere?
Das erfasste Briefing umfasst 11.164 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.
Wie verhalten sich die 0.16s Übergänge in Growth Decisions?
Auftritte und Zustandswechsel liegen im Bereich von 0.16s mit cubic-bezier(0.16, 1, 0.3, 1) mit einem Reduced-Motion-Zweig im Briefing. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
