Über diese Vorlage
Heritage Grove ist die Referenz (Footer) für dieses Publikum, also für eine E-Commerce-Marke. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. „Heritage Grove — Footer“ ist die Zeile, auf die das Layout gebaut ist. Die Palette umfasst creme #EAE3DE darunter, petrol #0F454F für die Schrift und abdunkelung #2A707C für die Akzente, die Schrift ist Poppins. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1424, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 2s, cubic-bezier(.22,1.36,1) und eine Videospur in Schleife. Wenn du ein Briefing zum Thema Footer im Bereich E-Commerce schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Übernimm die Struktur aus dem Footer-Layout komplett und nimm Easing cubic-bezier(.22,1.36,1) als Maßstab für jede Zeile.
- Das Footer-Design zielt auf Teams, die eine eigenständige HTML-Datei schon kennen und nur eine eigenständige HTML-Datei schriftlich brauchen.
- Studio-Teams, die ein Projekt briefen und nach ein Breakpoint bei 359px suchen, um darauf zu reagieren.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #2A707C und kommt über eine feste Display-Größe von 16px und 100vh hohe Sektionen nicht hinaus, damit aus ihr kein zweiter Header wird. Unter 359px klappen die Links ein, statt in eine zweite Zeile umzubrechen. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Medien ohne Overlay. Ein stummer, loopender Clip füllt das Format von 1920x1424 über 9,6s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Exportiere in 1920x1424 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Leiste im Raster der Seite. Die Labels passen bei 359px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Eine Skala für Schrift und Rahmen. Das Briefing legt eine feste Display-Größe von 16px, 100vh hohe Sektionen, Abstände in 52px-Schritten und 2s Übergänge fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Ein einziger Clip von 9,6s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Zustandswechsel mit Zeitwert
Die Bedienelemente reagieren in 2s, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Das Easing steht zusammen mit der Dauer im Briefing (2s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Reihenfolge im Eintrag Footer
Wenn deine Seite heute mit Features beginnt, ist das die Reihenfolge zum Übernehmen: die Navigation, die Kennzahlen-Zeile, die Feature-Liste, das Formular und der Hintergrund-Clip vorn, das Stützdetail danach, und eine feste Display-Größe von 16px und 100vh hohe Sektionen bestimmen den Abstand. Ein Leser im Bereich E-Commerce bekommt das Angebot vor den Optionen.
Wie der Eintrag Footer umbricht
Das Briefing beschreibt, was sich bei welcher Breite ändert (die Skala ist fließend statt gestuft, das Layout wechselt bei 359px und der Bereich wird auf 100vh gehalten); die Mobil-Version ist also eine Entscheidung und keine Quetschung. Der Kontrast liegt auf dem Akzent #2A707C über den Medien, und das Video ist stumm und inline. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Warum das Briefing für E-Commerce trägt
Auf dieser Seite steht ein einziges Versprechen, und eine feste Display-Größe von 16px und 100vh hohe Sektionen halten es an seinem Platz. Die Seite sagt es selbst: „Heritage Grove — Footer“. Nichts unterhalb des Folds muss das Angebot ebenfalls tragen. Es gibt einem Leser im Bereich E-Commerce den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Brauche ich eine eigenständige HTML-Datei, um Heritage Grove nachzubauen?
Heritage Grove 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.
Ist das Briefing zu Heritage Grove dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 12.893 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter Heritage Grove?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1424, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
