Über diese Vorlage
Lies Adventra als Spezifikation zum Thema Hero-Bereich: Die Werte standen fest, bevor die Seite gebaut wurde. Die Überschrift der Seite lautet „Home, Our Story, FAQ, Policies“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf schwarz #303230 darunter und grau #CAC7BD für die Schrift begrenzt, gesetzt in Inter. Der Bau ist eine eigenständige HTML-Datei; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung beschränkt sich auf eine Videospur in Schleife. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Agentur schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Übergib eine eigenständige HTML-Datei zusammen mit dem 1856x1398-Zuschnitt an die Entwicklung und lass sie den Rest nachbauen.
- Dieses Hero-Bereich-Design richtet sich an Designer, die einen Build in eine eigenständige HTML-Datei an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
- Frontend-Entwickler, die das im Normalbetrieb ausliefern müssen, nutzen eine eigenständige HTML-Datei als Referenzimplementierung.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste ist eine Zeile aus Text und einer Aktion, auf eine feste Display-Größe von 60px und 100vh hohe Sektionen bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1856x1398, damit die Medien darunter bis an den Rand durchlaufen. Eine Aktion pro Leiste.
- Navigation in einer Zeile. Die Wortmarke ist als Schrift behandelt und nicht als Logo-Lockup, wodurch die obere Zeile auf einer Grundlinie bleibt. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Größen im Briefing fixiert. Das Briefing hält seine Größen bei der Aufnahme fest (eine feste Display-Größe von 60px, 100vh hohe Sektionen und Abstände in 16px-Schritten), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
- Ein Clip trägt alles. Das Briefing legt das Video auf 1856x1398 mit einer Schleife von 7s fest, und jedes Textelement ist gegen diesen Rahmen gesetzt. Das Poster bei 1856x1398 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Der Hintergrundclip läuft 7s in 1856x1398 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. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Die Bedienelemente sind die interaktive Schicht
Die Zeiger-Arbeit ist klein und festgelegt: Hover-Zustände auf Buttons und Links statt auf jeder Karte, angewendet auf die Elemente, die schon interaktiv aussehen. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen. Animiere im Hover kein Layout.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Zähl die animierten Elemente, und die Liste ist kurz: eine Überschrift Wort für Wort, eine Medienschleife von 7s und Hover- und Druckzustände. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
So wird der Eintrag Hero-Bereich deiner
Ändere zuerst Text und Medien, dann die Farbe, zuletzt das Layout. Der Rahmen mit 1856x1398 und die Skala in Inter halten die Seite zusammen; ersetze also um sie herum und nicht durch sie hindurch. Das Thema ist der Teil, der sich ändern sollte.
Wie Adventra den ersten Blick ordnet
Nichts konkurriert hier mit der ersten Entscheidung. „Home, Our Story, FAQ, Policies“ leistet diese Arbeit ab dem ersten Frame. Das Stützmaterial wartet unter dem Fold, und die Navigation und der Hintergrund-Clip tragen die obere Seite allein. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Ist der Prompt zu Adventra eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 3.134 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Wie viel von Adventra hängt von eine eigenständige HTML-Datei ab?
Adventra 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 Adventra machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.134 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
