Über diese Vorlage
Das hier ist der Eintrag Footer von Lumina, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. „Lumina provides premium clarity on global events and cosmic wonders - shared with all for free“ ist die Zeile, auf die das Layout gebaut ist. Das Farbschema ist blau #2F4458 darunter und grau #CFC2B7 für die Schrift, und die Seite ist in Helvetica gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 800x585, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Nimm es als Briefing für eine Bildungs- oder Community-Marke: Der Eintrag Footer muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Wenn drei Leute an einem Footer-Design arbeiten, gib Content-Leads 115vh hohe Sektionen und Abstände in 10px-Schritten statt eines Screenshots.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Footer-Design als Muster, das jede weitere Seite kopiert.
- Gemacht für Product Manager, die ein Footer-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
Was enthalten ist
- Das Briefing nennt die Stufen. Das Layout ist gegen feste Werte gelöst (115vh hohe Sektionen und Abstände in 10px-Schritten), und das hält den ersten Screen bei jeder Breite komponiert. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Die Schrift trägt den Ton. Die Schriften sind Rollen zugewiesen und nicht gemischt: Helvetica trägt Display und Oberfläche zusammen. Die Schrift ist mit festen Größen gepaart, und das hält die Display-Zeile und den Oberflächentext aufeinander bezogen.
- Zahlen dort, wo der Beleg steht. 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 haben eine einzige Größe, ein langes Label ändert die Höhe der Reihe also nicht.
- 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. Die Wortmarke bekommt ihren eigenen Block, was eine lange Linkliste lesbar hält. Gib der Wortmarke eine eigene Spalte.
Bewegung & Interaktion
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x585-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Bewegung ist hier Rückmeldung und nicht Dekoration.
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 800x585, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es.
Die Zahlen hinter dem Eintrag Footer
Fast jede Entscheidung hier ist ein prüfbarer Wert: 115vh hohe Sektionen und Abstände in 10px-Schritten. Das Medium ist ein Standbild in 800x585. Die Schrift bleibt in Helvetica, ein Ersatz muss also dieselben Proportionen behalten. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Footer
Vergleich den Seitenkopf mit einem typischen Landing-Screen im Bereich Bildung. Beide tragen eine Zeile und eine Handlung; hier stehen die Kennzahlen-Zeile, der Hintergrund-Clip und der Footer in fester Reihenfolge, statt mit gleichem Gewicht zu konkurrieren. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Was hier für Bildung & Community funktioniert
Zähl die Entscheidungen im Eintrag Footer, und sie führen auf ein einziges Dokument zurück: 5.113 Zeichen, die den Rahmen bei 800x585, die Schrift und den Rhythmus benennen. Es gibt einem Leser im Bereich Bildung den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Ist der Prompt zu Lumina eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 5.113 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 Lumina hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.113 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Lumina 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.
