Tuesday, February 17, 2009

404 Error Pages

The design of 404 error pages is often overlooked and underestimated. However, designed carefully, these pages can make a random visitor stay on your website, take a look around and eventually find the information he or she was looking for in the first place. Effective 404 error pages communicate why a particular page couldn’t be displayed and what users can do next. A search box and list of useful resources (possibly related to the missing page) could be helpful in this case.

Beautiful 404 Error Pages



Cut & Taste

Cut & Taste claims that “Someone on the staff is to blame for this! Rest assured, the proper person will get the proper amount of blame and humiliation dealt to them.” Notice how well the search box is highlighted. Beautiful!


Creative 404 Error Page

Productplanner
Productplanner perfectly integrates its 404 error page in the overall branding of the website.


Creative 404 Error Page

Mundofox.com

A 404 error page with a not-so-eloquent Homer.


Screenshot

Duoh.com

Probably one of the most colorful and abstract 404 error pages out there.


Screenshot

Apartmenthomeliving.com

A quite unusual 404 error page from a website that helps people find apartments.


Screenshot

Chrisglass.com


Chris takes his comrades on a trip, hunting for the right page.


Screenshot

Huwshimi.com

On Huwshimi a ninja seems to have stolen a 404 error-page: “you must return when the moon has friends and the fox is borrowed”. Gorgeous!


Screenshot

ilovetypography.com

A typographically beautiful (of course) 404 error page from ILoveTypography.com.


Creative 404 error page

Newspond


Newspond uses a very strange illustration on its 404 error page. The circle defines the limits of the website, and the small image at the top is a miniaturized Newspond logo. A click on the image leads to the home page of the website.


Creative 404 Error Page

Brightkit

“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.


Creative 404 Error Page

jhuskisson.com


Screenshot

Gog.com

“404: oh noes, there’s nothing in here.” (sent by @Chamb via Twitter)



Creative 404 Error Page

User-Friendly 404 Error Pages


RealMacSoftware.com

An excellent 404 error page, functionally speaking, that contains a site map of the website.


Creative 404 Error Page

InspirationBit

InspirationBit presents an overview of popular and recommended articles.


Creative 404 Error Page

45royale

This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.



Creative 404 Error Page

Ma.gnolia.com


Screenshot

Have Fun With 404!


Yes, fun! Because 404 also is a place where you can show your sense of humor. You have the opportunity, so use it well!


www.techkultura.com

On Pawel Opydo’s blog: “Golden Rule of the Code of the Samurai: If this isn’t the page you were looking for, you have to do Seppuku.”


Screenshot

Abduzeedo


Abduzeedo suggests ideas for finding the right article and lists popular and recent blog posts as well as a tag cloud.


Screenshot

Habrahabr

An illustrative image (sent by sabugao on Twitter).


Creative 404 Error Page

CSS Remix


Creative 404 Error Page

Pattern Tap

Don’t get angry, and don’t cry. Pattern Tap will take on the burden of the missing page.


>Screenshot

New Yorker

The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.


Screenshot

Frye/Wiles

Frye/Wiles Creative Agency.


Screenshot

Heinz


The 404 for the best-known ketchup.


Screenshot

Chelmsford Library

OMG, Smashing Magazine is missing in the Chelmsford Public Library!


Screenshot

Craigslist

An ASCII 404 error page from Craigslist.


Screenshot

The Truth

Is this really the truth?



Screenshot

Wulffmorgenthaler

Blame that weird beaver on Wulffmorgenthaler.


Screenshot

Henrik Hedegaard

Henrik Hedegaard seems to like the Simpsons.


Creative 404 Error Page

NotaNiche

Refresh and see the next funny picture. A blog by Alexander Frison.


Screenshot

Daze of Our Lives


“Whatever the Dickens a so-called “Error 404″ is I haven’t the foggiest idea, but one has occurred. You can’t trust this wretched technology, can you?”


Screenshot

Limpfish

Wanted: a Web page.


Screenshot

Orangecoat

“Despite that song in your step and sense of purpose, you’ve hit a little bump in the road. These things happen. We’re going to do our best to make sure you keep dancing in the right direction.” Orangecoat gives a 404 error mind map.



Screenshot

Kochatelier Berlin

404 bread on the website of a cooking agency.


Screenshot

Dawdle

Mario occasionally entered the wrong castle.


Screenshot

CSS-Tricks

Chris Coyier takes a closer look at the code.


Screenshot

Niki Brown


Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.


Screenshot

Twitter

Twitter uses a minimalistic yet attractive 404 error page.


Creative 404 Error Page

Livadaru

Homer on the blog of Cristian Livadaru.


Screenshot

ARTTHUG Studios


Homer again, this time at ARTTHUG Studios.


Screenshot

Cubeecraft

Error Cubee (which you can download and make yourself) at Cubeecraft.


Screenshot

d20 SRD

A brutal error at d20 SDR!


Screenshot

HomeStar Runner

Oops! You had it coming at HomeStar Runner.



Screenshot

Animation? Sure!


404 doesn’t only have to be about graphics. Below, you’ll find 404 examples with animation.


Mark Fennell

On his 404, Mark Fennell offers… a game!


Screenshot

Project Euh

Project Euh? Just click and go to a random website.


Screenshot

Total Insanity

Total Insanity shows us what insanity really means.


Screenshot

Herr Nilsson

This 404 error page fetches 404 Tweets and displays them in real time (sent by eelay on Twitter).


Creative 404 Error Page

Cricket Feet

The 404 error page on Cricket Feet talks to you!



Screenshot

Bluedaniel

Daniel Karcher’s film design studio.


Screenshot

Sources and Resources





If you enjoyed this post, make sure you subscribe to my regular Email Updates!

0 comments:

Post a Comment

Followers

Action

Mesothelioma Cancer
ThemeFlash Msn bot last visit powered by MyPagerank.Net Creative Commons License
 

ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol