Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von Wellbeing OS, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Das Farbschema ist tiefes orange #2C221C darunter und orange #BF9423 für die Akzente, und die Seite ist in Helvetica, Segoe UI, Roboto gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1460x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 400ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife aus. Es ist die richtige Referenz für eine Hero-Bereich, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein Gesundheits- oder Wellness-Produkt.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 5,8s Video in Schleife hinter dem Text lesbar bleibt.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 5.051 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Wellbeing OS.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #BF9423 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #BF9423 ist das einzige Element in der Leiste mit Gewicht. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Am Viewport gemessen. Das Briefing hält seine Größen bei der Aufnahme fest (Abstände in 160px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Medien ohne Overlay. Der Clip läuft 5,8s in 1460x1080 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Das Poster bei 1460x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Die Display-Größe trägt die Aussage. Die Schrift ist Helvetica, Segoe UI, Roboto, und das Briefing gibt ihr eine Aufgabe, statt für Abwechslung zu mischen. Gewicht, Laufweite und Größenstufen sind festgelegt, damit die Hierarchie einen Schrifttausch übersteht. Die Ziffern nutzen dieselbe Schrift wie das Interface, Statistiken und Labels gehören damit zu einem System.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Die Bewegung ist hier in Millisekunden angegeben: 400ms mit cubic-bezier(0.16,1,0.3,1). Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 5,8s in 1460x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Die Zahlen hinter dem Eintrag Hero-Bereich
Die Seite enthält mehr Zahlen, als es den Anschein hat. Abstände in 160px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1) sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was ein Gesundheits- oder Wellness-Produkt hier gewinnt
Wellbeing OS ist als Hero-Bereich die Referenz für ein Gesundheits- oder Wellness-Produkt und beantwortet genau das Problem dieser Nutzer. Die Palette bleibt diszipliniert (tiefes orange #2C221C und orange #BF9423), und die Schrift steht in Helvetica, Segoe UI, Roboto; nichts in der Komposition hängt also an einem aufgegriffenen Trend. Für ein Briefing lohnt sich dieser Teil zum Nachbauen: ein Versprechen in Display-Größe, alles Stützende darunter. Es gibt einem Leser im Bereich Gesundheit den kürzesten ehrlichen Weg zum Angebot.
Wie Wellbeing OS 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 Kennzahlen-Zeile, der Hintergrund-Clip und der Footer, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Wellbeing OS?
Das erfasste Briefing umfasst 5.051 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.
Kann ich Hero-Bereich von Wellbeing OS in einem anderen Stack nachbauen?
Wellbeing OS 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 gehe ich mit den Medien von Wellbeing OS in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1460x1080 erfasst.
