Über diese Vorlage
Lies Scaling Platform als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Die Palette ist weiß #F2F1F0 darunter, schwarz #3A3A3A für die Schrift und helles petrol #15BCDF für die Akzente, gesetzt in Quantico. Es kommt als eine einzelne Komponente, damit sich der ganze Landingpage ohne Design-Übergabe in ein Projekt heben lässt. Die Seite begrenzt die Bewegung auf Übergänge von 1s und eine Videospur in Schleife. Am nützlichsten ist es, wenn beim Eintrag Landingpage für KI & SaaS ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Landingpage-Briefing und lass den Prompt eine einzelne Komponente festhalten.
- Das Landingpage-Design zielt auf Teams, die eine einzelne Komponente schon kennen und nur ein 1916x1080 Rahmen schriftlich brauchen.
- Wenn der Build auf eine einzelne Komponente aufsetzt, übernimm zuerst 100vh hohe Sektionen und Abstände in 20px-Schritten und lass die Palette in Ruhe, bis das Raster steht.
Was enthalten ist
- Leiste im Raster der Seite. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #15BCDF schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #15BCDF ist das einzige Element in der Leiste mit Gewicht.
- Abstände als Werte genannt. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: 100vh hohe Sektionen, Abstände in 20px-Schritten und 1s Übergänge. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Eine Familie, zwei Rollen. Die Display-Zeile steht in Quantico in einer vom Briefing festgelegten Größe, dadurch ist die Headline ein Kompositionselement und kein Absatz. Die Zeilenhöhe folgt den Größenstufen und nicht einem einzigen globalen Wert. Eine Schrift, klare Rollen.
- Erst der Text, dann die Dekoration. Die Komposition (Landingpage) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 1916x1080 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 1916x1080, und deshalb hält sie zusammen, wenn sich der Text ändert.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 1s bei jedem Zustandswechsel. Das Easing steht zusammen mit der Dauer im Briefing (1s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Wenn du das Easing änderst, ändere es überall.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 5,1s-Schleife in 1916x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Die Zeitwerte hinter dem Eintrag Landingpage
Jeder Übergang hier hat eine Zahl. Deshalb lassen sich Übergänge von 1s, eine Medienschleife von 5,1s und ein maskierter Zeilen-Reveal Wert für Wert portieren, statt nach Gefühl neu abzustimmen. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Die Reihenfolge im Eintrag Landingpage
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation, die Überschrift, die Kennzahlen-Zeile, der Hintergrund-Clip und der Footer bleiben an ihrem Platz, und 100vh hohe Sektionen und Abstände in 20px-Schritten werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
So wird der Eintrag Landingpage deiner
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 20px-Schritten), und das Layout liest weiterhin wie entworfen. Das Thema ist der Teil, der sich ändern sollte.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Scaling Platform kopiere?
Das erfasste Briefing umfasst 5.231 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.
Brauche ich eine einzelne Komponente, um Scaling Platform nachzubauen?
Scaling Platform 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 kann ich mit dem Briefing zu Scaling Platform machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.231 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
