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)
Beverly Millson
January 30th, 2009 5:05 pmThis is a bit like embroidering on the inside of the jacket. The wearer knows and dons it with pride.
Andrew
January 30th, 2009 5:06 pmBrilliant! Now I need to get back in there and fix my 404.
cheers from Brooklyn.
Simon T Small
January 30th, 2009 5:07 pmI found this one yesterday.
http://flickr.com/photos/simontsmall/3237047397/
Dan
January 30th, 2009 5:31 pmI am surprised no one noticed this: http://abduzeedo.com/404
They are in violation of the Google Adsense TOS by displaying on an error page.
Volker Kemeter
January 30th, 2009 11:39 pmmine – old one, but good one ;)
i was wondering about all that simpsons stuff. isnt there a copyright on that images?
Ralph
January 30th, 2009 11:48 pmAmazing list of Error 4-oh!-4 Pages. Thank you.
Here is a nice idea for a restaurant-error 4o4, too: http://www.das-zensur.de/404.
Ralph
Kitty
January 31st, 2009 1:40 amGreat collection!
My favourite one would have to be: http://www.unfinitydesign.com/404
shubhangi
January 31st, 2009 2:36 amhey thats really colorful 404 pages.Really intresting stuff.I have seen such variety first time.
Erkan
January 31st, 2009 3:33 amVery inspiring, makes me wanna change all of my page into a various 404 page…. ;) :)
netics
January 31st, 2009 6:10 amyou forgot http://www.southparkstudios.com/404.html :(
Greg
January 31st, 2009 11:13 amExcellent list
This is another one that’s quit funny for a wine related website
http://www.spitorswallow.co.za/site/404
Again thanks for all the good work
Reshank
January 31st, 2009 11:45 amThe 404 of http://cricketfeet.com/error was copied (badly) from http://www.scintilla.utwente.nl/error22/ . The second one was featured on slashdot a couple of years ago.
Camilo Oliveira
January 31st, 2009 6:49 pmCheck the Cut And Taste´s 404 error page again.
A special message to SM reader. Very appropriate :)
Andrew Harrison
January 31st, 2009 8:01 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.
eg: http://andrew.harrison.org/iphone
chris rhee
January 31st, 2009 10:30 pmHi, as someone pointed out, I did write a special message to the Smashing Magazine readers on Cut & Taste’s 404 page.
As long as you click on the first screenshot featured in this blog post, you should be able to see it. For lazier people, here’s the direct link: http://cutandtaste.com/404
zeroin
January 31st, 2009 11:46 pmanother funny one: http://www.amcharts.com/404
Pit
February 1st, 2009 4:49 amThink ideally one actually wouldn’t see these pages :-)
P.S. http://www.Sitemorse.ch can help you to ensure all links (also external ones) work
skimati
February 1st, 2009 5:17 amlove, love, love the NotaNiche one! made my morning.
afrix
February 1st, 2009 5:52 aml o l them 404 erros look nice lol,
http://afrix99.deviantart.com/
freedownload.ir
February 1st, 2009 1:47 pmvery very very good , thank you ;)
Kayla
February 1st, 2009 2:43 pmGood finds, I love the funny ones.
pipsa
February 1st, 2009 3:56 pmThnks for this idea, loved it! First time I heard about it, eaven though i have worked whit webshops (not as desinger or similar) and i am going to use this Idea at my own webpage =)
Br,
Piparipiru from finland
Emmanuel Bretón
February 1st, 2009 7:10 pmCool! Very NIce Review, but you miss this one:
http://www.explosm.net/comics/0/
ejej
Joey
February 1st, 2009 7:24 pmI love this one, kinda have to be an mma fan though:
http://theufcresults.com/404.php
vanice
February 1st, 2009 8:52 pmAny kind soul know where to get tutorial for wordpress.org to make pretty custom 404 page like those
posted above?
I wanted to make a 404 page like that but dont know where or how to start.. lol..
~LoV3 smashingmagazine, my fav+ site for all time ^_^
Angelo Panares
February 3rd, 2009 6:55 amThis is a good one, it has inspired and motivated me to tidy up and make an interesting 404 error page :)
Brad
February 3rd, 2009 12:55 pmHere’s a very funny 404-page that is a nice play on the site’s logo:
Kidmondo.com
Alex
February 3rd, 2009 3:35 pmLove the list, seems like since these are appearing in galleries people are really putting a lot of though into them.
This one is pretty funny too: http://theufcresults.com/404
jsonvega
February 3rd, 2009 7:59 pmyeah, its very cool, it has inspired me too to make my own one. it should be more interesting than the frontpage! har har har!
jehzlau
February 4th, 2009 5:40 amgeeez… I should learn to create my own awesome 404 page just like those :D
Rodrigo Henrik
February 4th, 2009 1:02 pmCool! Congrats!
Jack Leonid
February 4th, 2009 10:35 pmStudio-XL.com official 404 error page
not only beautiful, but 100% valid:
Link
Sai Gudigundla
February 5th, 2009 7:43 amThat is a gr8 collection of Error Pages that you got here. I also like your comments on each one of them.
TheBattle
February 5th, 2009 11:36 pmReally useful article!
I’ve got my own version of 404 here with random pictures and effects after any reload
Not A Niche
February 9th, 2009 10:51 am@123, glad that it made your day :) and thanks to Smashing Magazine putting my 404 on this list :)
kunstgriff
February 9th, 2009 3:55 pmRecently updated the 404 page a few days ago. Added a pic and some functionality. Here it is: .
Taunus-Blogger
February 10th, 2009 11:41 pmHi,
that´s a fine listing of creative solutions for the 404 page.
I saw it on zdf.de today.
Now I plan to do this with my 404-p@ge too.
Very gooooooood.
Ryu
February 13th, 2009 5:09 amHey guys :3 take a look at aniwood.org/404
use adblock to get rid of the shitty Adsense-Banners, i love this page ^__^
Tom Bradshaw
February 26th, 2009 5:24 amsome very clever examples… nothing like a good 404
Luana
February 27th, 2009 3:46 amHi!
This is my 404 error page:
http://www.sgec.com.br/404
Thank you.
brista
February 28th, 2009 3:49 pmHaha, when I saw the title of this article, I thought, “404′d!!! Homestar Runner!”
Scott Motte
March 14th, 2009 12:51 amFun article :) The Frye Wiles guys are in my town. Here’s a 404 Jerome Jerome did for our site Flossed Today – http://flossedtoday.com/404
Andreas
March 21st, 2009 12:28 amGreat 404 page that must be added to this great list :D
Ted
March 21st, 2009 8:12 aman other fun one: http://www.cabaretbisanzio.com/404.php
HamBoneZ
March 23rd, 2009 5:40 amI would like to know if I could find a nice tutorial to “How to place 404 Images when it’s happen”
Thx in advence
Oleg
April 2nd, 2009 10:12 pmWow! Thanx a lot! Nice selection of 404 Error Pages. Look at my own 404 Error Page: Link
Melanie
April 4th, 2009 6:29 amI have to start going to non-existent pages just to check out the 404 pages. These are great. Link Matching the 404 page to the theme helps and gives a good impression to the wayward visitor.
arvind
April 5th, 2009 8:57 pmNice work man….
Arvind
Daniel
April 5th, 2009 9:09 pmNice work
Cilla
April 10th, 2009 11:39 pmGreat collection!! Are you taking any more submissions? I have a 404 page up: http://bravelittlesoul.com/duh.html
anonymous
May 13th, 2009 4:49 amSaw one funny one with tags. Had to plug it here :)
Intermix Management
Dalibor Vasiljevic
May 19th, 2009 3:38 amHey, what do you say about this one? http://www.rainfall.ro/404/
Tom
May 23rd, 2009 6:06 pmThis one is also awesome. Changes every time!
Michel van Agtmaal
June 20th, 2009 3:58 amWe have a ghost wondering around at https://www.opensourcesupportdesk.com/404
zed
June 26th, 2009 6:47 pmyou forgot zipcar’s 404 page! i love the conversational tone and error sign dropped in the grass!
ekspekt
June 30th, 2009 12:31 pminteresting post, will come back here, bookmarked your site
Michael Austin
July 15th, 2009 11:13 amWell ours is not online yet but we hope it makes the next list
404 screen shot for new site
Maria
August 2nd, 2009 4:51 pmNPR’s 404 pages is one of my favorites, in terms of making sure I stay on the site.
Daniel Woods
September 26th, 2009 6:38 amThis is a funny 404 error from Blip.fm
http://digg.com/d315dlT
Arnaud
October 1st, 2009 2:22 pmThis is a beautiful and funny 404 Web Page :
Wimax Wibox Internet Haut-Débit 404
White!
October 18th, 2009 4:32 am=) http://motos.kiev.ua/404
Greg
October 22nd, 2009 9:10 pmThis one uses a Mary Worth comic.
http://www.openendedadventure.com/404.html
Don Bledsoe
October 26th, 2009 4:30 pmI think our 404 is fun … http://www.forefrontinternet.com/404.shtml
ted
October 29th, 2009 6:21 ambeautiful 404 : http://www.studentsfuckschool.fr/404
Michael Williams
November 8th, 2009 10:15 pmHere is a cute 404 from a Christmas site: http://bestsantasletter.com/bla
Charlize Art
December 10th, 2009 2:09 pmAnother one.
http://www.tatuarte.org/404.htm
Anton
December 16th, 2009 8:37 amAnother clever one http://www.mobivenues.com/404/
Aaron
December 16th, 2009 1:56 pmFun 404 page > http://www.wisnet.com/404/
dmk
December 22nd, 2009 2:39 amHere’s mine:
http://duncanmckean.co.uk/404
plain, simple, and refers to the homepage. Hope you like it.
catty2christmas
December 23rd, 2009 1:05 pm400+4=….
Shit
December 23rd, 2009 1:09 pm:O …404! That’s a lot of 4– wait a minute Mike M.!
Mimsie
December 23rd, 2009 1:12 pmKitty, Kitty, y r u 2 far?
Mimsie
December 23rd, 2009 1:15 pmOn the word, “Hello!” eye meant 2 doo “Jello!” HAHAHAHAHA.
Travis
December 23rd, 2009 1:27 pm8-bit 404 page design – http://www.travisjmorgan.com/blog/404
Supercalifragilisticexpialidocious
December 24th, 2009 5:56 pm(burps)
Rainer Fabrizi
December 29th, 2009 9:30 amOur own one – http://www.transporter.at/404/
We like it a lot, so we even link to it from every page of our website (404-truck at the bottom).
webmongrels
February 2nd, 2010 1:00 pmDefo a sweet-as source of inspiration! :):):)
http://dl.dropbox.com/u/600126/Suba%20-%20404/HTML/404.html
Cheers!
Khine Nwe Nwe Lin
February 3rd, 2010 1:13 amSometimes this problem is because of the version of ChartImage.axd in declaring it in httphandler under the in web.config file.So please try to declare like this.
And also some IIS 7 integrated-mode web applications require the following declaration in .So,if you need,please
declare it again.
——–
Constantin
February 14th, 2010 5:12 amVery nice list, specially the Homer pages.
Regards,
C.
Fitz
February 19th, 2010 2:14 amI quite like Lonely Planets error page – http://www.lonelyplanet.com/server-error. Shows a broken down image and references the images location perfect for this type of website.
Aditya
February 20th, 2010 1:54 pmI’ve tried to make my 404 page user friendly too with Google’s “Did you mean” type functionality. Example:
http://www.wefoundland.com/rresume
RJ
February 27th, 2010 8:39 pmHey these are good. You should check out http://www.5o9inc.com/something. You’ll get a cool 404 error page and if you go their home page, it actually makes sense. Pretty cool.
Grafika-M
March 6th, 2010 1:36 pmGreat post!
Thanks!
Look at my 404 page!
http://grafika-m.su/404
Your opinion?
jack
March 9th, 2010 12:46 pmthis 500 page attempts hypnosis.
http://www.eventorb.com/message.aspx?msgID=500
Web Design Lebanon
March 11th, 2010 8:00 amNiceeeeeeeee
Mary Margaret
March 14th, 2010 4:41 amThis is a funny one, too: http://www.argeron.com/uhoh.html
Santa Cruz Web Designer
March 17th, 2010 6:33 amWhat a great list, thanks! I’ve been neglecting my error pages. Thanks for the reminder to get my but in gear.
Zach Hornsby
March 23rd, 2010 11:01 pmAfter reading this article, I created one.
http://netjelly.com/404
çağrı
March 26th, 2010 2:04 pmnice one, i’m thinking to create one :)
Tom
March 28th, 2010 8:45 pmVery Nice. Here’s mine: http://www.printinator.com/404error.html
Brenda Mabbitt
April 12th, 2010 11:45 amMy favorite 404 page of all time was one w/a screen shot of Charlton Heston and Kim Hunter as Taylor and Zira in their famous kissing scene from “Planet of the Apes” and a title that read, “Okay, That’s Just Wrong!” I almost fell out of my chair I laughed so hard!
Andy
April 16th, 2010 12:38 amThis one is cool: http://www.rock.cz/404
Rafael
April 20th, 2010 2:43 amI made one
http://www.webogroup.com/404/
Andrei
April 28th, 2010 12:39 pmThis one looks cool
http://www.bule.ro/404.html
rwrick44
June 21st, 2010 9:17 ami like this p[ost.
Air soft, animal resellers, blowguns, crossbows, diversion safes, handcuffs, home protection, knives, mace defensive sprays, metal detectors, pepper sprays, personal alarms, personal protection, safety lights, slingshots, steel batons, stun guns, tasters.
Ammy
July 9th, 2010 3:34 pmHi. We have a wonderful 404 page
http://www.luckymountainhome.com/404/
Chris
July 13th, 2010 10:36 am404 Snorlax is blocking the way. The site your requested could not be reached.
Esteban
July 15th, 2010 9:36 pmI wanted to create my own 404 page and after some hours I ended creating a game to give a litte humor to the otherwise awful situation for the user of a page not found.
you can see it here:
http://www.wildharmonystudio.com/404.php
hope you like it
Swat Chap
July 18th, 2010 8:06 pmNice collection!
Here’s one more good one : http://anassin.com/404
Multimedium webdesign
July 27th, 2010 12:08 pmSome nice examples. We tried to make ours as funny as possible: http://www.multimedium.be/404
Yannell Rodriguez
August 6th, 2010 11:45 amThat’s a really great collection. I’d be curious to see the best error pages for 2010.
maybe http://www.geograffiti.com/error/
:-)