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.
We’ve already covered the design of 404 error pages in previous1 posts2. In them, we also covered some interesting and useful ideas for designing 404 pages. Now, it’s time for a fresh dose of 404-error inspiration. This article presents 50 more examples of beautiful and original 404 error designs. Some of them are beautiful but not user-friendly, others are user-friendly but not really beautiful. Please use these examples as a source of inspiration; hopefully, this showcase has something for everybody.
Also note that some examples used in this post were suggested by our Twitter followers: please follow us on Twitter3 to vote on which article gets published next, discuss new ideas, get fresh updates and suggest great ideas for our next posts. Thank you.
Beautiful 404 Error Pages Link
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!
A 404 error page with a not-so-eloquent Homer.
Chris takes his comrades on a trip, hunting for the right page.
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!
A typographically beautiful (of course) 404 error page from ILoveTypography.com.
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.
“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.
User-Friendly 404 Error Pages Link
An excellent 404 error page, functionally speaking, that contains a site map of the website.
InspirationBit presents an overview of popular and recommended articles.
This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.
Have Fun With 404! Link
Yes, fun! Because 404 also is a place where you can show your sense of humor. You have the opportunity, so use it well!
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.”
The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.
Frye/Wiles Creative Agency.
OMG, Smashing Magazine is missing in the Chelmsford Public Library!
An ASCII 404 error page from Craigslist.
Is this really the truth?
Blame that weird beaver on Wulffmorgenthaler.
Refresh and see the next funny picture. A blog by Alexander Frison.
Wanted: a Web page.
“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.
Mario occasionally entered the wrong castle.
Chris Coyier takes a closer look at the code.
Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.
Homer on the blog of Cristian Livadaru.
Homer again, this time at ARTTHUG Studios.
Error Cubee (which you can download and make yourself) at Cubeecraft.
A brutal error at d20 SDR!
Animation? Sure! Link
404 doesn’t only have to be about graphics. Below, you’ll find 404 examples with animation.
On his 404, Mark Fennell offers… a game!
The 404 error page on Cricket Feet talks to you!
Daniel Karcher’s film design studio.
Sources and Resources Link
- 1 https://www.smashingmagazine.com/2007/07/25/wanted-your-404-error-pages/
- 2 https://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/
- 3 http://twitter.com/smashingmag
- 4 http://productplanner.com/404
- 5 http://productplanner.com/404
- 6 http://www.duoh.com/404
- 7 http://www.duoh.com/404
- 8 http://www.apartmenthomeliving.com/404.html
- 9 http://www.apartmenthomeliving.com/404.html
- 10 http://www.twitter.com/Chamb
- 11 http://ma.gnolia.com/404
- 12 http://ma.gnolia.com/404
- 13 http://abduzeedo.com/404
- 14 http://abduzeedo.com/404
- 15 http://www.twitter.com/sabugao
- 16 http://www.twitter.com/dezignMusings
- 17 http://patterntap.com/404
- 18 http://patterntap.com/404
- 19 http://heinz.com/404.aspx
- 20 http://heinz.com/404.aspx
- 21 http://henrikhedegaard.com/404/404.html
- 22 http://henrikhedegaard.com/404/404.html
- 23 http://www.dazeofourlives.com/404
- 24 http://www.dazeofourlives.com/404
- 25 http://www.orangecoat.com/404
- 26 http://www.orangecoat.com/404
- 27 http://www.kochatelier-berlin.de/404-fehler/
- 28 http://www.kochatelier-berlin.de/404-fehler/
- 29 http://www.twitter.com/404
- 30 http://www.twitter.com/404
- 31 http://homestarrunner.com/404
- 32 http://homestarrunner.com/404
- 33 http://www.project-euh.com/404/?
- 34 http://www.project-euh.com/404/?
- 35 http://www.tinsanity.net/404.shtml
- 36 http://www.tinsanity.net/404.shtml
- 37 http://www.herr-nilsson.com/404
- 38 http://www.twitter.com/eelay
- 39 http://www.herr-nilsson.com/404
- 40 http://www.backtoessentials.com/showcases/a-collection-of-404-error-pages/
- 41 http://www.blogmarks.net/user/404
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.