Über diese Vorlage
Bevor du beim Thema 404-Seite für eine Bildungs- oder Community-Marke nachbaust, lies Fun 404 Page: Komposition und Spezifikation stehen beide hier. Die Überschrift der Seite lautet „Oops, something went wrong!“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist helles orange #FF8233 darunter, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1664x1248, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 500ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema 404-Seite wandern unverändert in deine Marke.
Gemacht für
- Marketingverantwortliche, die ein 404-Seite-Design übernehmen, ziehen 22vh hohe Sektionen und Abstände in 200px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Gemacht für Product Manager, die ein 404-Seite-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Produktteams, die die 404-Seite-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
Was enthalten ist
- Ein Breakpoint für die Links. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Inter gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1664x1248, damit die Medien darunter bis an den Rand durchlaufen.
- Werte bis in den Build. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: 22vh hohe Sektionen, Abstände in 200px-Schritten, 500ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1). Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Links vor der Aktion. Die Abstände zwischen den Links kommen aus Innenabstand und nicht aus Trennern, damit die Zeile als ein Objekt wirkt. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Feste Stufen statt einer Skala. Die Abstände sind genauso zitiert (22vh hohe Sektionen, Abstände in 200px-Schritten, 500ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiten in Millisekunden
Übergänge sind auf 500ms mit cubic-bezier(0.16,1,0.3,1) festgelegt; dieser Wert gilt auch für die Bedienelemente. Die angegebene Zeit betrifft Zustandswechsel, die Rückmeldung ist damit der spezifizierte Teil der Bewegung.
Zeiger nur, wo sie helfen
Zustände werden pro Komponente behandelt (Hover-Zustände auf Buttons und Links statt auf jeder Karte) und nicht von einer globalen Animationsschicht. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen. Halte die interaktive Ebene klein.
Wie der Eintrag 404-Seite umbricht
Wo ein Template auf eine Spalte zusammenklappt und hofft, sagt dieses Briefing, was passiert (die Skala ist fließend statt gestuft, der Bereich wird auf 22vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen), und lässt die Reihenfolge intakt. Die Breite ändert die Maße, nicht den Lesepfad.
Die Reihenfolge im Eintrag 404-Seite
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag 404-Seite die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und der Hintergrund-Clip vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Was du in Fun 404 Page zuerst änderst
Ändere zuerst Text und Medien, dann die Farbe, zuletzt das Layout. Der Rahmen mit 1664x1248 und die Skala in Inter halten die Seite zusammen; ersetze also um sie herum und nicht durch sie hindurch. Substitution ist billiger als Komposition, und darum geht es.
Häufige Fragen
Wie ist dieser Eintrag zu Fun 404 Page aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.085 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist der Prompt zu Fun 404 Page eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1664x1248, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Fun 404 Page nachzubauen?
Fun 404 Page 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.
