Und wieder einmal – 404-Fehlerseiten

Werbung

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. ™

Weitere Beiträge:

Über Gastautor

DrWeb.de ist die "Grande Dame" des deutschen Bloggings und seit nunmehr 14 Jahren im Internet aktiv. Das beliebte Magazin richtet sich dabei an Webworker, Selbstständige, IT-Entscheider, Seitenbetreiber sowie Marketing-Verantwortliche und bietet einen Überblick im undurchdringlichen Dschungel zahlreicher "Geld verdienen im Internet" Konzepte. Werden Sie jetzt Gastautor und profitieren Sie von der großen Reichweite und den Markennamen DrWeb.de.

,

15 Kommentare zu Und wieder einmal – 404-Fehlerseiten

  1. Sascha Reinhardt 12. März 2009 at 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.

  2. Pirate 12. März 2009 at 13:24 #

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

  3. Nico 12. März 2009 at 16:46 #

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

  4. Sascha Reinhardt 12. März 2009 at 16:49 #

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

  5. Blog Drauf 13. März 2009 at 12:31 #

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

  6. domingos 16. März 2009 at 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.

  7. Spielehorst.de 20. Juni 2010 at 17:55 #

    I like those ones with homer :D

Trackbacks

  1. | h1 h2 h3 - 12. März 2009

    [...] Fehlerseiten 404 [...]

  2. Und wieder einmal - 404-Fehlerseiten - Make Better Websites - Inspiration & Showcase for Quality Design and CSS Websites - 12. März 2009

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

  3. Felix Kratzer - Der Blog: 404 - This page cannot be found! - 17. März 2009

    [...] 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 [...]

  4. Das ZDF über 404 | Oberlehrer - 20. April 2009

    [...] 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, [...]

  5. Linkpatch – Benachrichtigungen über 404 Error per Mail | 404, Fehler, Tools | Dr. Web Magazin - 31. Juli 2009

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

  6. Eigene Fehlerseite erstellen - Error 404 | Webmaster-Zentrale - 3. Februar 2010

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

  7. [Wordpress] HTTP-Fehler-404-Seite erstellen | olivergast.de - 7. August 2010

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

  8. Tuning von Fehlerseiten | IT 2.0 - 21. Dezember 2010

    [...] DrWeb.de [...]

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free