Über diese Vorlage
Intelligent Performance ist eine brauchbare Referenz für dieses Publikum: die Komposition (Landingpage), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Die Überschrift der Seite lautet „Built for Intelligent Performance“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist neutral #ECECEB darunter, #222222 für die Schrift und rot #FF6796 für die Akzente, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1418, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 08s, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 26.839 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Das Landingpage-Design zielt auf Teams, die eine eigenständige HTML-Datei schon kennen und nur Easing cubic-bezier(.16,1.3,1) schriftlich brauchen.
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm eine eigenständige HTML-Datei als Maßstab für jede Zeile.
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein Breakpoint bei 767px behalten und den Rest des Landingpage-Designs neu bauen.
Was enthalten ist
- Links vor der Aktion. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #FF6796 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Unter 767px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Das Posterbild ist entscheidend. Der Rahmen 1920x1418 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Exportiere in 1920x1418 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Das Verhalten ist pro Breite definiert. Das obere Ende der Skala ist fließend (eine Größe zwischen 16px und 14px), der Rest ist fest, damit der Rahmen auch bei schmalerem Viewport komponiert bleibt. Weil die Skala begrenzt ist, springt die Display-Zeile nie zwischen Breakpoints.
- Ein Breakpoint für die Links. Die Labels passen bei 767px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Eine Aktion pro Leiste.
Bewegung & Interaktion
Das ganze Animationsbudget
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 08s bei jedem Zustandswechsel. Das Easing steht zusammen mit der Dauer im Briefing (08s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Oberfläche hat Körnung
Eine Körnung liegt als Overlay auf neutral #ECECEB und verhindert, dass große flache Flächen als bloße Farbe wirken, ohne dass ein Verlauf dazukommt. Die Körnung ist so subtil, dass sie nie mit der Schrift konkurriert.
Die Reihenfolge im Eintrag Landingpage
In dieser Reihenfolge: die Navigation, die Überschrift, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste. Jedes Element hat eine Aufgabe, und rot #FF6796 ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Landingpage umbricht
Der Eintrag Landingpage wird bei 1920x1418 komponiert und für schmale Breiten neu komponiert. die Skala ist fließend statt gestuft, das Layout wechselt bei 767px und der Bereich wird auf 100vh gehalten, die Telefon-Version ist also eine Entscheidung und keine Quetschung. Bei schmalen Breiten fällt nichts Wichtiges weg.
Die Zeitwerte hinter dem Eintrag Landingpage
Der Preis ist, dass die Animation hier keinen zweiten Blick belohnt. Belohnt wird die Leserichtung, und Übergänge von 08s, eine Medienschleife von 3,5s und ein maskierter Zeilen-Reveal bestätigen Zustände, statt zu dekorieren. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Kann ich Landingpage von Intelligent Performance in einem anderen Stack nachbauen?
Intelligent Performance 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.
Ist der Prompt zu Intelligent Performance eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1418, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich eine aus Intelligent Performance nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 1920x1418 erfasst.
