Über diese Vorlage
Bevor du beim Thema Hero-Bereich für eine Agentur oder ein Studio nachbaust, lies Lumina: Komposition und Spezifikation stehen beide hier. Die Palette ist rot #EC4899 darunter und helles blau #3B82F6 für die Akzente. Geliefert wird eine einzelne Komponente: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Das Bewegungsbudget umfasst eine Videospur in Schleife. Nimm es als Briefing für eine Agentur oder ein Studio: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen Abstände in 70px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Teams, die den Auftritt eines Wettbewerbers als Hero-Bereich im Bereich Agentur nachbauen und eine einzelne Komponente festlegen wollen, bevor sich jemand auf ein Framework festlegt.
- Übernimm die Struktur aus dem Hero-Bereich-Layout komplett und nimm ein 2056x1478 Rahmen als Maßstab für jede Zeile.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #3B82F6 und kommt über Abstände in 70px-Schritten nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #3B82F6 ist das einzige Element in der Leiste mit Gewicht.
- Ein Clip, keine Illustration. Der Rahmen 2056x1478 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Die Schleife ist kurz genug (6s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Navigation ohne Hintergrund. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 2056x1478, damit die Medien darunter bis an den Rand durchlaufen.
- Feste Stufen statt einer Skala. Das Briefing legt Abstände in 70px-Schritten fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 6s in 2056x1478, 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.
Der Streifen, der nie anhält
Der horizontale Streifen ist nach der Überschrift das lauteste Element: durchgehende Bewegung, #3B82F6 auf dem aktiven Eintrag, und er verlangt dem Leser nie eine Interaktion ab. Der aktive Eintrag ist mit #3B82F6 markiert und nicht mit einer Größenänderung.
Lumina als Spezifikation lesen
Wo ein Moodboard die Skala offenlässt, schließt dieses Briefing sie: Abstände in 70px-Schritten, und die umliegenden Werte leiten sich aus dieser Entscheidung ab. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Bewegung ist eine kurze Liste und kein System: Hover- und Druckzustände, eine Medienschleife von 6s und ein laufendes Laufband, und der Rest der Seite bleibt still. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
So wird der Eintrag Hero-Bereich deiner
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. Abstände in 70px-Schritten sind die Werte, die sich nicht bewegen sollten. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Lumina kopiere?
Das erfasste Briefing umfasst 2.677 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.
Brauche ich eine einzelne Komponente, um Lumina nachzubauen?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für eine einzelne Komponente geschrieben, dieselbe Komposition lässt sich aber in allem nachbauen, was du ohnehin nutzt. Der Stack ist genannt, damit du weißt, wie die Referenz entstanden ist.
Wie ist dieser Eintrag zu Lumina aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.677 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
