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

Creative 404 Error Page

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

Creative 404 Error Page

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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!

Screenshot

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

Creative 404 error page

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.

Creative 404 Error Page

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

Creative 404 Error Page

jhuskisson.com

Screenshot

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

Creative 404 Error Page

User-Friendly 404 Error Pages

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

Creative 404 Error Page

InspirationBit
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page

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

Creative 404 Error Page

Ma.gnolia.com

Screenshot

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

Screenshot

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

Screenshot

Habrahabr
An illustrative image (sent by sabugao on Twitter).

Creative 404 Error Page

CSS Remix
This fellow is quite scared (sent by @dezignMusings on Twitter).

Creative 404 Error Page

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

Screenshot

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

Screenshot

Frye/Wiles
Frye/Wiles Creative Agency.

Screenshot

Heinz
The 404 for the best-known ketchup.

Screenshot

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

Screenshot

Craigslist
An ASCII 404 error page from Craigslist.

Screenshot

The Truth
Is this really the truth?

Screenshot

Wulffmorgenthaler
Blame that weird beaver on Wulffmorgenthaler.

Screenshot

Henrik Hedegaard
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page

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

Screenshot

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?”

Screenshot

Limpfish
Wanted: a Web page.

Screenshot

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.

Screenshot

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

Screenshot

Dawdle
Mario occasionally entered the wrong castle.

Screenshot

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

Screenshot

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

Screenshot

Twitter
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page

Livadaru
Homer on the blog of Cristian Livadaru.

Screenshot

ARTTHUG Studios
Homer again, this time at ARTTHUG Studios.

Screenshot

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

Screenshot

d20 SRD
A brutal error at d20 SDR!

Screenshot

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

Screenshot

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!

Screenshot

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

Screenshot

Total Insanity
Total Insanity shows us what insanity really means.

Screenshot

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

Creative 404 Error Page

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

Screenshot

Bluedaniel
Daniel Karcher’s film design studio.

Screenshot

Sources and Resources

(al)

Sylwia Besz is a Product Manager (internet and mobile areas), blogger (she's the author of In Web We Trust) and amateur photographer. Currently living in Krakow, Poland and working for Onet.pl.

  1. 201

    Amy

    September 15th, 2010 1:44 pm

    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

    Aure

    September 17th, 2010 8:20 am
    0
  3. 203

    Connor Crosby

    September 20th, 2010 11:26 am

    Chelmsford Public Library? That is near where I live.

    0
  4. 204

    CopyrightCreators

    October 6th, 2010 12:53 pm

    Great Article! Thanks for the tips.

    +1
  5. 205

    sharetipsinfo

    October 7th, 2010 8:17 pm

    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.

    -1
  6. 206

    jcubic

    January 5th, 2011 7:07 am

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

    0
  7. 207

    laudland

    January 10th, 2011 9:20 am

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

    0
  8. 208

    PDQ Car Wash Equipment

    January 21st, 2011 8:10 am

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

    0
  9. 209

    Chris

    January 29th, 2011 4:38 pm

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

    Kelvin

    March 9th, 2011 10:07 pm

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

    +1
  11. 211

    David Ball

    March 14th, 2011 6:21 am

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

    mark

    April 13th, 2011 11:41 pm
    0
  13. 213

    Paul Ogier

    April 20th, 2011 5:48 am
    0
  14. 214

    Matej Latin

    May 3rd, 2011 1:59 pm

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

    0
  15. 215

    Genny

    May 5th, 2011 12:18 pm

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

    Layla023

    July 10th, 2011 7:26 pm

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

    ravi pahariya

    July 12th, 2011 5:03 am

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

    0
  18. 218

    Asmaa

    July 25th, 2011 9:45 pm

    here is another one :)
    http://aivault.com/store/404.php

    0
  19. 219

    Aron

    August 17th, 2011 8:15 am

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

    0
  20. 220

    Alan

    August 30th, 2011 6:16 am

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

    0
  21. 221

    pupu987

    September 8th, 2011 5:55 am

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

    Michael

    September 9th, 2011 1:05 pm

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

    0
  23. 223

    Mark

    September 11th, 2011 4:59 pm

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

    0
  24. 224

    Mark

    September 13th, 2011 12:48 am

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

    0
  25. 225

    Deep

    September 26th, 2011 7:58 am

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

    0
  26. 226

    Daniel

    November 2nd, 2011 12:29 pm

    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

  1. 1

    Genny

    May 5th, 2011 12:18 pm

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

    Sarah

    January 30th, 2009 11:29 am

    Here is one of my favorites … http://www.revolutiontwo.com/demo/album/404

    +1
  3. 3

    four o four

    January 30th, 2009 4:08 pm

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

    +1
  4. 4

    White!

    October 18th, 2009 4:32 am
    +1
  5. 5

    CopyrightCreators

    October 6th, 2010 12:53 pm

    Great Article! Thanks for the tips.

    +1
  6. 6

    Kelvin

    March 9th, 2011 10:07 pm

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

    +1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top