Über diese Vorlage
Pet Diagnostics liefert für ein Gesundheits- oder Wellness-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Palette umfasst #101010 darunter und creme #EEF0D0 für die Schrift, die Schrift ist Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 2336x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf eine Videospur in Schleife beschränkt. Wenn du ein Briefing zum Thema Landingpage im Bereich Gesundheit schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gemacht für Studios, die einem Kunden das Verhalten bei 820px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich Gesundheit nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
- Schreib deine eigene Headline und baue dieses Landingpage-Design dann in eine eigenständige HTML-Datei mit unveränderten Maßen nach.
Was enthalten ist
- Navigation ohne Hintergrund. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Unter 820px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Die Labels passen bei 820px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Ein randloses Video hinter der Schrift. Die Medien sind ein Clip von 7,1s, auf volle Abdeckung des Rahmens 2336x1080 zugeschnitten, damit bei keiner Breite schwarze Ränder entstehen. Das Poster bei 2336x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Die Skala ist begrenzt, nicht gestuft. Breitenänderungen stecken in der Schrift selbst: eine Größe zwischen 12px und 16px trägt die Headline vom Smartphone bis zum Desktop, ohne eigene mobile Komposition. Weil die Skala begrenzt ist, springt die Display-Zeile nie zwischen Breakpoints.
- Belege in einer Zeile. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Landingpage) davon ab, zur Feature-Liste zu werden. Die Zahlen nutzen dieselbe Schrift wie die Oberfläche, damit sie zur Seite gehören und sie nicht unterbrechen.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Ein einziger Clip von 7,1s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Die Bedienelemente sind die interaktive Schicht
Zustände werden pro Komponente behandelt (Hover-Zustände auf Buttons und Links statt auf jeder Karte) und nicht von einer globalen Animationsschicht. Die Rückmeldung bleibt auf die Bedienelemente beschränkt, die Komposition um sie herum bleibt also still. Halte die interaktive Ebene klein.
Was du in Pet Diagnostics zuerst änderst
Das Briefing nennt Inter und die Skala daneben. Ersetz die Schrift durch eine mit denselben Proportionen, und die Komposition überlebt. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Was der Eintrag Landingpage richtig macht
Ein Standard-Hero und dieser Eintrag Landingpage benutzen dieselben Teile. Hier geben die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster die Reihenfolge vor, und Schrift von 12px bis 16px, 92vh hohe Sektionen, Radius 999px und Abstände in 18px-Schritten liefern die Maße, sodass der Screen als Abfolge liest und nicht als Container. Es gibt einem Leser im Bereich Gesundheit den kürzesten ehrlichen Weg zum Angebot.
Was sich in Pet Diagnostics bewegt
Vergleich die Bewegung mit einer scroll-getriebenen Seite. Beide bewegen sich; diese bewegt sich dort, wo das Briefing es sagt (Hover- und Druckzustände und eine Medienschleife von 7,1s), sodass der Text vorn bleibt. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Pet Diagnostics wurde in eine eigenständige HTML-Datei 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.
Wie ist dieser Eintrag zu Pet Diagnostics aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 18.711 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist der Prompt zu Pet Diagnostics eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2336x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
