Über diese Vorlage
Für eine Reise- oder Tourismusmarke löst Wanderful Hero das Thema Hero-Bereich mit einem einzigen erfassten Briefing. „Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure“ ist die Zeile, auf die das Layout gebaut ist. Die Typografie ist Inter, und das Briefing legt die Größen fest, statt sie einer Skala zu überlassen. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Nimm es als Briefing für eine Reise- oder Tourismusmarke: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Entwickler, die das Hero-Bereich-Design auch bei langsamer Verbindung am Leben halten müssen, planen 640x470 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Designer, die zuerst die Zahlen brauchen: Schrift von 15px bis 17px und Abstände in 11px-Schritten, alle aus dem Briefing zitiert.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 4.223 Zeichen.
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 640x470, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Skala für Schrift und Rahmen. Schrift und Abstände stammen hier aus einer einzigen Liste: Schrift von 15px bis 17px und Abstände in 11px-Schritten. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern. Übernimm die genannten Werte mit dem Layout.
- Navigation ohne Hintergrund. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Schrift von 15px bis 17px und Abstände in 11px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band.
- Werte bis in den Build. Die Abstände sind genauso zitiert (Schrift von 15px bis 17px und Abstände in 11px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Position statt Timer
Beim Scrollen verändert beim Scrollen bewegen sich die Hintergrundebenen anders als der Vordergrund die Komposition, die Reihenfolge des Layouts bleibt fest. Der Effekt ist dekorativ: Schalte ihn ab, und die Hierarchie funktioniert weiter.
Hover, aber sparsam
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte, der Rest des Layouts ist eine feste Komposition. Die interaktiven Ziele sind groß genug zum Tippen, und die Zeiger-Behandlung ist über alle hinweg einheitlich. Animiere im Hover kein Layout.
Was du in Wanderful Hero zuerst änderst
Wo ein Theme dir Komponenten gibt, gibt dieses Briefing dir eine Komposition: Schrift von 15px bis 17px und Abstände in 11px-Schritten und einen Medienrahmen, das Thema bleibt bei dir. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Wie Wanderful Hero den ersten Blick ordnet
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Navigation, die Überschrift, die Kennzahlen-Zeile und der Hintergrund-Clip, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich Reisen bekommt das Angebot vor den Optionen.
Wanderful Hero als Spezifikation lesen
Wenn ein Nachbau driftet, gehen zuerst die Abstände. Wanderful Hero vermeidet das, indem Schrift von 15px bis 17px und Abstände in 11px-Schritten zusammen mit der Komposition veröffentlicht werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Wanderful Hero kopiere?
Das erfasste Briefing umfasst 4.223 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 React und Tailwind CSS, um Wanderful Hero nachzubauen?
Wanderful Hero 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.
Wie ist dieser Eintrag zu Wanderful Hero aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 4.223 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
