Über diese Vorlage
Wellness Companion liefert für ein Gesundheits- oder Wellness-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Palette ist tiefes blau #1A1A1E darunter, gesetzt in Helvetica, Arial. Geliefert wird React und Tailwind CSS, erfasst bei 1440x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.5s, cubic-bezier(0.22, 1, 0.36, 1) und eine Videospur in Schleife aus. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für ein Gesundheits- oder Wellness-Produkt, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 5,9s Video in Schleife hinter dem Text lesbar bleibt.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 4.095 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Wellness Companion.
Was enthalten ist
- Das Briefing nennt die Stufen. Das Briefing nennt die Zahlen: Abstände in 12px-Schritten, 0.5s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1). Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr. Übernimm die Werte zusammen mit dem Layout.
- Medien ohne Overlay. Der Hintergrund ist eine einzelne Schleife von 5,9s bei 1440x1080, auf Cover zugeschnitten und ohne Tönung. Alles andere schwebt darüber auf einer höheren Ebene. Exportiere in 1440x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Panels tragen die Mitte. Das Raster übernimmt die Lesereihenfolge: Panels gleichen Gewichts, je eine Idee, in Helvetica, Arial klein gesetzt, damit die Struktur sichtbar bleibt. Der Akzent innerhalb des Rasters markiert höchstens ein Element, deshalb konkurrieren die Panels nicht miteinander.
- Größen im Briefing fixiert. Die Abstände sind genauso zitiert (Abstände in 12px-Schritten, 0.5s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Der Hintergrundclip läuft 5,9s in 1440x1080 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. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Kurze, aufeinander abgestimmte Zeiten
Die Bewegung ist hier in Millisekunden angegeben: 0.5s auf cubic-bezier(0.22, 1, 0.36, 1). Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Das Easing steht zusammen mit der Dauer im Briefing (0.5s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Was sich in Wellness Companion bewegt
Vergleich die Bewegung mit einer scroll-getriebenen Seite. Beide bewegen sich; diese bewegt sich dort, wo das Briefing es sagt (Übergänge von 0.5s und eine Medienschleife von 5,9s), sodass der Text vorn bleibt. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Die Zahlen hinter dem Eintrag Landingpage
Vergleich das mit einem Template, das seine Abstände eine Vorliebe nennt. Hier sind dieselben Werte benannt (Abstände in 12px-Schritten, 0.5s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1)), und eine Änderung behält sie entweder oder bricht die Komposition sichtbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Das Argument des Eintrags Landingpage
Eine Tönung über den Medien wäre die billige Lösung gewesen. Das Briefing lässt sie weg. Das Medium ist eine Schleife von 5,9s in 1440x1080. Der Text hält trotzdem, weil Abstände in 12px-Schritten und 0.5s Übergänge den Rahmen ruhig halten. Wellness Companion nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Wellness Companion?
Das erfasste Briefing umfasst 4.095 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 Wellness Companion nachzubauen?
Wellness Companion 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.
Darf ich Wellness Companion in einem Kundenprojekt verwenden?
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 1440x1080 erfasst.
