Über diese Vorlage
Wellness Devicex wurde bei 1460x1080 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Palette ist schwarz #0A0A0A darunter und gedämpftes blau #64748B für die Akzente, gesetzt in Inter. 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 60ms, cubic-bezier(0.77, 0, 0.18, 1) und eine Videospur in Schleife aus. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein Gesundheits- oder Wellness-Produkt.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und 100vh hohe Sektionen und Abstände in 24px-Schritten vor der ersten Runde verbindlich haben wollen.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Gesundheit 4,4s Video in Schleife tragen kann.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 6.903 Zeichen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #64748B 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 #64748B ist das einzige Element in der Leiste mit Gewicht.
- Feste Stufen statt einer Skala. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: 100vh hohe Sektionen, Abstände in 24px-Schritten, 60ms Übergänge und Easing cubic-bezier(0.77, 0, 0.18, 1). Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Die Schleife als Hintergrund. Ein Clip von 4,4s bei 1460x1080 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Die Schleife ist kurz genug (4,4s), dass das Auge sie als Textur liest und nicht als Zeitachse. Exportiere bei 1460x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Zwei Schriften, klare Aufgaben. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Die Zeilenhöhe folgt den Größenstufen und nicht einem einzigen globalen Wert.
Bewegung & Interaktion
Kurze, benannte Zeiten
Eine Dauer deckt alle Interaktionen ab (60ms auf cubic-bezier(0.77, 0, 0.18, 1)); so wirken Hover und Druck als ein System. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation. Die Zeiten gehören zum Design, nicht in den Feinschliff.
Die Seite reagiert auf den Scroll
Die Scroll-Position treibt die Komposition, kein Timer: beim Scrollen bewegen sich die Hintergrundebenen anders als der Vordergrund. Es sind ein paar Zeilen statt einer Scroll-Bibliothek, der Nachbau bleibt also leicht. Teste es mit aktivierter reduzierter Bewegung.
Wie der Eintrag Landingpage umbricht
Breit ist die Komposition dicht; schmal gilt: der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen. Beide Zustände sind im Briefing beschrieben. Die Skala folgt dem Viewport; die Abfolge bleibt.
Was du in Wellness Devicex zuerst änderst
Die meisten fangen mit der Akzentfarbe an. Fang stattdessen beim Versprechen an: Schreib die Display-Zeile um und prüf dann gedämpftes blau #64748B gegen deine eigenen Medien. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Die Reihenfolge im Eintrag Landingpage
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip bleiben an ihrem Platz, und 100vh hohe Sektionen und Abstände in 24px-Schritten werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Wellness Devicex?
Das erfasste Briefing umfasst 6.903 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 Landingpage von Wellness Devicex in einem anderen Stack nachbauen?
Wellness Devicex 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.
Kann ich die Übergänge von Wellness Devicex behalten und nur die Zeitwerte ändern?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 60ms auf cubic-bezier(0.77, 0, 0.18, 1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
