Über diese Vorlage
Bevor du beim Thema Footer für ein KI- oder SaaS-Produkt nachbaust, lies Kresna Footer: Komposition und Spezifikation stehen beide hier. Farbe bleibt auf weiß #FFFFFF darunter und tiefes blau #111827 für die Schrift begrenzt, gesetzt in DM Sans. Es kommt als eine eigenständige HTML-Datei, damit sich der ganze Footer ohne Design-Übergabe in ein Projekt heben lässt. Das Bewegungsbudget umfasst Übergänge von 0.2s. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Footer wandern unverändert in deine Marke.
Gemacht für
- Growth-Teams, die ein Footer-Design für ein KI- oder SaaS-Produkt neu einfärben und den 800x586-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Gemacht für Studios, die einem Kunden das Verhalten bei 560px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Dieses Footer-Design richtet sich an Designer, die einen Build in eine eigenständige HTML-Datei an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
Was enthalten ist
- Navigation in einer Zeile. Eine schmale Leiste liegt über der Komposition (Footer), die Wortmarke links, die Links in DM Sans gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Unter 560px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 560px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Ziffern als Typografie. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Footer) davon ab, zur Feature-Liste zu werden. Die Labels sitzen auf der kleinsten Stufe des Briefings unter den Ziffern, damit die Zeile als Daten und nicht als Dekoration gelesen wird.
- Scannen statt lesen. 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. Lass die Panel-Anzahl aus dem Text folgen.
- Spalten, keine Linkhalde. 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. Behalte den Akzent für eine einzelne Aktion.
Bewegung & Interaktion
Textur statt flacher Füllung
Das Briefing legt Filmkorn über die 800x586-Komposition, die Oberfläche wirkt also als Material und nicht als massive Füllung. Die Textur ist statisch, sie fügt also Oberfläche hinzu, ohne Bewegung hinzuzufügen.
Kurze, benannte Zeiten
Eine Dauer deckt alle Interaktionen ab (0.2s); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (0.2s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Was ein KI- oder SaaS-Produkt hier gewinnt
Wenn du ein Briefing zum Thema Footer im Bereich SaaS schreibst, ist das Schwierigste die Entscheidung, was der erste Screen nicht sagen soll. Kresna Footer beantwortet das vorab: eine Display-Zeile, die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster dahinter. Kresna Footer nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie der Eintrag Footer umbricht
Eine fluide Skala und eine gestufte sehen auf breitem Screen ähnlich aus. Vereng den Viewport, und der Unterschied zeigt sich: eine Größe zwischen 22px und 28px gegen feste Sprünge. Bei schmalen Breiten fällt nichts Wichtiges weg.
Die Zahlen hinter dem Eintrag Footer
9.163 Zeichen Briefing ergeben eine vollständige Spezifikation. Der tragende Teil ist kurz: Abstände in 28px-Schritten, 0.2s Übergänge und ein Breakpoint bei 560px. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Häufige Fragen
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Kresna Footer 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.
Was kann ich mit dem Briefing zu Kresna Footer machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 9.163 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was bekomme ich, wenn ich das Briefing zu Kresna Footer kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x586, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
