404 Error Pages, One More Time
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 previous posts. 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 Twitter 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
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!
Productplanner
Productplanner perfectly integrates its 404 error page in the overall branding of the website.
Mundofox.com
A 404 error page with a not-so-eloquent Homer.
Duoh.com
Probably one of the most colorful and abstract 404 error pages out there.
Apartmenthomeliving.com
A quite unusual 404 error page from a website that helps people find apartments.
Chrisglass.com
Chris takes his comrades on a trip, hunting for the right page.
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!
ilovetypography.com
A typographically beautiful (of course) 404 error page from ILoveTypography.com.
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.
Brightkit
“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.
Gog.com
“404: oh noes, there’s nothing in here.” (sent by @Chamb via Twitter)
User-Friendly 404 Error Pages
RealMacSoftware.com
An excellent 404 error page, functionally speaking, that contains a site map of the website.
InspirationBit
InspirationBit presents an overview of popular and recommended articles.
45royale
This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.
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.”
Abduzeedo
Abduzeedo suggests ideas for finding the right article and lists popular and recent blog posts as well as a tag cloud.
Habrahabr
An illustrative image (sent by sabugao on Twitter).
CSS Remix
This fellow is quite scared (sent by @dezignMusings on Twitter).
Pattern Tap
Don’t get angry, and don’t cry. Pattern Tap will take on the burden of the missing page.
New Yorker
The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.
Frye/Wiles
Frye/Wiles Creative Agency.
Heinz
The 404 for the best-known ketchup.
Chelmsford Library
OMG, Smashing Magazine is missing in the Chelmsford Public Library!
Craigslist
An ASCII 404 error page from Craigslist.
The Truth
Is this really the truth?
Wulffmorgenthaler
Blame that weird beaver on Wulffmorgenthaler.
Henrik Hedegaard
Henrik Hedegaard seems to like the Simpsons.
NotaNiche
Refresh and see the next funny picture. A blog by Alexander Frison.
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?”
Limpfish
Wanted: a Web page.
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.
Kochatelier Berlin
404 bread on the website of a cooking agency.
Dawdle
Mario occasionally entered the wrong castle.
CSS-Tricks
Chris Coyier takes a closer look at the code.
Niki Brown
Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.
Twitter
Twitter uses a minimalistic yet attractive 404 error page.
Livadaru
Homer on the blog of Cristian Livadaru.
ARTTHUG Studios
Homer again, this time at ARTTHUG Studios.
Cubeecraft
Error Cubee (which you can download and make yourself) at Cubeecraft.
d20 SRD
A brutal error at d20 SDR!
HomeStar Runner
Oops! You had it coming at HomeStar Runner.
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!
Project Euh
Project Euh? Just click and go to a random website.
Total Insanity
Total Insanity shows us what insanity really means.
Herr Nilsson
This 404 error page fetches 404 Tweets and displays them in real time (sent by eelay on Twitter).
Cricket Feet
The 404 error page on Cricket Feet talks to you!
Bluedaniel
Daniel Karcher’s film design studio.
Sources and Resources
(al)
Amy
September 15th, 2010 1:44 pmThese are all cool and all, but I can’t help but wonder about the pages that utilize Homer Simpson and the one with Master Shake. I can’t imagine the site owners have permission to utilize these characters, even on a 404 page. Personally, I feel that using such a character is taking a gigantic risk, even if you never expect you’ll never get caught using it. Just putting those pages in a showcase like this exposes those 404 pages, which ideally won’t be seen, to people who would otherwise never see them.
Aure
September 17th, 2010 8:20 amThis one http://www.gowatv.com/error-404.php :)
Connor Crosby
September 20th, 2010 11:26 amChelmsford Public Library? That is near where I live.
CopyrightCreators
October 6th, 2010 12:53 pmGreat Article! Thanks for the tips.
sharetipsinfo
October 7th, 2010 8:17 pmTrading or investing in stock market is serious business. One must understand basics of stock market before they work in it. Sharetipsinfo is presenting complete Glossary of Stock market. Understand stock market better.
jcubic
January 5th, 2011 7:07 amI found cool 404 page on github.com for example https://github.com/fobarbaz
laudland
January 10th, 2011 9:20 am我正在寻找这方面的内容来妆点自己的404页面(虽然我还不知道怎么来弄).看到这样精彩的设计让我倍受鼓舞.非常感谢!
PDQ Car Wash Equipment
January 21st, 2011 8:10 amOur own 404 page after browsing many inspirational examples: http://www.pdqinc.com/err/404.asp.
Chris
January 29th, 2011 4:38 pmThanks for all the great 404 inspiration. I never thought about doing a customized 404 page before. If you’re running an Apache its pretty easy, you can just add it to your .htaccess page. “ErrorDocument 404 /404.html” Here’s what I came up with http://www.amlingstudios.com/404.html
Kelvin
March 9th, 2011 10:07 pmHere’s another fantastic example I’ve come across:
http://www.proofcreative.com.au/error
David Ball
March 14th, 2011 6:21 amOld but still a good article! I’ve noticed that articles like this have encouranged many people to spend a long time on their error pages. But is this wise? It’s spending effort on something that not many people (should) see!
mark
April 13th, 2011 11:41 pmhttp://worldsbiggestpacman.com/404
Pacman 404. Awesome
Paul Ogier
April 20th, 2011 5:48 amCheck out our 404 http://outsourcehouse.co.za/404
Matej Latin
May 3rd, 2011 1:59 pmhaha great stuff.. some of the are really funny… i’ll make something similar for my web site… :)
Genny
May 5th, 2011 12:18 pmI ran across a funny one at Cal Poly. http://www.calpoly.edu/pagenotfound Oh dear, it says “no link dropping” in the comment instructions, so I hope this is not terribly inappropriate. I just thought it was cute.
Layla023
July 10th, 2011 7:26 pmFor my 404, I wrote a small PHP script that yanks the page the user is looking for out of the address bar, gets rid of anything that’s not words [like slashes, hyphens etc] and puts it in a big shiny search box for them.
ravi pahariya
July 12th, 2011 5:03 amthe Mario page was most hilarious… lol… i like that most… ;)
Asmaa
July 25th, 2011 9:45 pmhere is another one :)
http://aivault.com/store/404.php
Aron
August 17th, 2011 8:15 amHere’s a fun one I found that should be added to the list! http://www.speedysigns.com/404
Alan
August 30th, 2011 6:16 amI sa w this one recently and thought I’d add it to your list http://www.hotels-agent.com/404
pupu987
September 8th, 2011 5:55 amI loved s much s you?ll obtin crried out right here. The sketch is tsteful, your uthored subject mtter stylish. nonetheless, you commnd get got n
Michael
September 9th, 2011 1:05 pmName.com just pushed a new 404 Page
http://www.name.com/error-404
Mark
September 11th, 2011 4:59 pmBack to the future theme: http://bedmap.com/404
Mark
September 13th, 2011 12:48 amI found and interesting one: http://www.riluri.com/404error.php
(drag the green slider in the middle of the screen)
Deep
September 26th, 2011 7:58 amhttp://deepanjandatta.com/404/ – just starting out, is this any good? :) .Some pretty creative stuff out here.
Daniel
November 2nd, 2011 12:29 pmThanks for the inspiration. I decided to exploit my daughter for this one! Hey, don’t judge me, she was only 8 weeks at the time. http://sdmllc.com/404.php
Aarik Iftekhar
February 18th, 2012 8:19 pmMost probably i have seen the most beautiful 404 page collection.
Sarah
February 25th, 2012 1:16 amBravo! these are just brilliant! :)
Hiren Modi
March 9th, 2012 5:59 amToday, I was searching benefits of custom 404 page on Google and found such an interesting blog post on SEOmoz by Randfish.
I come to know about your blog post from here. You have given such a wonderful design concept for custom 404 page. But, I have question which is associated to SEO & page rank.
You can find out my custom 404 page as above where I have created hyperlink to home page. So, will it pass page rank to home page, if any broken link have page rank?
zep
May 21st, 2012 5:33 pmLoL Greats ideas !
This one is awesone http://www.moonservices.ch/404/
Chris
July 6th, 2012 11:03 amCheck out this 404 fashion page
https://www.maedchenflohmarkt.de/404
Baptiste
August 2nd, 2012 3:57 pm404 are getting more and more fancy these days, for our website we chose nyan cat !
http://utopiaweb.fr/404
Aaaaand another one less common, 418 I’m a teapot :
http://utopiaweb.fr/418
Neil Thomas
February 28th, 2013 2:25 pmAnother great 404 page from Cartobi… http://cartobi.com/404.php
Shows a random place name that does not exist (such as Neverland). Very clever for a location based software company.
Beth
April 10th, 2013 7:53 pmCheck out Saforian’s 404 pages — http://www.saforian.com/404. Every time you get a 404 page it refreshes with a new persona
Adam
April 11th, 2013 2:03 amYet another example – http://www.en.whitetincture.com/asdasd
Brice
May 2nd, 2013 3:18 pmNice collection !
Thks for inspiration.
Our error page : http://www.shozap.tv/404
James
June 15th, 2013 3:28 amThose are all awesome 404′s.
This one is funny too:
http://www.antistandard.com/site/404