Über diese Vorlage
Bevor du beim Thema Landingpage für eine Agentur oder ein Studio nachbaust, lies Digital Experiences: Komposition und Spezifikation stehen beide hier. Die Überschrift der Seite lautet „Crafted Digital Experiences Built to Outlast Trends“, und die Komposition ist um genau diese Worte gebaut. Das Farbschema ist schwarz #0D0D0C darunter, und die Seite ist in Instrument Serif gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 640x458, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 500ms aus. Lass es beim Schreiben offen: Die 8.994 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Digital Experiences.
- Gründer, die eine erste Version ausliefern und lieber eine Komposition in Instrument Serif anpassen als ein Template zusammenzusetzen.
- Das Landingpage-Layout passt zu Growth-Teams, die die Headline im A/B-Test tauschen, ohne Instrument Serif anzufassen.
Was enthalten ist
- Obere Zeile, 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 640x458, damit die Medien darunter bis an den Rand durchlaufen.
- Größen im Briefing fixiert. Das Briefing nennt die Zahlen: Abstände in 10px-Schritten und 500ms Übergänge. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
- Die Schrift trägt den Ton. Die Schrift ist Instrument Serif an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Stufe für Bildunterschriften ist klein genug, um unter einer Abbildung zu sitzen, ohne den Rhythmus der Seite zu ändern. Prüfe die Skala in Graustufen.
- Obere Zeile: Wortmarke, Links, eine Aktion. Eine kurze Reihe Links und eine einzelne Aktion liegen in Landingpage, auf Abstände in 10px-Schritten und 500ms Übergänge gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Die Bewegung ist hier in Millisekunden angegeben: 500ms. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x458-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Bewegung ist hier Rückmeldung und nicht Dekoration. Keine Scroll-Timelines nötig.
Wie Digital Experiences den ersten Blick ordnet
Ein feature-getriebenes Layout listet, was das Produkt tut; dieses führt den Leser zu einer einzigen Entscheidung. Die Route zeigen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und die Kundenzeile, und Abstände in 10px-Schritten und 500ms Übergänge staffeln sie. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was sich in Digital Experiences bewegt
Die Bewegung ist begrenzt: Übergänge von 500ms, eine Überschrift Wort für Wort und ein Scroll-Reveal. Nichts im Eintrag Landingpage animiert länger, als das Briefing erlaubt. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Die Zahlen hinter dem Eintrag Landingpage
Der Eintrag Landingpage ist vermessen und nicht geschätzt. Abstände in 10px-Schritten und 500ms Übergänge stammen aus dem Briefing, und das Layout folgt diesen Schritten, statt zurechtgeschoben zu werden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Wie lang ist der Prompt hinter Digital Experiences?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x458, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Digital Experiences hängt von React und Tailwind CSS ab?
Digital Experiences 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 gehe ich mit den Medien von Digital Experiences in einem Kundenprojekt um?
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 640x458 erfasst.
