Über diese Vorlage
Innovation zeigt einen Weg, die Komposition (Landingpage) für dieses Publikum zu bauen. Gedacht ist sie für eine Agentur oder ein Studio, und die Anweisungen dazu sind veröffentlicht. Farbe bleibt auf tiefes blau #020D14 darunter begrenzt, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 447x800, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 500ms und bleibt so zurückhaltend, dass die Texte weiter führen. Nimm es als Briefing für eine Agentur oder ein Studio: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 8.996 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Innovation.
- Gründer, die ein Landingpage-Design für eine Agentur oder ein Studio aufsetzen und Instrument Serif samt Schriftgrößen-Skala festlegen müssen, bevor Entwicklungsarbeit startet.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste überlagert Landingpage, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 447x800, damit die Medien darunter bis an den Rand durchlaufen.
- Das Briefing nennt die Stufen. Die Liste bleibt kurz (Abstände in 20px-Schritten und 500ms Übergänge), deshalb lässt sich das ganze System von Hand prüfen. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Die Schrift trägt den Ton. Instrument Serif erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Größenstufen sind feste Werte, dadurch behält ein Schriftwechsel dieselbe Hierarchie.
- Der Footer ist eine volle Komposition. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Schriftgrößen fallen von den Spaltenüberschriften zu den Links ab, damit die Hierarchie auch in einem dichten Footer trägt. Gib der Wortmarke eine eigene Spalte.
Bewegung & Interaktion
Das ganze Animationsbudget
Das Animationsbudget ist klein und ausdrücklich benannt: 500ms, eingesetzt für Zustandswechsel und nicht für Auftritte. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz. Behalte die Dauern, wenn du die Seite neu gestaltest.
Zeiger-Zustände, mehr nicht
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Hover und Fokus sind gemeinsam festgelegt, Zeiger und Tastatur bekommen dadurch dieselbe Information. Weniger Zustände, vollständig festgelegt.
Die Reihenfolge im Eintrag Landingpage
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen Abstände in 20px-Schritten und 500ms Übergänge neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Das Argument des Eintrags Landingpage
Zurückhaltung kostet Platz für Belege über dem Fold. Dieses Briefing akzeptiert den Preis und gibt den ersten Screen für das Angebot aus; Abstände in 20px-Schritten und 500ms Übergänge stehen fest, damit eine Beleg-Sektion darunter ohne Umbau passt. Innovation nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was sich in Innovation bewegt
Die Zeitwerte sind ausgesprochen: Übergänge von 500ms und Hover- und Druckzustände, alles im Briefing festgehalten und nicht nach Gefühl abgestimmt. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Innovation?
Das erfasste Briefing umfasst 8.996 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.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Innovation 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.
Darf ich Innovation in einem Kundenprojekt verwenden?
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 447x800 erfasst.
