Über diese Vorlage
Planor wurde bei 1964x1402 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Farbe bleibt auf orange #634635 darunter und weiß #E5E7EB für die Schrift begrenzt, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1964x1402, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 0.2s und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 3.036 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Hero-Bereich-Briefing und lass den Prompt eine eigenständige HTML-Datei festhalten.
- Wenn drei Leute an einem Hero-Bereich-Design arbeiten, gib Content-Leads eine feste Display-Größe von 58px und Abstände in 30px-Schritten statt eines Screenshots.
- Teams, die den Auftritt eines Wettbewerbers als Hero-Bereich im Bereich SaaS nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
Was enthalten ist
- Navigation ohne Hintergrund. Die Leiste überlagert Hero-Bereich, 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 1964x1402, damit die Medien darunter bis an den Rand durchlaufen. Halte die Zeile einzeilig.
- Nichts davon ist geerbt. Schrift und Abstände stammen hier aus einer einzigen Liste: eine feste Display-Größe von 58px, Abstände in 30px-Schritten und 0.2s Übergänge. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
- Eine Zeile, keine Schubladen. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay.
- Abstände als Werte genannt. Die Abstände sind genauso zitiert (eine feste Display-Größe von 58px, Abstände in 30px-Schritten und 0.2s Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 6,4s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren.
Kurze, aufeinander abgestimmte Zeiten
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 0.2s. Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Das Easing steht zusammen mit der Dauer im Briefing (0.2s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie Planor den ersten Blick ordnet
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag Hero-Bereich die Navigation, die Überschrift und der Hintergrund-Clip vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Die Schrift ist hier geklemmt und nicht gestuft (eine Größe zwischen 58px und 30px); die Display-Zeile springt deshalb nicht zwischen Breiten. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Was du in Planor zuerst änderst
Angenommen, du hast nur einen Nachmittag. Ändere die Zeile und das Label der Handlung; eine feste Display-Größe von 58px und Abstände in 30px-Schritten bleiben unangetastet, und du hast eine Seite, die beabsichtigt aussieht. Rahmen und Skala sind das, was unangetastet bleibt.
Häufige Fragen
Kann ich Hero-Bereich von Planor in einem anderen Stack nachbauen?
Planor 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 Planor eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1964x1402, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Darf ich Planor 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 1964x1402 erfasst.
