Über diese Vorlage
Space planet ist die Referenz (Hero-Bereich) für dieses Publikum, also für eine Bildungs- oder Community-Marke. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Die Palette umfasst ton #071227 darunter, #FFFFFF für die Schrift und aufhellung #5FD0E1 für die Akzente, die Schrift ist Poppins. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1420, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 6s, cubic-bezier(.22,1.36,1) und eine Videospur in Schleife. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Bildung schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das Easing cubic-bezier(.22,1.36,1) schon enthält, statt sie dem Modell zu überlassen.
- Dieses Hero-Bereich-Design richtet sich an Teams, die eine eigenständige HTML-Datei gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
- Studio-Teams, die ein Projekt briefen und nach ein Breakpoint bei 500px suchen, um darauf zu reagieren.
Was enthalten ist
- Ein Breakpoint für die Links. Wortmarke, Links und die Aktion in #5FD0E1 teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Labels passen bei 500px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Das Video ist Hintergrund, keine Fläche. Ein Clip von 6,9s bei 1920x1420 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Exportiere in 1920x1420 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter. Exportiere bei 1920x1420 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Die Skala fällt steil ab. Die Display-Zeile steht in Poppins in einer vom Briefing festgelegten Größe, dadurch ist die Headline ein Kompositionselement und kein Absatz. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst.
- Obere Zeile: Wortmarke, Links, eine Aktion. Unter 500px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung ist ein Clip von 6,9s in 1920x1420, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Das ganze Animationsbudget
Die Bedienelemente reagieren in 6s, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Das Easing steht zusammen mit der Dauer im Briefing (6s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Übernimm die Zeiten in deinen Nachbau.
Warum diese Komposition für Bildung trägt
Space planet ist als Hero-Bereich die Referenz für eine Bildungs- oder Community-Marke und beantwortet genau das Problem dieser Nutzer. Die Palette bleibt diszipliniert (ton #071227 und aufhellung #5FD0E1), und die Schrift steht in Poppins; nichts in der Komposition hängt also an einem aufgegriffenen Trend. Für ein Briefing lohnt sich dieser Teil zum Nachbauen: ein Versprechen in Display-Größe, alles Stützende darunter. Es gibt einem Leser im Bereich Bildung den kürzesten ehrlichen Weg zum Angebot.
Die Reihenfolge im Eintrag Hero-Bereich
Die Seite hat eine bewusste Reihenfolge. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Die Headline bekommt die Display-Größe, die Stützzeile erklärt das Angebot, und der aufhellung #5FD0E1 markiert die Hauptaktion, damit der nächste Schritt nie fraglich ist. Nichts konkurriert damit: Vor der ersten Entscheidung steht kein Kartenraster, und genau das hält die Komposition (Hero-Bereich) in Bildung-Arbeiten leicht. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Space planet als Spezifikation lesen
Konkrete Zahlen altern: Ein Wert, der bei 1920x1420 passt, muss nicht zu deinem Rahmen passen. Das Briefing hält die Werte trotzdem fest: 100vh hohe Sektionen und Abstände in 72px-Schritten, weil ein genannter Wert leichter zu ändern ist als ein ungenannter. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Kann ich Hero-Bereich von Space planet in einem anderen Stack nachbauen?
Space planet 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 Space planet machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 29.105 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 Space planet kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1420, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
