Über diese Vorlage
Für eine E-Commerce-Marke löst Skybridge 404 das Thema 404-Seite mit einem einzigen erfassten Briefing. Die Palette umfasst blau #1165B4 darunter und weiß #E7E1D8 für die Schrift, die Schrift ist Geist Mono. Es kommt als React und Tailwind CSS, damit sich der ganze 404-Seite ohne Design-Übergabe in ein Projekt heben lässt. Die Seite begrenzt die Bewegung auf eine Videospur in Schleife. Lass es beim Schreiben offen: Die 7.104 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Studios, die einem Kunden das Verhalten bei 640px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Halte ein 1456x1080 Rahmen in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses 404-Seite-Design als Muster, das jede weitere Seite kopiert.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Eine kurze Reihe Links und eine einzelne Aktion liegen in 404-Seite, auf 100vh hohe Sektionen und Abstände in 40px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Unter 640px klappen die Links ein, statt in eine zweite Zeile umzubrechen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Medien hinter der Schrift. Die Medien sind ein Clip von 4,7s, auf volle Abdeckung des Rahmens 1456x1080 zugeschnitten, damit bei keiner Breite schwarze Ränder entstehen. Exportiere in 1456x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Schrift macht das Styling. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Geist Mono in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Der Interface-Text bleibt auf einer Schrift, deshalb mischt die Seite nie zwei Stimmen in derselben Größe.
- Leiste im Raster der Seite. Die Labels passen bei 640px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
Bewegung & Interaktion
Die Szene ist das Bild
Ein WebGL-Canvas leistet die visuelle Arbeit auf dem Rahmen mit 1456x1080, die Schrift sitzt darüber oder daneben. Die Szene wird in der Größe ihres Containers gezeichnet und hängt nicht an einer festen Renderauflösung.
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 4,7s in 1456x1080 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.
Wie der Eintrag 404-Seite umbricht
Das schmale Layout ist entworfen und nicht geerbt. die Skala ist fließend statt gestuft, das Layout wechselt bei 640px und der Bereich wird auf 100vh gehalten, damit die Hierarchie bei jeder Breite den Umbruch übersteht. Die Mobil-Version ist eine Entscheidung und kein Notfallplan.
Die Zeitwerte hinter dem Eintrag 404-Seite
Wo ein Template jede Sektion beim Eintritt animiert, ist die Liste hier kurz: Hover- und Druckzustände, eine Medienschleife von 4,7s und eine live gerenderte Canvas, und dann Ruhe. Nichts in diesem Eintrag 404-Seite animiert um seiner selbst willen.
Die Reihenfolge im Eintrag 404-Seite
Lies den ersten Screen in einem Zug, und das Angebot ist bereits klar. die Navigation, die Kennzahlen-Zeile und der Hintergrund-Clip kommen der Reihe nach, und 100vh hohe Sektionen und Abstände in 40px-Schritten halten den Abstand statt dekorativer Trennlinien. Ein Leser im Bereich E-Commerce bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Skybridge 404?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1456x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Skybridge 404 nachzubauen?
Skybridge 404 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.
Woher stammt das Design von Skybridge 404?
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 1456x1080 erfasst.
