Über diese Vorlage
Intelligence Layer wurde bei 1462x1080 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Palette umfasst fast schwarz #050505 darunter und #FAFAFA für die Schrift, die Schrift ist Manrope. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1462x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 0.9s, cubic-bezier(.22, 1.36, 1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 11.825 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich SaaS nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Landingpage-Briefing und lass den Prompt eine eigenständige HTML-Datei festhalten.
- Dieses Landingpage-Design richtet sich an Designer, die einen Build in eine eigenständige HTML-Datei an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Manrope gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1462x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Die Skala ist begrenzt, nicht gestuft. Die Schrift ist mit eine Größe zwischen 34px und 25px bemessen und nicht in festen Stufen, damit die Display-Zeile zwischen den Breakpoints proportional bleibt, statt zu springen. Das mobile Menü gehört zum selben Briefing, der eingeklappte Zustand ist also mitgeplant.
- Eine Leiste ohne Beiwerk. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 1462x1080 erfasst.
- Nichts davon ist geerbt. Die Werte sind die Spezifikation: 100vh hohe Sektionen, Abstände in 25px-Schritten, 0.9s Übergänge und Easing cubic-bezier(.22, 1.36, 1), aufgenommen bei 1462x1080 und nicht aus einem Screenshot abgeleitet. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
Bewegung & Interaktion
Die Szene ist das Bild
Ein WebGL-Canvas gibt der Seite ihre Tiefe, und das umgebende Layout bleibt flach, damit das Rendering das Einzige ist, das Aufmerksamkeit verlangt. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Eine Dauer für die Bedienelemente
Die Zeiten sind kurz und einheitlich: Übergänge laufen 0.9s mit cubic-bezier(.22, 1.36, 1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Das Easing steht zusammen mit der Dauer im Briefing (0.9s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie der Eintrag Landingpage umbricht
Der Preis einer fluiden Skala ist weniger Kontrolle über exakte Größen. Dafür bleibt die Display-Zeile proportional, und deshalb steht die Klemmung im Briefing: eine Größe zwischen 34px und 25px. Der Umbruch hält die Handlung in jeder Breite erreichbar.
Die Zahlen hinter dem Eintrag Landingpage
Der Preis einer festen Skala ist weniger Raum zum Improvisieren. 100vh hohe Sektionen und Abstände in 25px-Schritten halten die Komposition zusammen, aber ein neues Element muss eingepasst und nicht platziert werden. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
So wird der Eintrag Landingpage deiner
Eine reine Substitution hat eine Grenze: Wenn dein Produkt eine andere Hierarchie braucht, arbeiten 100vh hohe Sektionen und Abstände in 25px-Schritten dagegen. Ändere in dem Fall zuerst die Reihenfolge und danach die Werte. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Häufige Fragen
Brauche ich eine eigenständige HTML-Datei, um Intelligence Layer nachzubauen?
Intelligence Layer wurde in eine eigenständige HTML-Datei 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 lang ist der Prompt hinter Intelligence Layer?
Das erfasste Briefing umfasst 11.825 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 die Übergänge von Intelligence Layer behalten und nur die Zeitwerte ändern?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.9s mit cubic-bezier(.22, 1.36, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
