Über diese Vorlage
Lies Airlines Hero Section als Spezifikation zum Thema Hero-Bereich: Die Werte standen fest, bevor die Seite gebaut wurde. Die Palette umfasst tiefes indigo #20153E darunter und indigo #56489B für die Akzente, die Schrift ist Inter. Die Referenz ist mit eine eigenständige HTML-Datei gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Das Bewegungsbudget umfasst eine Videospur in Schleife. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Reisen schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Externe Teams, die ein Hero-Bereich-Design übernehmen und eine eigenständige HTML-Datei im Repository festhalten müssen, bevor der erste Commit läuft.
- Product Manager, die den Aufwand schätzen müssen, lesen ein 1466x1080 Rahmen als Umfang der Arbeit.
- Teams, die den Auftritt eines Wettbewerbers als Hero-Bereich im Bereich Reisen nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
Was enthalten ist
- Ein Breakpoint für die Links. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #56489B, während Wortmarke und Links auf der Textfarbe zurücktreten. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #56489B ist das einzige Element in der Leiste mit Gewicht.
- Eine Skala für Schrift und Rahmen. Die Größen wurden am Render in 1466x1080 abgelesen: 100vh hohe Sektionen und Abstände in 14px-Schritten. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet. Miss nach, bevor du anpasst.
- Die Skala ist das Styling. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Ein Schriftwechsel ist unproblematisch, solange Größen und Gewichte dort bleiben, wo das Briefing sie gesetzt hat.
- Zurückhaltende Navigation. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1466x1080, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Hover nur, wo er etwas bedeutet
Jedes interaktive Element tut eine Sache (Hover-Zustände auf Buttons und Links statt auf jeder Karte), dadurch bleiben die Zustände vorhersehbar. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts. Halte die Zeiger-Effekte bei den Bedienelementen.
Hintergrundbewegung ohne Scroll-Bibliothek
Der Hintergrundclip läuft 2,2s in 1466x1080 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. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Das Argument des Eintrags Hero-Bereich
Wo ein Template den Fold mit Modulen füllt, ist die Liste im Eintrag Hero-Bereich kurz: die Navigation, die Überschrift, die Kennzahlen-Zeile und der Hintergrund-Clip, und dann ist Schluss. Nichts wird aufgebläht, um Fläche zu füllen; genau das belegen 100vh hohe Sektionen und Abstände in 14px-Schritten. Airlines Hero Section nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Airlines Hero Section den ersten Blick ordnet
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 indigo #56489B 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 Reisen-Arbeiten leicht. Ein Leser im Bereich Reisen bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Übernimm das Muster und nicht die Werte: Behalte die Art der Bewegung, die hier genannt wird (Hover- und Druckzustände, eine Medienschleife von 2,2s und ein laufendes Laufband), und lass deine Marke die Dauern setzen. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Wie lang ist der Prompt hinter Airlines Hero Section?
Das erfasste Briefing umfasst 2.222 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 eigenständige HTML-Datei, um Airlines Hero Section nachzubauen?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für eine eigenständige HTML-Datei 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.
Ist das Briefing zu Airlines Hero Section dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.222 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
