Über diese Vorlage
Lies Health Portal als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Sie beginnt mit „Trusted Dentist in West New York“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist weiß #F9F8F9 darunter, tiefes orange #1D110C für die Schrift und rot #990A09 für die Akzente. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung ist Übergänge von 2000ms und cubic-bezier(0.16,1,0.3,1) und bleibt so zurückhaltend, dass die Texte weiter führen. Nimm es als Briefing für ein Gesundheits- oder Wellness-Produkt: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Dieses Landingpage-Design richtet sich an Teams, die ein Breakpoint bei 767px gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
- Product Manager, die den Aufwand schätzen müssen, lesen ein 640x472 Rahmen als Umfang der Arbeit.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 16.908 Zeichen.
Was enthalten ist
- Schmale Navigationsleiste. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #990A09, während Wortmarke und Links auf der Textfarbe zurücktreten. Unter 767px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 767px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Fließend, wo es nötig ist. Das Briefing nutzt eine Größe zwischen 180px und 200px für die Headline, und das verhindert, dass eine lange Zeile unschön umbricht. Bedienelemente bleiben groß genug zum Tippen, und der Text behält seine Lesereihenfolge bei jeder Breite. Prüf den ersten Screen auf dem Smartphone.
- Erst der Text, dann die Dekoration. Die Komposition (Landingpage) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 640x472 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 640x472, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Navigation in einer Zeile. Die Labels passen bei 767px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Übergänge sind auf 2000ms auf cubic-bezier(0.16,1,0.3,1) festgelegt; dieser Wert gilt auch für die Bedienelemente. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation. Schnelle Zustandswechsel, keine Scroll-Timelines.
Die Bedienelemente sind die interaktive Schicht
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Die Zahlen hinter dem Eintrag Landingpage
Wo ein Moodboard die Skala offenlässt, schließt dieses Briefing sie: Abstände in 200px-Schritten und 2000ms Übergänge, und die umliegenden Werte leiten sich aus dieser Entscheidung ab. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie Health Portal den ersten Blick ordnet
Der Preis ist Geduld: Die Seite hält das Detail zurück, das ein scanbares Raster sofort liefern würde. Was sie dafür kauft, ist ein erster Screen, auf dem die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster nicht falsch gelesen werden können. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Was der Eintrag Landingpage richtig macht
Die meisten Seiten im Bereich Gesundheit hängen eine weitere Sektion an, wenn der erste Screen schwach ist. Diese hier streicht Optionen: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster in genau dieser Reihenfolge, und nichts, was das Angebot wiederholt. Health Portal nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Health Portal kopiere?
Das erfasste Briefing umfasst 16.908 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.
Wie viel von Health Portal hängt von React und Tailwind CSS ab?
Health Portal 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 Health Portal?
Auftritte und Zustandswechsel liegen im Bereich von 2000ms auf cubic-bezier(0.16,1,0.3,1). Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
