Über diese Vorlage
Wellness Hero: Hero-Bereich für Gesundheit, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Typografie ist Inter, und das Briefing legt die Größen fest, statt sie einer Skala zu überlassen. Es kommt als React und Tailwind CSS, damit sich der ganze Hero-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Diese Referenz ist für ein Gesundheits- oder Wellness-Produkt gedacht, wenn der erste Screen vor dem Build feststehen soll.
Gemacht für
- Growth-Teams, die ein Hero-Bereich-Design für ein Gesundheits- oder Wellness-Produkt neu einfärben und den 640x468-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Hero-Bereich-Design als Muster, das jede weitere Seite kopiert.
- Produktteams, die die Hero-Bereich-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
Was enthalten ist
- Ein Breakpoint für die Links. Die Leiste überlagert Hero-Bereich, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x468, damit die Medien darunter bis an den Rand durchlaufen. Halte die Zeile einzeilig.
- Schmale Navigationsleiste. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Zwei Schriften, klare Aufgaben. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Inter in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Ein Schrifttausch ist möglich, die Proportionen müssen ihn aber überstehen.
- Die Ankündigungs-Pille. Ein Badge, eine Botschaft: die Pille sitzt in Inter auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es ist so positioniert, dass die Headline die Mitte der Komposition behält. Halte es über der Headline, nie daneben.
Bewegung & Interaktion
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x468-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Statisch mit Absicht
Das Briefing lässt Animation weg und überlässt die Seite dem 640x468-Layout, nur Hover- und Druckzustände ändern sich.
Wellness Hero als Spezifikation lesen
Wenn ein Nachbau driftet, gehen zuerst die Abstände. Wellness Hero vermeidet das, indem ein 640x468 Rahmen zusammen mit der Komposition veröffentlicht werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Hero-Bereich
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip bleiben an ihrem Platz, und ein 640x468 Rahmen werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Was du in Wellness Hero zuerst änderst
Ändere zuerst den Inhalt und prüf danach den Rahmen. ein 640x468 Rahmen sind die Werte, die du beim Tauschen des Textes schützt. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Häufige Fragen
Was steht eigentlich im Briefing hinter Wellness Hero?
Das erfasste Briefing umfasst 4.719 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.
Warum steht der Prompt von Wellness Hero hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 4.719 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von Wellness Hero hängt von React und Tailwind CSS ab?
Die Referenz ist zufällig in React und Tailwind CSS gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
