404 Error Pages, One More Time

Advertisement

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

Cut & Taste4
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 Page5

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

Creative 404 Error Page7

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

Screenshot9

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

Screenshot11

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

Screenshot13

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

Screenshot15

Huwshimi.com16
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!

Screenshot17

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

Creative 404 error page19

Newspond20
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 Page21

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

Creative 404 Error Page23

jhuskisson.com24

Screenshot25

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

Creative 404 Error Page28

User-Friendly 404 Error Pages

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

Creative 404 Error Page30

InspirationBit31
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page32

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

Creative 404 Error Page34

Ma.gnolia.com35

Screenshot36

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.com37
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.”

Screenshot38

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

Screenshot40

Habrahabr41
An illustrative image (sent by sabugao42 on Twitter).

Creative 404 Error Page43

CSS Remix44
This fellow is quite scared (sent by @dezignMusings45 on Twitter).

Creative 404 Error Page46

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

Screenshot48

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

Screenshot50

Frye/Wiles51
Frye/Wiles Creative Agency.

Screenshot52

Heinz53
The 404 for the best-known ketchup.

Screenshot54

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

Screenshot56

Craigslist57
An ASCII 404 error page from Craigslist.

Screenshot58

The Truth59
Is this really the truth?

Screenshot60

Wulffmorgenthaler61
Blame that weird beaver on Wulffmorgenthaler.

Screenshot62

Henrik Hedegaard63
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page64

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

Screenshot66

Daze of Our Lives67
“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?”

Screenshot68

Limpfish69
Wanted: a Web page.

Screenshot70

Orangecoat71
“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.

Screenshot72

Kochatelier Berlin73
404 bread on the website of a cooking agency.

Screenshot74

Dawdle75
Mario occasionally entered the wrong castle.

Screenshot76

CSS-Tricks77
Chris Coyier takes a closer look at the code.

Screenshot78

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

Screenshot80

Twitter81
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page82

Livadaru83
Homer on the blog of Cristian Livadaru.

Screenshot84

ARTTHUG Studios85
Homer again, this time at ARTTHUG Studios.

Screenshot86

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

Screenshot88

d20 SRD89
A brutal error at d20 SDR!

Screenshot90

HomeStar Runner91
Oops! You had it coming at HomeStar Runner.

Screenshot92

Animation? Sure!

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

Mark Fennell93
On his 404, Mark Fennell offers… a game!

Screenshot94

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

Screenshot96

Total Insanity97
Total Insanity shows us what insanity really means.

Screenshot98

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

Creative 404 Error Page101

Cricket Feet102
The 404 error page on Cricket Feet talks to you!

Screenshot103

Bluedaniel104
Daniel Karcher’s film design studio.

Screenshot105

Sources and Resources

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/07/25/wanted-your-404-error-pages/
  2. 2 http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/
  3. 3 http://twitter.com/smashingmag
  4. 4 http://cutandtaste.com/404
  5. 5 http://cutandtaste.com/404
  6. 6 http://productplanner.com/404
  7. 7 http://productplanner.com/404
  8. 8 http://mundofox.com/404
  9. 9 http://mundofox.com/404
  10. 10 http://www.duoh.com/404
  11. 11 http://www.duoh.com/404
  12. 12 http://www.apartmenthomeliving.com/404.html
  13. 13 http://www.apartmenthomeliving.com/404.html
  14. 14 http://chrisglass.com/404
  15. 15 http://chrisglass.com/404
  16. 16 http://huwshimi.com/404/
  17. 17 http://huwshimi.com/404/
  18. 18 http://ilovetypography.com/404
  19. 19 http://ilovetypography.com/404
  20. 20 http://www.newspond.com/404
  21. 21 http://www.newspond.com/404
  22. 22 http://brightkit.com/404
  23. 23 http://brightkit.com/404
  24. 24 http://www.jhuskisson.com/404/
  25. 25 http://www.jhuskisson.com/404/
  26. 26 http://www.gog.com/en/error/404
  27. 27 http://www.twitter.com/Chamb
  28. 28 http://www.gog.com/en/error/404
  29. 29 http://www.realmacsoftware.com/rapidweaver/overview/404
  30. 30 http://www.realmacsoftware.com/rapidweaver/overview/404
  31. 31 http://www.inspirationbit.com/404
  32. 32 http://www.inspirationbit.com/404
  33. 33 http://www.45royale.com/404
  34. 34 http://www.45royale.com/404
  35. 35 http://ma.gnolia.com/404
  36. 36 http://ma.gnolia.com/404
  37. 37 http://www.techkultura.com/404
  38. 38 http://www.techkultura.com/404
  39. 39 http://abduzeedo.com/404
  40. 40 http://abduzeedo.com/404
  41. 41 http://habrahabr.ru/showme404/
  42. 42 http://www.twitter.com/sabugao
  43. 43 http://habrahabr.ru/showme404/
  44. 44 http://cssremix.com/archives/1353
  45. 45 http://www.twitter.com/dezignMusings
  46. 46 http://cssremix.com/archives/1353
  47. 47 http://patterntap.com/404
  48. 48 http://patterntap.com/404
  49. 49 http://www.newyorker.com/404
  50. 50 http://www.newyorker.com/404
  51. 51 http://fryewiles.com/templateserrors/404.html
  52. 52 http://fryewiles.com/templateserrors/404.html
  53. 53 http://heinz.com/404.aspx
  54. 54 http://heinz.com/404.aspx
  55. 55 http://www.chelmsfordlibrary.org/smashing_magazine
  56. 56 http://www.chelmsfordlibrary.org/smashing_magazine
  57. 57 http://sfbay.craigslist.org/404/
  58. 58 http://sfbay.craigslist.org/404/
  59. 59 http://www.thetruth.com/404
  60. 60 http://www.thetruth.com/404
  61. 61 http://www.wulffmorgenthaler.com/error.htm
  62. 62 http://www.wulffmorgenthaler.com/error.htm
  63. 63 http://henrikhedegaard.com/404/404.html
  64. 64 http://henrikhedegaard.com/404/404.html
  65. 65 http://notaniche.com/404
  66. 66 http://notaniche.com/404
  67. 67 http://www.dazeofourlives.com/404
  68. 68 http://www.dazeofourlives.com/404
  69. 69 http://www.limpfish.com/404
  70. 70 http://www.limpfish.com/404
  71. 71 http://www.orangecoat.com/404
  72. 72 http://www.orangecoat.com/404
  73. 73 http://www.kochatelier-berlin.de/404-fehler/
  74. 74 http://www.kochatelier-berlin.de/404-fehler/
  75. 75 http://www.dawdle.com/404
  76. 76 http://www.dawdle.com/404
  77. 77 http://css-tricks.com/0404
  78. 78 http://css-tricks.com/0404
  79. 79 http://nikibrown.com/404
  80. 80 http://nikibrown.com/404
  81. 81 http://www.twitter.com/404
  82. 82 http://www.twitter.com/404
  83. 83 http://livadaru.net/404
  84. 84 http://livadaru.net/404
  85. 85 http://www.artthugstudios.com/error404.html
  86. 86 http://www.artthugstudios.com/error404.html
  87. 87 http://www.cubeecraft.com/character404.html
  88. 88 http://www.cubeecraft.com/character404.html
  89. 89 http://www.d20srd.org/404-not-found
  90. 90 http://www.d20srd.org/404-not-found
  91. 91 http://homestarrunner.com/404
  92. 92 http://homestarrunner.com/404
  93. 93 http://www.markfennell.com/404.html
  94. 94 http://www.markfennell.com/404.html
  95. 95 http://www.project-euh.com/404/?
  96. 96 http://www.project-euh.com/404/?
  97. 97 http://www.tinsanity.net/404.shtml
  98. 98 http://www.tinsanity.net/404.shtml
  99. 99 http://www.herr-nilsson.com/404
  100. 100 http://www.twitter.com/eelay
  101. 101 http://www.herr-nilsson.com/404
  102. 102 http://cricketfeet.com/error
  103. 103 http://cricketfeet.com/error
  104. 104 http://www.bluedaniel.com/404
  105. 105 http://www.bluedaniel.com/404
  106. 106 http://www.backtoessentials.com/showcases/a-collection-of-404-error-pages/
  107. 107 http://www.blogmarks.net/user/404

↑ Back to top Tweet itShare on Facebook

Sylwia Besz is a Product Manager working on online and mobile products/services. Privately she's a blogger at In Web We Trust, geek and amateur photographer.

Advertising
  1. 1

    projectautomatika

    January 29, 2009 6:11 pm

    Nice list! Enjoyed watching those creative 404 pages.

    -1
  2. 52

    haha, I love Owly and the milk box. Also the ketchup one and the other one with the birds on-line :)

    -1
  3. 103

    I 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’.”

    0
  4. 154

    Great list again.. Thanks

    -1
  5. 205

    TRUE! I always take 404 page for my best creativity this is nice place to show something unusual.

    -1
  6. 256

    Superb post.

    -1
  7. 307

    The 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…. ;-)

    0
  8. 358

    hehe, nice ànd useful post and funny as well.

    -1
  9. 409

    Like ever! SM Rocks!
    Thanks for so many suggestions!

    -1
  10. 460

    @T (#24): Thx, now it’s workin’ :)

    -1
  11. 511

    Really 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.

    -1
  12. 562

    Alexander Dombroff

    January 30, 2009 12:23 am

    i am a web designer and i really appreciate this post. It is awesome! i am gonna use these techniques.

    -1
    • 613

      0toone 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.

      0
  13. 664

    i love twitter 404 pages… seem like the bird going dissapear… original idea…

    -1
  14. 715

    Ha! Check our Error 404 Page:
    http://fruehjahr.ch/smashingerror404ggggr

    ;-) We are looking a little bit older, huh?!

    -1
  15. 766

    Hahah oh my god how hilarious!!!!
    Love the Owl and the birdies.

    Superduper post!! ;)

    -1
  16. 817

    I 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 :-)

    -1
  17. 868

    Awesome! Hilarious!

    -1
  18. 919

    Another one: I don’t know! Please don’t tell [the name of the website]!

    -1
  19. 970

    Great 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!’ .

    -1
  20. 1021
  21. 1072

    Hi… How did you put that twitter button above the comment along with digg delicious??

    -1
  22. 1123

    Epic fail! Doesn’t even include 4chan’s pedobear 404!

    -1
  23. 1174
  24. 1225

    Thanks 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!

    -1
  25. 1276

    Beautiful pages.

    -1
  26. 1327

    Nice list.. the 404 of Chris Coyer is still my all time favorite !

    -1
  27. 1378

    cool :))

    -1
  28. 1429

    the 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

    -1
  29. 1480
  30. 1531

    Arg, 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 ^_^)

    -1
  31. 1582

    Very inspiring, makes me wanna change all of my page into a various 404 page…. ;)

    -1
  32. 1633
  33. 1684

    I think css-trick 404 error is the best

    -1
  34. 1735

    Jordan McClements

    January 30, 2009 7:32 am

    Apartmenthomeliving.com is definitely the best one I have seen!

    ROFL etc…

    -2
  35. 1786

    I want to submit mine also omgz~ http://www.zerosource.org/ of course throw something in that will generate a 404…

    Zero

    0
  36. 1837

    The 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.”

    -1
  37. 1888
  38. 1939

    Homer is slowly, but surely, becoming the 404 mascot.

    0
  39. 1990
  40. 2041

    404: Great info: / Linda / http://www.csslite.com

    0
  41. 2092

    great idea… will have to try it

    0
  42. 2143

    For 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

    0
  43. 2194
  44. 2245

    There’s a similar site here that’s also listing cool 404’s and a plethora of other interface patterns. http://www.interfacepatterns.com

    0
  45. 2296
  46. 2347

    We’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.

    0
  47. 2398

    Nikita Kondraskov

    January 30, 2009 2:06 pm

    You missed the 404 pages of comedy central.
    Some of their websites have funny monkey cartoons for the 404 page.

    -1
  48. 2449

    who 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.

    0
  49. 2500

    Good stuff really. Hey check out the response at the first featured 404 page – Cut & Taste. There’s a nice response to Smashing magazine :).

    0
  50. 2551

    Oops! sorry, this comment no longer exist. Please proceed reading the next one or the one before this.

    1

↑ Back to top