Über diese Vorlage
Lies Email Landing Page als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Das Farbschema ist tiefes blau #091020 darunter, gedämpftes petrol #A4F4FD für die Schrift und helles petrol #00D2FF für die Akzente, und die Seite ist in Inter gesetzt. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung ist Übergänge von 0.3s und cubic-bezier(.22,1.36,1) und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 19.431 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer Easing cubic-bezier(.22,1.36,1) behalten und den Rest des Landingpage-Designs neu bauen.
- Gründer, die eine Agentur briefen, nehmen den 640x478-Rahmen als Abnahmekriterium für die erste Runde.
- Dieses Landingpage-Design beantwortet die Frage, was ein 3-Spalten-Raster und Radius 44px im Layout tatsächlich bewirken.
Was enthalten ist
- Leiste im Raster der Seite. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #00D2FF, während Wortmarke und Links auf der Textfarbe zurücktreten. Unter 1024px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 1024px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Eine Schrift, diszipliniert eingesetzt. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Inter in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Die Stufe für Bildunterschriften ist klein genug, um unter einer Abbildung zu sitzen, ohne den Rhythmus der Seite zu ändern. Behalte die Stufen, tausche die Schrift.
- Navigation ohne Hintergrund. Die Labels passen bei 1024px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Größen im Briefing fixiert. Die Werte sind die Spezifikation: ein 3-Spalten-Raster, Radius 44px, Abstände in 20px-Schritten und 0.3s Übergänge, aufgenommen bei 640x478 und nicht aus einem Screenshot abgeleitet. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
Bewegung & Interaktion
Das ganze Animationsbudget
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 0.3s bei jedem Zustandswechsel. Das Easing steht zusammen mit der Dauer im Briefing (0.3s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Hover nur, wo er etwas bedeutet
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte und Tabs oder ein Akkordeon, das Inhalte an Ort und Stelle austauscht; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar. Halte die interaktive Ebene klein.
Wie der Eintrag Landingpage umbricht
Der Eintrag Landingpage wird bei 640x478 komponiert und für schmale Breiten neu komponiert. das Layout wechselt bei 1024px, die Telefon-Version ist also eine Entscheidung und keine Quetschung. Bei schmalen Breiten fällt nichts Wichtiges weg.
So wird der Eintrag Landingpage deiner
Wo ein Theme dir Komponenten gibt, gibt dieses Briefing dir eine Komposition: ein 3-Spalten-Raster, Radius 44px, Abstände in 20px-Schritten und 0.3s Übergänge und einen Medienrahmen, das Thema bleibt bei dir. Das Thema ist der Teil, der sich ändern sollte.
Wie Email Landing Page den ersten Blick ordnet
Nichts konkurriert hier mit der ersten Entscheidung. Das Stützmaterial wartet unter dem Fold, und die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und die Kundenzeile tragen die obere Seite allein. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Ist der Prompt zu Email Landing Page eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 19.431 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 Email Landing Page in einem anderen Stack nachbauen?
Email Landing Page wurde in React und Tailwind CSS 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 verhalten sich die 0.3s Übergänge in Email Landing Page?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 0.3s mit cubic-bezier(.22,1.36,1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
