Über diese Vorlage
Cast and Render liefert für eine 3D-, Game- oder Entertainment-Marke einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Palette ist neutral #F2F0EC darunter und fast schwarz #0A0908 für die Schrift, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1432, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 3s, cubic-bezier(.22.61.36,1) und eine Videospur in Schleife aus. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine 3D-, Game- oder Entertainment-Marke.
Gemacht für
- Halte Easing cubic-bezier(.22.61.36,1) in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Gemacht für Agenturen, die Projekte aus dem Bereich 3D pitchen und eine eigenständige HTML-Datei schon in der ersten Antwort an den Kunden brauchen.
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein Breakpoint bei 280px behalten und den Rest des Landingpage-Designs neu bauen.
Was enthalten ist
- Links vor der Aktion. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unter 280px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Die Labels passen bei 280px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Ein randloses Video hinter der Schrift. Ein Asset von 4,9s trägt den ganzen ersten Bildschirm, und die Seite hat kein zweites Medienelement, das synchron gehalten werden müsste. Die Schleife ist kurz genug (4,9s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Schrift trägt die Hierarchie. Die Schrift ist Inter an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Laufweite wird enger, je größer die Schrift wird, deshalb hält die Display-Zeile über 12–15px zusammen.
- Der Aufbau passt in einen Screen. Die Komposition (Landingpage) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 1920x1432 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 1920x1432, und deshalb hält sie zusammen, wenn sich der Text ändert.
Bewegung & Interaktion
Die Seite reagiert auf den Scroll
Der Inhalt hängt an der Scroll-Position (beim Eintritt in den Viewport werden Sektionen sichtbar); die Komposition ändert sich also im Tempo des Lesers und nicht nach einem Timer. Der Effekt ist dekorativ: Schalte ihn ab, und die Hierarchie funktioniert weiter. Hänge die Texte nie hinter einen Scroll-Trigger.
Das ganze Animationsbudget
Eine Dauer deckt alle Interaktionen ab (3s mit cubic-bezier(.22.61.36,1)); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (3s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Cast and Render als Spezifikation lesen
Fast jede Entscheidung hier ist ein prüfbarer Wert: Schrift von 12px bis 15px, 560vh hohe Sektionen, Radius 999px, Abstände in 14px-Schritten und 3s Übergänge. Das Medium ist eine Schleife von 4,9s in 1920x1432. Die Schrift bleibt in Inter, ein Ersatz muss also dieselben Proportionen behalten. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Landingpage
Wenn ein Leser im Bereich 3D auf einem einzelnen Screen landet, scannt er, bevor er liest. Das Layout antwortet darauf: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Countdown sind auf das Scannen hin dimensioniert, und Schrift von 12px bis 15px und 560vh hohe Sektionen halten jede Station unterscheidbar. Ein Leser im Bereich 3D bekommt das Angebot vor den Optionen.
Warum das Briefing für 3D trägt
Du könntest das als Stapel einzelner Karten nachbauen und würdest nur das Argument verlieren. Der Eintrag Landingpage liest sich als eine Entscheidung: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Countdown in einer einzigen Abfolge. Cast and Render nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Wie viel von Cast and Render hängt von eine eigenständige HTML-Datei ab?
Cast and Render 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 kann ich mit dem Briefing zu Cast and Render machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 18.074 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was bekomme ich, wenn ich das Briefing zu Cast and Render kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1432, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
