Über diese Vorlage
Aetheris Voyage hält den Entscheidungsweg fest: Hinter dem Eintrag Hero-Bereich stehen 10.190 Zeichen Briefing. „Venture Past Our Sky Across the Universe“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist schwarz #181719 darunter und gedämpftes orange #ECD9C1 für die Schrift, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 800x570, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 100ms und eine Videospur in Schleife. Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für eine Reise- oder Tourismusmarke, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 8,8s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Aetheris Voyage.
- Ersetze die Texte im Hero-Bereich-Design, bevor du Instrument Serif anfasst, weil die Größen auf die aktuellen Zeilenlängen gesetzt sind.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x570, damit die Medien darunter bis an den Rand durchlaufen.
- Am Viewport gemessen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 10px-Schritten und 100ms Übergänge. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Schrift macht das Styling. Die Schriften sind Rollen zugewiesen und nicht gemischt: Instrument Serif trägt Display und Oberfläche zusammen. Die Gewichte sind pro Rolle festgelegt, damit die Hierarchie beim Bauen nicht vom Schätzen abhängt. Behalte die Größenstufen, auch wenn du die Schrift tauschst.
- Eine Zeile, keine Schubladen. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Instrument Serif gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 8,8s in 800x570 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Das ganze Animationsbudget
Die Bedienelemente reagieren in 100ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf. Behalte die Dauern, wenn du die Seite neu gestaltest.
Die Reihenfolge im Eintrag Hero-Bereich
Die Aufmerksamkeit wird gelenkt, nicht verstreut. „Venture Past Our Sky Across the Universe“ leistet diese Arbeit ab dem ersten Frame. Das Auge landet zuerst auf der Display-Zeile, dann auf der Stützzeile, dann auf der Aktion. Belege bleiben, wo sie auftauchen, ein Streifen oder eine Zeile statt einer Wand aus Testimonials. Diese Abfolge ist das Design. Ein Leser im Bereich Reisen bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Einen schmalen Screen kann man nicht durch Verkleinern reparieren. Dieses Briefing behandelt die Änderung in Schrift und Navigation: die Skala ist fließend statt gestuft. Die Hierarchie ist das, was den Umbruch übersteht.
Was du in Aetheris Voyage zuerst änderst
Die Palette zuerst neu zu belegen ist der übliche Fehler. Sie ändert die Stimmung, ohne die Komposition anzufassen, und Abstände in 10px-Schritten und 100ms Übergänge tragen das Layout weiterhin; mach Text und Medien zuerst und die Palette zuletzt. Rahmen und Skala sind das, was unangetastet bleibt.
Häufige Fragen
Was steht eigentlich im Briefing hinter Aetheris Voyage?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x570, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Aetheris Voyage nachzubauen?
Aetheris Voyage wurde in React und Tailwind CSS 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.
Woher stammt das Design von Aetheris Voyage?
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 800x570 erfasst.
