Über diese Vorlage
Lies Mind-Body Healing als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Die Überschrift der Seite lautet „Holistic wellness. Transformative results“, und die Komposition ist um genau diese Worte gebaut. Das Farbschema ist gedämpftes indigo #D1C4E9 darunter und magenta #AD4A80 für die Akzente, und die Seite ist in Inter gesetzt. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Das Briefing gibt sein Bewegungsbudget für Übergänge von 500ms und eine Videospur in Schleife aus. Am nützlichsten ist es, wenn beim Eintrag Landingpage für Gesundheit ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Dieses Landingpage-Design richtet sich an Teams, die ein 1468x1080 Rahmen gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Gesundheit 6,8s Video in Schleife tragen kann.
- Gemacht für einen Solo-Gründer, der ein Landingpage-Design für ein Gesundheits- oder Wellness-Produkt ausliefert und kein Designsystem im Rücken hat.
Was enthalten ist
- Ein Breakpoint für die Links. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #AD4A80, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #AD4A80 ist das einzige Element in der Leiste mit Gewicht. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Das Briefing nennt die Stufen. Die Größen sind zitiert und nicht vererbt: 100vh hohe Sektionen und 500ms Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
- Video in der untersten Ebene. Das Video liegt in der untersten Ebene der Komposition 1468x1080, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Exportiere in 1468x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Zwei Schriften, klare Aufgaben. Die Schriften sind Rollen zugewiesen und nicht gemischt: Inter trägt Display und Oberfläche zusammen. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 6,8s in 1468x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren. Dreh oder exportiere in 1468x1080 oder breiter.
Kurze, aufeinander abgestimmte Zeiten
Das Animationsbudget ist klein und ausdrücklich benannt: 500ms, eingesetzt für Zustandswechsel und nicht für Auftritte. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf.
Wie der Eintrag Landingpage umbricht
Wo ein Template auf eine Spalte zusammenklappt und hofft, sagt dieses Briefing, was passiert (der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen), und lässt die Reihenfolge intakt. Die Reihenfolge ist das Letzte, was sich ändert.
Warum das Briefing für Gesundheit trägt
Mind-Body Healing ist als Landingpage die Referenz für ein Gesundheits- oder Wellness-Produkt und beantwortet genau das Problem dieser Nutzer. Die Seite sagt es selbst: „Holistic wellness. Transformative results“. Die Palette bleibt diszipliniert (gedämpftes indigo #D1C4E9 und magenta #AD4A80), und die Schrift steht in Inter; 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.
Mind-Body Healing als Spezifikation lesen
Zerleg den Eintrag Landingpage, und die Werte beschreiben ihn weiterhin: 100vh hohe Sektionen und 500ms Übergänge geben Rahmen und Rhythmus darunter vor. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Mind-Body Healing kopiere?
Das erfasste Briefing umfasst 5.232 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 Mind-Body Healing hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.232 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Mind-Body Healing 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.
