Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

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 Link

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!

Creative 404 Error Page

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

Creative 404 Error Page5

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

Screenshot7

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

Screenshot9

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

Screenshot11

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

Screenshot13

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

Screenshot15

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

Creative 404 error page17

Newspond18
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 Page19

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

Creative 404 Error Page21

jhuskisson.com22

Screenshot23

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

Creative 404 Error Page26

User-Friendly 404 Error Pages Link

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

Creative 404 Error Page28

InspirationBit29
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page30

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

Creative 404 Error Page32

Ma.gnolia.com33

Screenshot34

Have Fun With 404! Link

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

Screenshot36

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

Screenshot38

Habrahabr39
An illustrative image (sent by sabugao40 on Twitter).

Creative 404 Error Page41

CSS Remix42
This fellow is quite scared (sent by @dezignMusings43 on Twitter).

Creative 404 Error Page44

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

Screenshot46

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

Screenshot48

Frye/Wiles49
Frye/Wiles Creative Agency.

Screenshot50

Heinz51
The 404 for the best-known ketchup.

Screenshot52

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

Screenshot54

Craigslist55
An ASCII 404 error page from Craigslist.

Screenshot56

The Truth57
Is this really the truth?

Screenshot58

Wulffmorgenthaler59
Blame that weird beaver on Wulffmorgenthaler.

Screenshot60

Henrik Hedegaard61
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page62

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

Screenshot64

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

Screenshot66

Limpfish67
Wanted: a Web page.

Screenshot68

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

Screenshot70

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

Screenshot72

Dawdle73
Mario occasionally entered the wrong castle.

Screenshot74

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

Screenshot76

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

Screenshot78

Twitter79
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page80

Livadaru81
Homer on the blog of Cristian Livadaru.

Screenshot82

ARTTHUG Studios83
Homer again, this time at ARTTHUG Studios.

Screenshot84

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

Screenshot86

d20 SRD87
A brutal error at d20 SDR!

Screenshot88

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

Screenshot90

Animation? Sure! Link

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

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

Screenshot92

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

Screenshot94

Total Insanity95
Total Insanity shows us what insanity really means.

Screenshot96

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

Creative 404 Error Page99

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

Screenshot101

Bluedaniel102
Daniel Karcher’s film design studio.

Screenshot103

Sources and Resources Link

(al)

Footnotes Link

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

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

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

Advertisement
  1. 1

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

    1
  2. 2

    Great stuff, has inspired me to put more effort into the design of my 404 pages!

    1
  3. 3

    yeah real cool error´s !

    -1
  4. 4

    We put easter eggs in our 404 page – check out:

    http://www.venturenavigator.co.uk/404

    and click on the image!!

    3
  5. 5

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

    1
  6. 6

    Very useful and entertaining, thanks!

    0
  7. 7

    One more time? You promise?

    0
  8. 8

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

    -1
  9. 9
  10. 10

    I 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

    -1
  11. 11

    Nice list.

    0
  12. 12

    Martijn Vandenberghe

    January 29, 2009 9:19 am

    Where do you guys keep getting the inspiration to write about these things?! Great!

    0
  13. 13

    funny stuff

    0
  14. 14

    Great article, these ones are very enjoyable to read.

    0
  15. 15

    I love the brightkit and the fryewiles one :D

    -1
  16. 16

    Extremely creative!

    -1
  17. 17

    some 404 pages were really creative, while others were simply hilarious. nice list. btw, i like d “live preview” when submitting comments.

    -1
  18. 18

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

    -1
  19. 19

    Enjoyed it so much…
    tnx!

    -1
  20. 20

    Kind 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 :(

    -1
  21. 21

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

    -1
  22. 22

    That reminds me I need to make a nicer 404 page. Man Homer seems to be pretty popular for this error.

    -1
  23. 23

    Wow these are great. This one is equally nice: http://cssscoop.com/404
    Nice post…

    and @Benjamin Falk – Yeah they have a great list.

    -1
  24. 24

    Great list… Thanks

    -1
  25. 25

    Very nice – and thanks for the reference to my 404-page :-)

    -1
  26. 26

    Hey, 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!

    -1
  27. 27

    Nice list .The css-tricks and gog.com 404’s are my favourites.

    -1
  28. 28

    Nice, 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

    -1
  29. 29

    Washington 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

    -1
  30. 30

    I’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…

    0

↑ Back to top