Über diese Vorlage
Wellness Balance zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein Gesundheits- oder Wellness-Produkt, und die Anweisungen dazu sind veröffentlicht. Die Zeile lautet „Discover our new plant-based supplements for daily balance and clean energy“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Die Palette umfasst weiß #ECEDEC darunter und weiß #FEFDF9 für die Schrift, die Schrift ist DM Sans. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.8s und cubic-bezier(0.16, 1, 0.3, 1) aus. Am nützlichsten ist es, wenn beim Eintrag Hero-Bereich für Gesundheit ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Übernimm den 640x472-Rahmen und Schrift von 28px bis 35px und Abstände in 110px-Schritten aus diesem Hero-Bereich-Design, bevor du irgendetwas anderes mitnimmst.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 7.840 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Wellness Balance.
Was enthalten ist
- Navigation in einer Zeile. Eine schmale Leiste liegt über der Komposition (Hero-Bereich), die Wortmarke links, die Links in DM Sans gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x472, damit die Medien darunter bis an den Rand durchlaufen. Halte die Zeile einzeilig.
- Größen stehen im Briefing. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: Schrift von 28px bis 35px, Abstände in 110px-Schritten, 0.8s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Schmale Navigationsleiste. Eine Aktion pro Leiste. Die Referenz wurde mit 640x472 erfasst.
- Abstände als Werte genannt. Die Abstände sind genauso zitiert (Schrift von 28px bis 35px, Abstände in 110px-Schritten, 0.8s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Rückmeldung an den Bedienelementen
Die Rückmeldung beschränkt sich auf ein Slider, der Inhalte auf Anfrage weiterblättert, der Rest des Layouts ist eine feste Komposition. Die Rückmeldung bleibt auf die Bedienelemente beschränkt, die Komposition um sie herum bleibt also still. Halte die interaktive Ebene klein.
Dauern aus dem Briefing
Das Briefing legt den Übergangswert auf 0.8s fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Das Easing steht zusammen mit der Dauer im Briefing (0.8s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Schnelle Zustandswechsel, keine Scroll-Timelines.
Das Argument des Eintrags Hero-Bereich
7.840 Zeichen Briefing ergeben einen Screen ohne Füllmaterial. Die Werte darin sind ausgeschrieben (Schrift von 28px bis 35px und Abstände in 110px-Schritten), und deshalb liest die Komposition auch dann noch, wenn der Text wechselt. Wellness Balance nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
So wird der Eintrag Hero-Bereich deiner
Fang mit dem Text an, nicht mit der Farbe. Schreib „Discover our new plant-based supplements for daily balance and clean energy“ zu einem Satz über dein Produkt um und setz ihn in DM Sans in der Größe, die das Briefing verwendet. Behalt den Medienzuschnitt; er leistet so viel wie die Schrift.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Jeder Übergang hier hat eine Zahl. Deshalb lassen sich Übergänge von 0.8s und eine Überschrift Wort für Wort Wert für Wert portieren, statt nach Gefühl neu abzustimmen. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Wellness Balance kopiere?
Das erfasste Briefing umfasst 7.840 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 Wellness Balance in einem anderen Stack nachbauen?
Wellness Balance 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.
Was steuert die Bewegung in Wellness Balance?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.8s auf cubic-bezier(0.16, 1, 0.3, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
