Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst HAUL! das Thema Footer mit einem einzigen erfassten Briefing. „`. Next to the logo block, add the text“ ist die Zeile, auf die das Layout gebaut ist. Das Farbschema ist weiß #FFFFFF darunter und orange #BB420D für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1832x1354, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 0.8s nicht hinaus. Starte beim erfassten Briefing und bearbeite dann den Eintrag Footer, statt von Grund auf neu zu bauen.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Footer-Design für ein KI- oder SaaS-Produkt ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Footer-Briefing versorgt, startet mit dem Prompt über 4.329 Zeichen.
- Gemacht für Content-Leads, die ein Footer-Design neu betexten, dessen Headline so lang bleiben muss wie die von HAUL!.
Was enthalten ist
- Eine Skala für Schrift und Rahmen. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: 50vh hohe Sektionen und 0.8s Übergänge. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Das Raster gibt die Reihenfolge vor. Das Raster ist die Struktur: gleich große Panels, in Inter gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Die Panel-Reihenfolge ist die Lesereihenfolge, nichts hängt an Positionshinweisen.
- Farbe mit Aufgabenbeschreibung. Die Aufgabe des Akzents steht im Briefing fest: orange #BB420D für Aktionen, weiß #FFFFFF für den Rahmen. Alles andere liegt auf weiß #FFFFFF, und das hält eine gesättigte Palette lesbar.
- Erst der Text, dann die Dekoration. Die Komposition (Footer) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 1832x1354 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 1832x1354, und deshalb hält sie zusammen, wenn sich der Text ändert.
Bewegung & Interaktion
Rückmeldung an den Bedienelementen
Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek.
Nur ein Scroll-Verhalten
Der Inhalt hängt an der Scroll-Position (beim Scrollen bewegen sich die Hintergrundebenen anders als der Vordergrund); die Komposition ändert sich also im Tempo des Lesers und nicht nach einem Timer. Weil er an die Position gekoppelt ist, läuft der Effekt bei jedem Besuch gleich ab. Prüfe die Komposition ohne den Effekt.
So wird der Eintrag Footer deiner
Fang beim Versprechen an, nicht bei der Dekoration. Schreibe „`. Next to the logo block, add the text“ zu einem Satz um, der sagt, was du machst, und setze ihn in Inter in der Display-Größe aus dem Briefing. Ersetze orange #BB420D durch deinen eigenen Akzent und prüfe ihn gegen weiß #FFFFFF, bevor du etwas anderes anfasst. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
HAUL! als Spezifikation lesen
Die meisten Referenzen zeigen das Ergebnis und behalten die Zahlen. Diese dreht es um: 50vh hohe Sektionen und 0.8s Übergänge stehen neben der Seite, damit das Ergebnis reproduzierbar ist und nicht angenähert. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Wie der Eintrag Footer umbricht
Breit ist die Komposition dicht; schmal gilt: der Bereich wird auf 50vh gehalten. Beide Zustände sind im Briefing beschrieben. Bei schmalen Breiten fällt nichts Wichtiges weg.
Häufige Fragen
Was steht eigentlich im Briefing hinter HAUL!?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1832x1354, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Footer von HAUL! in einem anderen Stack nachbauen?
HAUL! 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 eine aus HAUL! nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1832x1354 erfasst.
