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)
Mike M.
January 29th, 2009 9:18 amNice list.
Martijn Vandenberghe
January 29th, 2009 9:19 amWhere do you guys keep getting the inspiration to write about these things?! Great!
dan
January 29th, 2009 9:23 amfunny stuff
Milan
January 29th, 2009 9:30 amGreat article, these ones are very enjoyable to read.
Many
January 29th, 2009 9:30 amI love the brightkit and the fryewiles one :D
Ankit Ahuja
January 29th, 2009 9:30 amExtremely creative!
Shortshire
January 29th, 2009 9:31 amThese are awesome, most of the 404 pages I have seen don’t have anything on them. I am trying to create personalized ones to make people feel better and keep them on the site longer. Thanks for the great list and inspiration.
danny m
January 29th, 2009 9:32 amGreat stuff, has inspired me to put more effort into the design of my 404 pages!
Ernest Ojeh
January 29th, 2009 9:38 amsome 404 pages were really creative, while others were simply hilarious. nice list. btw, i like d “live preview” when submitting comments.
Flicdelapolice
January 29th, 2009 9:39 amAwesome work. This just made me think that for 80% of readers “error 404″ means nothing but still “error 404″ is in good place.
Would be better to delete this “error 404″ thing and write in very good place “We couldn’t find what you are looking for, please search or browse sitemap”
I’ll change right away my 404 pages.
claudio
January 29th, 2009 9:51 amyeah real cool error´s !
Ross
January 29th, 2009 9:53 amWe put easter eggs in our 404 page – check out:
http://www.venturenavigator.co.uk/404
and click on the image!!
webmeister
January 29th, 2009 9:54 amSome very cool error pages.
I also think that most of the readers do not know what the number 404 means.
Better to write an understandable text to inform the visitor what happend.
Noam
January 29th, 2009 9:58 amEnjoyed it so much…
tnx!
Isaiah Q
January 29th, 2009 9:59 amVery useful and entertaining, thanks!
anonim
January 29th, 2009 10:02 amOne more time? You promise?
La
January 29th, 2009 10:12 amKind of appropriate…..
I’m trying to enter the desktop wallpaper calendar contest for February but my email is bouncing back with this error:
:
The users mailfolder is over the allowed quota (size). (#5.2.2)
D’oh… I may be too late anyway :(
Benjamin Falk
January 29th, 2009 10:13 amGood list… Little elements like an attractive (yet functional!) 404 page help improve the experience for the end user.
Pattern Tap also has a useful list of 404 pages.
Fish
January 29th, 2009 10:15 amThat reminds me I need to make a nicer 404 page. Man Homer seems to be pretty popular for this error.
TJ Mapes
January 29th, 2009 10:31 amWow these are great. This one is equally nice: http://cssscoop.com/404
Nice post…
and @Benjamin Falk – Yeah they have a great list.
Navdeep
January 29th, 2009 10:33 amGreat list… Thanks
Henrik Hedegaard
January 29th, 2009 11:00 amVery nice – and thanks for the reference to my 404-page :-)
Paul
January 29th, 2009 11:03 amHey, glad to see BrightKit made the list! It was inspired from the previous list of 404 pages, so it’s nice to see it on this one. Cheers!
Saeed Jabbar
January 29th, 2009 11:14 amNice list .The css-tricks and gog.com 404′s are my favourites.
andreas.wpv
January 29th, 2009 11:16 amNice, but what we have done here is unsurpassed, I think:
http://www.tuv.com/de/en/zert . Check it out.
1. You land on a page with wrong url.
2. It is in the overall layout
3. It gives you the main navigation.
4. It tells you it did not find that page.
5. It gives you a search result page with the term behind the last slash in the given URL.
6. It sends an error message with referral, requested page and timestamp to the admin, which automatically processes it and adds it to an error report.
andreas.wpv
andreas.wpv@directorinternet.com
jspin77
January 29th, 2009 11:18 amWashington post holds my favorite 404 page. Its actually an ad on its 404 page.
“This page doesn’t exist. Just like clean coal” :)
http://www.washingtonpost.com/wp-dyn/content/article/2009/01/29/AR092009012901095.html?hpid=topnews
T
January 29th, 2009 11:18 amI’m getting “Internal server error” instead of your 404 page.
Maybe we should also design THAT page to show something nice to the users, instead of telling them that we probably goofed somewhere…
Vitaly Friedman & Sven Lennartz
January 29th, 2009 11:37 am@T (#24): that’s not true, our 404-error-page doesn’t show an internal server error.
webmeister
January 29th, 2009 12:07 pm@Vitaly and Sven
T mentioned the error page of the author of this post. The link you provided to sylwias website returns an Error 500.
Vitaly Friedman & Sven Lennartz
January 29th, 2009 12:21 pm@webmeister (#26): oh, that’s true. ;-(
Martin
January 29th, 2009 12:24 pmWhat a great collection, I like the one from Apartmenthomeliving.com.
Drakevr
January 29th, 2009 12:33 pmHehe nice ones.. some of them are really inspiring / beatyfull others are just hilarious there are also those that are really good for their cause [ bakery : toasted 404 , HEINZ : empty page ].
PS. :o i’m part of the Herr Nilsson’s 404 error page [ i was actually @the time the screenshot was shot ]! or a response to a tweet of mine at least :p
Latterlig!
January 29th, 2009 12:35 pmBeautiful. We had to link this! :-)
auras
January 29th, 2009 1:30 pmgreat pages, i tryed someting similar on 3ner.ro, but i ended up trying to make something usefull of it and monetize the page
Jason L.
January 29th, 2009 1:39 pmLove a great 404 page…a really easy way to show your visitors that you pay attention to every detail. Great post.
glossygames.com
January 29th, 2009 2:14 pmI am so pro creativity but unless you are a css gallery or some kind website that expects only web designers/developers it is probably for the best not to be too creative. I mean the average user probably does not even know what 404 means and it would be better to explain what actually happened in the simplest way possible. boring I know but effective.. As far as creativity goes though these are great pages.
http://www.glossygames.com
Michael Tyson
January 29th, 2009 2:29 pmHow’s this for awesome irony: Visit Wulffmorgenthaler.com’s 404 page, linked above, then click the ‘home’ link.
“Server Error in ‘/’ Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /WulffMorgenthaler/default.aspx”
myows
January 29th, 2009 2:44 pmgotta get working on my 404 !
why all the homer ?
Digiguru
January 29th, 2009 3:18 pmI think I have a pretty unique
chris rhee
January 29th, 2009 3:30 pmThanks for yet another link to my site! And it’s first on the list — even sweeter.
I’m sure my 404 error stats will be sky high this month, thanks to you guys, haha.
Alexandre Beu
January 29th, 2009 3:37 pmI found the photo in somewhere, and apply to my 404 page:
http://www.trotesdochupim.com.br/404
:)
Quakeulf
January 29th, 2009 3:58 pmHomer is a conspiracy, I’m sure. :o
This post had something I really didn’t expect from a design-related post: Sheer entertainment value.
You have proven it is possible to be entertained by design. Thank god for that!
Now I’m off to improve my own 404…
Tp
January 29th, 2009 3:59 pmSome clever ideas there, however I do believe that some readers who come across customised 404 pages might interpret the fact that you’ve taken responsibility for a page doesn’t exist as a sign of incompetent or sloppy work from the webmaster, when it is likely they have simply typed the wrong address… this said offering links back to the homepage etc has got to be good.
Harprit
January 29th, 2009 4:00 pmHow do you find this stuff—nice
Ian Gray
January 29th, 2009 4:09 pmI’ve always been proud of the 404′s I do for my clients. One of my favorites is the one I did for the non-profit Amara Conservation (hope this isn’t construed as advertising or spamming).
Michal
January 29th, 2009 4:53 pmCool and very funny examples. Hihi.
Brian Gottier
January 29th, 2009 5:08 pmHAHAHA! Gotta love those custom 404 pages!
Jamie Huskisson
January 29th, 2009 5:12 pmThanks once again for publishing my site on your site guys :) It’s an honour every time.
Ed
January 29th, 2009 5:28 pmVery Nice. Here is another one
Josh
January 29th, 2009 6:10 pmI know it’s lame to “self promote”, but I’ve searched countless lists of custom 404′s and I think I’ve managed to create one that nobody else has thought of yet…
http://eight7teen.com/E404
projectautomatika
January 29th, 2009 6:11 pmNice list! Enjoyed watching those creative 404 pages.
dragoshell
January 29th, 2009 6:48 pmhaha, I love Owly and the milk box. Also the ketchup one and the other one with the birds on-line :)
Doug G
January 29th, 2009 8:03 pmI haven’t seen this used as a 404 error before, but it should be:
“Once upon a midnight dreary,
while I websurfed, weak and weary,
Over many a strange and spurious website of hot chicks galore,
While I clicked my fav’rite bookmark,
suddenly there came a warning,
And my heart was filled with mourning,
mourning for my dear amour.
‘Tis not possible, I muttered,
give me back my cheap hardcore! -
Quoth the server, ’404′.”
Prasanna Jathan
January 29th, 2009 8:51 pmGreat list again.. Thanks
waqar
January 29th, 2009 10:29 pmTRUE! I always take 404 page for my best creativity this is nice place to show something unusual.
alex
January 29th, 2009 10:57 pmSuperb post.
ami
January 29th, 2009 11:51 pmThe original ‘quoth the server’ 404 message that Doug G is referring to can be found here… pure genius.
…one to appeal to the poets out there.
Nice list…. ;-)
tom hermans
January 30th, 2009 12:00 amhehe, nice ànd useful post and funny as well.
der Speck
January 30th, 2009 12:06 amLike ever! SM Rocks!
Thanks for so many suggestions!
Sylwia
January 30th, 2009 12:12 am@T (#24): Thx, now it’s workin’ :)
PomCompot
January 30th, 2009 12:16 amReally nice second post on this subject. Your own 404 is also a great example of what can be done, consistent with the rest of your website. Thanks guys.
Alexander Dombroff
January 30th, 2009 12:23 ami am a web designer and i really appreciate this post. It is awesome! i am gonna use these techniques.
vikas Kumar
November 1st, 2011 4:28 am0toone IT Wizard is a leading Web design Developmnt located in India providing web solutions business across the globe. 0toone IT Wizard provides endeavor solutions that include custom website design & development, Web and Enterprise Potrals, Web Database Programming, Flash website, Search Engine Optimization, 2D Animation, 3 Modeling & Texturing , Mailer Designs and deliver products to clients. We are a creative and innovative in web development firm.
We design and deliver websites that work, websites that appeal visitors and convert them to customers. Our goal is to stay at the front of web designing, web development and application development of the highest level to meet our clients’ goals. We follow the strategy of using only the proven technology. Our specialty lies in developing high-end applications, e-commerce website development and multimedia development. We follow commercial considerations and timely execution of projects along with high level of communication and online support.
Our premium quality services are customized, scalable and low cost effective solutions. We support our offerings based on client’s business requirements and provide in-depth reliable solution. We provide standards for our customer with consistent in every stage from end to end through the entire project. We change the client business goals and their vision in effective online f communication and online support.
CMS – Full service web design company specializing in creating theme/template/modules for Content Management Systems like Joomla , WordPress and Drupal .
Specialties
website design & development, Web and Enterprise Potrals, Web Database Programming, Flash website, Search Engine Optimization, 2D Animation, 3 Modeling & Texturing,
People
Competent professionals are key to a company’s success and growth. The efficient, skilled manpower at Brainware has made it the leader in every aspect. 0toone IT Wizard houses an excellent team of Technical Trainers, Web and Graphic Designers, Programmer, and Software and Multimedia Development professionals having knowledge of the latest tools and applications. They form an integral part of the technical and sales support system.
sal azad
January 30th, 2009 12:40 ami love twitter 404 pages… seem like the bird going dissapear… original idea…
David
January 30th, 2009 12:42 amHa! Check our Error 404 Page:
http://fruehjahr.ch/smashingerror404ggggr
;-) We are looking a little bit older, huh?!
Lee-Lee
January 30th, 2009 1:07 amHahah oh my god how hilarious!!!!
Love the Owl and the birdies.
Superduper post!! ;)
Niklaus Gerber
January 30th, 2009 1:11 amI decided to go with another idea of 404 which is very simple. My mainpage, currently in phase of update, http://www.gerbers.ch will get on top a status if you go to a wrong page. So if you go for you will see that you get back to the mainpage but with the status on top. I thought this is something new and is kind of cool :-)
spirit
January 30th, 2009 1:21 amAwesome! Hilarious!
j0cker
January 30th, 2009 2:02 amAnother one: I don’t know! Please don’t tell [the name of the website]!
J0hn
January 30th, 2009 4:26 amGreat list (yet again…!)
This is a nice one too: on a dutch (NL) website for garden designs; ‘the requested page had been ‘erased’ from the design!’ .
dillu
January 30th, 2009 4:46 ammore 404 pages here ..
http://techyview.blogspot.com/2008/12/creative-404-error-pages_27.html
Ram
January 30th, 2009 5:08 amHi… How did you put that twitter button above the comment along with digg delicious??
mew
January 30th, 2009 5:24 amEpic fail! Doesn’t even include 4chan’s pedobear 404!
mew
January 30th, 2009 5:33 amhttp://www.piczogame.net/games/images/404bear.jpg
404nerd
January 30th, 2009 5:46 amThanks for this collection. I merrily enjoyed looking at this bunch of nice 404 pages. Some people really give it a shot.
May I add one of my favorites? It’s on a band’s page called Noisome Paste.
Keep it up, cheers!
Pradeep CD
January 30th, 2009 5:53 amBeautiful pages.
Marvin
January 30th, 2009 5:53 amNice list.. the 404 of Chris Coyer is still my all time favorite !
noonv
January 30th, 2009 5:57 amcool :))
Quiff Boy
January 30th, 2009 6:06 amthe official site for the sisters of mercy (the band) have a fairly whitty take on the old zork games
its full of in-jokes, comments about northern england (leeds, manchester & liverpool), and a few digs at the south (london), journalists and the record industry
http://www.thesistersofmercy.com/error404page.html
alon
January 30th, 2009 6:30 amwhere is ours!?
http://www.devunity.com/errors/unavailable.php
Cédric GIRARD
January 30th, 2009 6:38 amArg, the CSS-Tricks 404 is very similar as mine on my professional website !
On my photo blog, I used this one (in french, sorry) : http://blog.aube-nature.com/404
(you must know Canon DSLR products to understand ^_^)
not2comply
January 30th, 2009 6:47 amVery inspiring, makes me wanna change all of my page into a various 404 page…. ;)
arickard
January 30th, 2009 6:51 amLove this stuff…
http://metatheory.wordpress.com
Teylor
January 30th, 2009 6:58 amI think css-trick 404 error is the best
Jordan McClements
January 30th, 2009 7:32 amApartmenthomeliving.com is definitely the best one I have seen!
ROFL etc…
Zerolove
January 30th, 2009 7:33 amI want to submit mine also omgz~ http://www.zerosource.org/ of course throw something in that will generate a 404…
Zero
Aramroth
January 30th, 2009 8:09 amThe translation of techkultura.com’s 404 error is incorrect. But this one is 100% correct :D
404th rule of the Samurai Code
“If the page you are looking for does not exist,
commit seppuku immediately.”
F Zuccaro
January 30th, 2009 8:18 amhttp://www.frankzuccaro.com/404.htm
Andrew
January 30th, 2009 8:42 amHomer is slowly, but surely, becoming the 404 mascot.
Adam
January 30th, 2009 8:56 amfunny 404:
http://www.247mediastudios.com/idunno
Linda Kelson
January 30th, 2009 10:06 am404: Great info: / Linda / http://www.csslite.com
Daryl
January 30th, 2009 10:51 amgreat idea… will have to try it
NNicole
January 30th, 2009 11:03 amFor me, this is oldie but goody is still one of the more creative 404 pages I’ve seen:
http://www.lookitsme.co.uk/404_me
Sarah
January 30th, 2009 11:29 amHere is one of my favorites … http://www.revolutiontwo.com/demo/album/404
jeff noyes
January 30th, 2009 11:48 amThere’s a similar site here that’s also listing cool 404′s and a plethora of other interface patterns. http://www.interfacepatterns.com
Neil
January 30th, 2009 12:17 pmhttp://www.inverseparadox.net/smashing_mag_rox.php
Sachin Agarwal
January 30th, 2009 1:33 pmWe’re really happy that you liked our 404 page! It’s probably the one design decision that Naz Hamid of Weightshift didn’t touch when he took our beta site and made it awesome for launch.
Nikita Kondraskov
January 30th, 2009 2:06 pmYou missed the 404 pages of comedy central.
Some of their websites have funny monkey cartoons for the 404 page.
sergi
January 30th, 2009 2:42 pmwho knew? i didn’t. those are so creative, so awesome. now i can’t wait to find a 404 page that i’m responsible for in order to do something creative and cool with. thanks for the collection, smashing mag.
mammut
January 30th, 2009 3:25 pmGood stuff really. Hey check out the response at the first featured 404 page – Cut & Taste. There’s a nice response to Smashing magazine :).
four o four
January 30th, 2009 4:08 pmOops! sorry, this comment no longer exist. Please proceed reading the next one or the one before this.