Über diese Vorlage
Designy Footer: Footer für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Palette ist weiß #FAFAFA darunter und schwarz #0A0A0A für die Schrift. Es kommt als React und Tailwind CSS, damit sich der ganze Footer ohne Design-Übergabe in ein Projekt heben lässt. Das Briefing gibt sein Bewegungsbudget für eine Videospur in Schleife aus. Nimm es zur Hand, wenn im Fall Footer die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein 1922x1394 Rahmen behalten und den Rest des Footer-Designs neu bauen.
- Inhouse-Teams, die ein Footer-Design erweitern und Schrift von 13px bis 14px und Abstände in 13px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Schreib deine eigene Headline und baue dieses Footer-Design dann in React und Tailwind CSS mit unveränderten Maßen nach.
Was enthalten ist
- Ein Breakpoint für die Links. Eine kurze Reihe Links und eine einzelne Aktion liegen in Footer, auf Schrift von 13px bis 14px und Abstände in 13px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1922x1394, damit die Medien darunter bis an den Rand durchlaufen. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Panels ohne Rahmen. Wo ein Textblock stehen könnte, setzt diese Seite eine Reihe Panels, das hält Footer scanbar. Das Raster fällt auf eine Spalte zusammen, ohne die Panel-Reihenfolge zu ändern.
- Belege oberhalb des Falzes. Die Reihe steht hoch in Footer als Beleg und nicht als Dekoration. Weil die Zahlen Typografie sind, erben sie das responsive Verhalten der Seite und skalieren nicht eigenständig.
- Ein Footer, der die Marke trägt. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Der Akzent wird für eine einzige Footer-Aktion wiederverwendet und nicht für das ganze Band. Gib der Wortmarke eine eigene Spalte.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 2,9s in 1922x1394 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung.
Bewegung, die nicht stört
Das Briefing lässt Animation weg und überlässt die Seite dem 1922x1394-Layout, nur Hover- und Druckzustände ändern sich. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Was ein KI- oder SaaS-Produkt hier gewinnt
Wenn dein erster Screen gerade drei Dinge erklärt, ist das hier die Version, die eines erklärt. die Navigation, die Kennzahlen-Zeile, das Kartenraster und der Footer sind in Leserichtung gestaffelt, und Schrift von 13px bis 14px und Abstände in 13px-Schritten geben den Takt vor. Designy Footer nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Designy Footer den ersten Blick ordnet
Der Eintrag Footer hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, die Kennzahlen-Zeile, das Kartenraster und der Footer der Reihe nach, und genau das verhindert, dass ein einzelner Screen als Liste liest. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Designy Footer als Spezifikation lesen
Das Briefing ist eine Spezifikation: Schrift von 13px bis 14px und Abstände in 13px-Schritten, und der Medienrahmen ist bei 1922x1394 festgelegt, bevor irgendetwas darum herum entworfen wird. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Häufige Fragen
Was steht eigentlich im Briefing hinter Designy Footer?
Das erfasste Briefing umfasst 3.029 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.
Warum steht der Prompt von Designy Footer hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.029 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Brauche ich React und Tailwind CSS, um Designy Footer nachzubauen?
Designy Footer 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.
