Webdesign

Und wieder einmal – 404-Fehlerseiten

12. März 2009
von

Die Gestaltung von 404-Fehlerseiten wird nicht selten übersehen und unterschätzt. Sind diese allerdings sorgfältig und durchdacht gestaltet, können Besucher, die Ihre Seite zufällig aufrufen, dazu gebracht werden, sich weiter umzusehen und schließlich doch zu bei Ihnen zu finden, wonach sie ursprünglich gesucht haben. Gute 404-Fehlerseiten können darüber informieren, warum die gewünschte Seite nicht aufgerufen werden kann und was der Besucher als nächstes machen kann. Dabei kann eine Suchoption und eine Liste nützlicher Links (am besten im Zusammenhang mit der fehlenden Seite) hilfreich sein.

Nun ist es an der Zeit für eine frische Ladung Inspiration für Ihre 404-Seiten. In diesem Artikel finden Sie 48 Beispiele für die Gestaltung  attraktiver und origineller 404-Seiten. Dabei sind einige zwar attraktiv, aber nicht anwenderfreundlich, andere hingegen anwenderfreundlich aber nicht attraktiv. Nutzen Sie diese Vorschläge einfach als Inspiration – hoffentlich ist für jeden Geschmack etwas dabei.

Cut & Taste
Hier ist das Personal Schuld. Man beachtet die Hervorhebung der Suchbox.

Creative 404 Error Page

Productplanner
Eine perfekt in das Branding der Site integrierte 404-Seite.

Creative 404 Error Page

Mundofox.com
Eine 404-Seite mit einem nicht allzu eloquenten Homer.

Screenshot

Duoh.com
Wahrscheinlich eine der farbigsten 404-Seiten, die man finden kann.

Screenshot

Apartmenthomeliving.com
Eine ziemlich ungewöhnliche Fehlerseite.

Screenshot

Chrisglass.com
Chris nimmt seine Kumpels auf einen Ausflug mit. Auf der Jagd nach der “richtigen” Seite.

Screenshot

Huwshimi.com
Hier scheint es als ob ein Ninja die Seite gestohlen hätte.

Screenshot

ilovetypography.com
Eine typographisch – natürlich – wunderschöne Fehlerseite

Creative 404 Error Page

Newspond
Hier wird eine seltsame Illustration verwendet. Der Kreis beschreibt die Grenzen der Website. Und die kleine Abbildung im Zentrum ist das Firmenlogo.

Creative 404 Error Page

Brightkit
Brightkit zeigt eine vermisste Eule auf einer Milchpackung.

Creative 404 Error Page

jhuskisson.com

Screenshot

Gog.com
Hier gibt es nichts… (eingesendet von @Chamb via Twitter)

Creative 404 Error Page

Nutzerfreundliche 404 Fehlerseiten

RealMacSoftware
Eine funktionale 404-Seite mit eigener Sitemap.

Creative 404 Error Page

InspirationBit
Statt eines Fehler gibt es eine Übersicht über gefragte und empfohlene Beiträge.

Creative 404 Error Page

45royale
Diese Fehlerseite enthält Links zu gefragten Themen und eine schicke Illustration.

Creative 404 Error Page

Spaß mit 404 Seiten

Aber ja, Spaß! Die 404-Seite ist auch ein Ort, wo Sie Ihren Sinn für Humor beweisen können. Sie haben die Möglichkeit, machen sie etwas draus!

Techkultura
Pawel Opydo’s Blog mit Samurai.

Screenshot

Abduzeedo
Wird haben da ein Problem…

Screenshot

Habrahabr
Eine illustrative Abbildung (eingesendet von sabugao on Twitter).

Creative 404 Error Page

CSS Remix
Dieser Kollege ist ziemlich verängstigt (eingesendet von @dezignMusings on Twitter).

Creative 404 Error Page

Pattern Tap
Werde nicht wütend, und schreie nicht. Pattern Tap wird alles regeln.

Screenshot

New Yorker
Das New Yorker Magazin erscheint seit 1925…

Screenshot

Frye/Wiles
Frye/Wiles Creative Agency.

Screenshot

Heinz
Die 404-Seite des bekanntesten Ketchups.

Screenshot

Craigslist
Eine ASCII 404-Fehlerseite.

Screenshot

The Truth
Ist das wirklich die Wahrheit?

Screenshot

Wulffmorgenthaler
Der schreckliche Biber…

Screenshot

Henrik Hedegaard
Hier scheint jemand die Simpsons zu mögen.

Creative 404 Error Page

NotaNiche
Bei jedem Reload eine andere Zeichnung.

Screenshot

Daze of Our Lives
“What the…?”

Screenshot

Limpfish
Wanted: Eine Webseite.

Screenshot

Orangecoat
Die erste 404-Fehler-Mindmap.

Screenshot

Kochatelier Berlin
404 Toastbrot.

Screenshot

Dawdle
Mario hat bisweilen die falsche Burg erobert.

Screenshot

CSS-Tricks
Chris Coyier hat einen tiferen Einblick in den Quellcode.

Screenshot

Niki Brown
Eine schöne Maus-Illustration.

Screenshot

Twitter
Twitter verwendet eine minimalistische, dennoch attraktive 404-Seite.

Creative 404 Error Page

Livadaru
Homer in Cristian Livadarus Blog.

Screenshot

ARTTHUG Studios
Nochmal Homer.

Screenshot

Cubeecraft
Ein Fehler “Cubee” (den man selbst basteln und downloaden kann).

Screenshot

d20 SRD
Die brutale Variante.

Screenshot

HomeStar Runner
Upps!

Screenshot

Animation? Aber sicher!

404-Seiten drehen sich nicht zwangsläufig nur um statische Grafiken. Hier kommen animierte Beispiele.

Mark Fennell
Diese Fehlerseite bietet uns ein Spiel an!

Screenshot

Project Euh
Project Euh? Einfach klicken und eine zufällige Website besuchen.

Screenshot

Total Insanity
Was Wahnsinn wirklich meint.

Screenshot

Herr Nilsson
Diese 404-Seite greift sich 404-Tweets und stellt sie in Echtzeit dar (via eelay on Twitter).

Creative 404 Error Page

Cricket Feet
Diese 404-Seite spricht zu uns!

Screenshot

Bluedaniel
Daniel Karcher’s film design studio.

Screenshot

Quellen und Links

Über die Autorin

Sylwia Besz ist Projectmanagerin. Sie liebt das Bloggen und die Fotografie. Sie finden ihre 404-Seite hier. Der Beitrag erschien auf Englisch im Smashing Magazine. Mit freundlicher Genehmigung. ™

17 Kommentare zu „Und wieder einmal – 404-Fehlerseiten
  1. | h1 h2 h3 am 12. März 2009 um 08:47

    […] Fehlerseiten 404 […]

  2. […] Und wieder einmal – 404-Fehlerseiten Und wieder einmal – 404-Fehlerseiten on Dr. Web. […]

  3. Sascha Reinhardt am 12. März 2009 um 12:42

    Ein recht unpassendes Icon (Männchen schießt sich durch den Kopf) für eine Topstory am heutigen Tag. Stichwort Katastrophe in Winnenden.

  4. Pirate am 12. März 2009 um 13:24

    Und zum “Talk like pirate -day” gibt’s dann wieder diese wundervollen “Arrr! Rats below deck!”-404-Seiten :-)

  5. Nico am 12. März 2009 um 16:46

    Schick, Schick warum ist den meine nicht dabei ? :D

  6. Sascha Reinhardt am 12. März 2009 um 16:49

    Finde es sehr gut, dass Ihr das Icon geändert habt. Danke.

  7. Blog Drauf am 13. März 2009 um 12:31

    Danke für die Erwähnung meiner 404 Seite notaniche.com . Die Witze gibts auf http://blogdrauf.de/404 auch noch mit ein paar deutschen Witzen. :)

  8. domingos am 16. März 2009 um 15:49

    Ich denke, man sollte auf jeden Fall das Corporate Design der Seite einblenden, vor allem bei unternehmen. Bei einigen dieser Beispiele sieht das so aus, als ob die komplette Navi ausgeblendet wäre.
    Ich würde je nach Geschmack eine HTML-Sitemap oder eine benutzbare volltextsuche anbieten.

  9. […] den meisten fällen sind die 404-Seiten ja nicht gerade schön anzusehen.drWeb.de hat hier eine Liste schöner Page-not-Found-Pages veröffentlicht. Kann man sicher die ein oder andere als […]

  10. Das ZDF über 404 | Oberlehrer am 20. April 2009 um 09:29

    […] 404 und wie kann man kreativ damit umgehen? Die haben sich bestimmt von Dr. Web inspirieren lassen (Und wieder einmal – 404-Fehlerseiten). Tipp: Man die 404-Seite originell gestalten oder mit einer nützlichen Funktion versehen, […]

  11. […] bietet das Tracking von 404 Fehlern in bestehenden Webseiten und die Benachrichtigung per Mail inklusive umfangreichem Fehlerbericht. […]

  12. […] Eine schöne Sammlung mit ungewöhnlichen Fehlerseiten findet ihr übrigens bei Dr. Web. […]

  13. Spielehorst.de am 20. Juni 2010 um 17:55

    I like those ones with homer :D

  14. […] wenig Inspiration gefällig? Hier geht’s […]

  15. Tuning von Fehlerseiten | IT 2.0 am 21. Dezember 2010 um 10:47

    […] DrWeb.de […]

  16. Sebastian am 20. Juni 2013 um 10:07

    Ihr habt eine der schönsten 404 Seiten vergessen :)

    http://www.yazio.de/i-moag-di

  17. Uwe am 5. November 2013 um 14:24

    Mir ist auch eine sehr schicke 404er über den Weg gelaufen: http://www.furnissimo.de/404.php

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!