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

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

    0
  2. 202
  3. 403

    Chelmsford Public Library? That is near where I live.

    0
  4. 604

    CopyrightCreators

    October 6, 2010 12:53 pm

    Great Article! Thanks for the tips.

    1
  5. 805

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

    -6
  6. 1006

    I found cool 404 page on github.com for example https://github.com/fobarbaz

    0
  7. 1207

    我正在寻找这方面的内容来妆点自己的404页面(虽然我还不知道怎么来弄).看到这样精彩的设计让我倍受鼓舞.非常感谢!

    -1
  8. 1408

    PDQ Car Wash Equipment

    January 21, 2011 8:10 am

    Our own 404 page after browsing many inspirational examples: http://www.pdqinc.com/err/404.asp.

    0
  9. 1609

    Thanks 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

    0
  10. 1810

    Here’s another fantastic example I’ve come across:
    http://www.proofcreative.com.au/error

    2
  11. 2011

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

    0
  12. 2212
  13. 2413
  14. 2614

    haha great stuff.. some of the are really funny… i’ll make something similar for my web site… :)

    0
  15. 2815

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

    1
  16. 3016

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

    0
  17. 3217

    the Mario page was most hilarious… lol… i like that most… ;)

    0
  18. 3418
  19. 3619

    Here’s a fun one I found that should be added to the list! http://www.speedysigns.com/404

    0
  20. 3820

    I sa w this one recently and thought I’d add it to your list http://www.hotels-agent.com/404

    0
  21. 4021

    I 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

    0
  22. 4222

    Name.com just pushed a new 404 Page
    http://www.name.com/error-404

    0
  23. 4423

    Back to the future theme: http://bedmap.com/404

    0
  24. 4624

    I found and interesting one: http://www.riluri.com/404error.php
    (drag the green slider in the middle of the screen)

    0
  25. 4825

    http://deepanjandatta.com/404/ – just starting out, is this any good? :) .Some pretty creative stuff out here.

    0
  26. 5026

    Thanks 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

    0
  27. 5227

    Most probably i have seen the most beautiful 404 page collection.

    0
  28. 5428

    Bravo! these are just brilliant! :)

    0
  29. 5629

    Today, 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?

    -1
  30. 5830

    LoL Greats ideas !
    This one is awesone http://www.moonservices.ch/404/

    0
  31. 6031

    Check out this 404 fashion page

    https://www.maedchenflohmarkt.de/404

    0
  32. 6232

    404 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

    1
  33. 6433

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

    1
  34. 6634

    Check out Saforian’s 404 pages — http://www.saforian.com/404. Every time you get a 404 page it refreshes with a new persona

    0
  35. 6835
  36. 7036

    Nice collection !
    Thks for inspiration.
    Our error page : http://www.shozap.tv/404

    0
  37. 7237

    Those are all awesome 404’s.

    This one is funny too:

    http://www.antistandard.com/site/404

    0
  38. 7438

    Russian funny 404 from development site http://okostroy.ru/404/

    0
  39. 7639

    here my 404 page:
    http://www.fan3rush.com/sdt/index.php/index.php/404

    what do u think ?

    0
  40. 7840

    Would love to get your feedback for our new 404 page experience (Thanks!):
    http://rating-widget.com/404/

    1
  41. 8041

↑ Back to top