Über diese Vorlage
Quantum Lucid: Landingpage für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Palette ist neutral #F2F2F2 darunter, fast schwarz #000000 für die Schrift und abdunkelung #38C6EC für die Akzente, gesetzt in Figtree. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1412, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 1200ms, cubic-bezier(.22, 1.36, 1) und eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 20.249 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Externe Teams, die ein Landingpage-Design übernehmen und Easing cubic-bezier(.22, 1.36, 1) im Repository festhalten müssen, bevor der erste Commit läuft.
- Gemacht für Agenturen, die Projekte aus dem Bereich SaaS pitchen und eine eigenständige HTML-Datei schon in der ersten Antwort an den Kunden brauchen.
- Dieses Landingpage-Design richtet sich an Teams, die ein Breakpoint bei 216px gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #38C6EC, alles über der Komposition (Landingpage) und ohne eigene Hintergrundfläche. Die Labels passen bei 216px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Video in der untersten Ebene. Der erste Screen ist ein einzelner Clip bei 1920x1412, alles andere ist darauf angeordnet. Das Poster bei 1920x1412 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Ein Breakpoint für die Links. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht. Die Referenz wurde mit 1920x1412 erfasst.
- Werte bis in den Build. Die Größen sind zitiert und nicht vererbt: 100vh hohe Sektionen, Radius 26px, Abstände in 14px-Schritten und 1200ms Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Die Bewegung ist hier in Millisekunden angegeben: 1200ms mit cubic-bezier(.22, 1.36, 1). Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System.
Interaktion bleibt lokal
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte und Tabs oder ein Akkordeon, das Inhalte an Ort und Stelle austauscht; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Die interaktiven Ziele sind groß genug zum Tippen, und die Zeiger-Behandlung ist über alle hinweg einheitlich. Halte die Zeiger-Effekte bei den Bedienelementen.
Das Argument des Eintrags Landingpage
Wenn du ein Briefing zum Thema Landingpage im Bereich SaaS schreibst, ist das Schwierigste die Entscheidung, was der erste Screen nicht sagen soll. Quantum Lucid beantwortet das vorab: eine Display-Zeile, die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster dahinter. Quantum Lucid nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Quantum Lucid den ersten Blick ordnet
Setz deinen eigenen Text in diesen Eintrag Landingpage, und die Abfolge hält, weil die Elemente nicht austauschbar sind: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster tragen jeweils eine Aufgabe. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was du in Quantum Lucid zuerst änderst
Setz den neuen Text in der Display-Größe, die das Briefing nennt (100vh hohe Sektionen und Abstände in 14px-Schritten), und der Rest der Skala folgt ohne Redesign. Substitution ist billiger als Komposition, und darum geht es.
Häufige Fragen
Brauche ich eine eigenständige HTML-Datei, um Quantum Lucid nachzubauen?
Quantum Lucid 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.
Was steht eigentlich im Briefing hinter Quantum Lucid?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1412, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Was steuert die Bewegung in Quantum Lucid?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 1200ms mit cubic-bezier(.22, 1.36, 1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
