Über diese Vorlage
Playful Idea zeigt einen Weg, die Komposition (Footer) für dieses Publikum zu bauen. Gedacht ist sie für eine Agentur oder ein Studio, und die Anweisungen dazu sind veröffentlicht. Die Palette ist #F0EEFA darunter und fast schwarz #080909 für die Schrift, gesetzt in Epilogue. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1564x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 2.54167s und eine Videospur in Schleife. Es ist die richtige Referenz für eine Footer, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Agentur oder ein Studio.
Gemacht für
- Externe Teams, die ein Footer-Design übernehmen und eine eigenständige HTML-Datei im Repository festhalten müssen, bevor der erste Commit läuft.
- Das Footer-Design zielt auf Teams, die eine eigenständige HTML-Datei schon kennen und nur ein Breakpoint bei 700px schriftlich brauchen.
- Schreib deine eigene Headline und baue dieses Footer-Design dann in eine eigenständige HTML-Datei mit unveränderten Maßen nach.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unter 700px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Die Labels passen bei 700px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Die Schleife als Hintergrund. Ein stummer, loopender Clip füllt das Format von 1564x1080 über 6,9s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Exportiere in 1564x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Epilogue auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es ist so positioniert, dass die Headline die Mitte der Komposition behält.
- Das Verhalten ist pro Breite definiert. Die Schrift ist mit eine Größe zwischen 14px und 17px bemessen und nicht in festen Stufen, damit die Display-Zeile zwischen den Breakpoints proportional bleibt, statt zu springen. Bedienelemente bleiben groß genug zum Tippen, und der Text behält seine Lesereihenfolge bei jeder Breite.
Bewegung & Interaktion
Eine Live-Szene auf der ersten Bildschirmfläche
Ein WebGL-Canvas leistet die visuelle Arbeit auf dem Rahmen mit 1564x1080, die Schrift sitzt darüber oder daneben. Weil die Szene live ist, lässt sich das Layout ohne einen zweiten Satz Assets skalieren.
Ton ist vorhanden, aber optional
Das Briefing sieht Ton für die 1564x1080-Komposition vor, stumm, bis der Leser ihn einschaltet, die Seite fängt also nie von selbst an zu sprechen. Ton liegt hinter einem Bedienelement, die Seite funktioniert ohne ihn also genauso.
Playful Idea als Spezifikation lesen
Wo ein Moodboard die Skala offenlässt, schließt dieses Briefing sie: Schrift von 14px bis 17px und 100vh hohe Sektionen, und die umliegenden Werte leiten sich aus dieser Entscheidung ab. Nichts in diesem Eintrag Footer hängt an einer Voreinstellung.
So wird der Eintrag Footer deiner
Das Briefing nennt Epilogue und die Skala daneben. Ersetz die Schrift durch eine mit denselben Proportionen, und die Komposition überlebt. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Die Reihenfolge im Eintrag Footer
Aufmerksamkeit wird gelenkt und nicht dem Zufall überlassen. Die Abfolge steht fest: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip, und Schrift von 14px bis 17px und 100vh hohe Sektionen bestimmen die Größe jeder Station, damit nichts in falscher Reihenfolge ankommt. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie viel von Playful Idea hängt von eine eigenständige HTML-Datei ab?
Playful Idea 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.
Warum steht der Prompt von Playful Idea hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 30.665 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 Playful Idea kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1564x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
