Beautiful and Useful 404 Error Pages for Inspiration

May 30 2010 by Rishabh Agarwal | 75 Comments

Beautiful and Useful 404 Error Pages for Inspiration

Errors don’t need to be ugly. On the Web, any links that are broken result in a 404 Not Found error message. There are two ways you can address this issue when your user navigates towards a broken link.

Option 1: Present the user with an old and boring default error page, which displays no information other than "There’s an error."

Option 2: The second solution is to present them with a custom error page design that can suggest alternative things they can see or do in order to resolve their problem.

Which one do you think is better? Obviously, the second option.

Here is a collection of 30 beautiful and creative 404 Not Found error message pages.

1. Mark Dijkstra

Mark Dijkstra

2. Chris Jennings

Chris Jennings

3. Carsonified

Carsonified

4. Astuteo

Astuteo

5. daniel karcher

6. HootSuite

HootSuite

7. Mixx

Mixx

8. Frye / Wiles

Frye / Wiles

9. Wufoo

Wufoo

10. deviantART

deviantART

11. ferdaze.com

ferdaze.com

12. habrahabr.ru

habrahabr.ru

13. Future of Web Design

Future of Web Design

14. Popscreen

Popscreen

15. Twurn

Twurn

16. Propeller

Propeller

17. CUOMA Design Studios

CUOMA Design Studios

18. Product Planner

Product Planner

19. TattooSales.com

TattooSales.com

20. Spreadshirt

Spreadshirt

21. Bloqhead.com

Bloqhead.com

22. Club Penguin

Club Penguin

23. Jim Cromwell

Jim Cromwell

24. Kochatelier Berlin

Kochatelier Berlin

25. Acro Media Inc

Acro Media Inc

26. South Park Studios

South Park Studios

27. swissmiss

swissmiss

28. Dundee Living

Dundee Living

29. Hornets247.com

Hornets247.com

30. iStockphoto

iStockphoto

Related Content

About the Author

Rishabh Agarwal is an Engineering student from India. In addition to that, he’s also a passionate Photographer and a Web Designer. He writes about technology on his blog, TechyLabs, and Photography on ShutterSkills. Follow him on Twitter: @rish404.

75 Comments

Benjamin Weigl

May 30th, 2010

One of mine: http://aroma-gusto.de/error.html
Fine Collection by the way. Cheers Ben

Odin Dutton

May 30th, 2010

Google, I hope you’re listening!

Connor

May 30th, 2010

Doesn’t having a personalised error page mean that Google recognises the page as a normal page, rather than an error page? In other words not a 404 page?

Web Sauna

May 30th, 2010

dude, what a nice collection you have here… :)

thank You for an inspiration… have to do my homework in this field as well (blush)

Marcell Purham

May 30th, 2010

Those are great 404 pages. Most of them are very artistic as well. Great roundup

Simon

May 30th, 2010

For 404′s surely it’s very important to have your site’s navigation prominent so people are likely to click elsewhere around your website. I like the one I put on my football (“soccer”) website… if you know football it’s a funny image

http://www.the6yardbox.com/shepsdfsdf

Brett

May 30th, 2010

#23… When you see it…

David

May 30th, 2010

The one on http://www.sevenbyfive.net is cool given it is a photography blog ?
http://www.sevenbyfive.net/404

bill

May 30th, 2010

http://www.notonebit.com/flort.php

Informative AND awesome!

Nick Burd

May 30th, 2010

Great round up… but I’ve seen so many 404 page round ups lately lol.

great post.

Thanks

Rishabh Agarwal

May 30th, 2010

Thank you so much for the Thumbs Up, guys.. I’m glad that you all liked it :)

Michael

May 30th, 2010

Take a look at this one from stufbuff http://www.stuffbuff.com/widge%20aq.html

Marc Gayle

May 30th, 2010

Mine isn’t as ‘designy’ as the others, but it is customized and I happen to think it’s nice. It’s my son :)

http://marcgayle.com/404.php

Marc Gayle

May 30th, 2010

He also is quite opinionated :)

http://marcgayle.com/contact/

Free Vector Graphics

May 30th, 2010

Indeed, great 404 pages!

FFCommunicator

May 30th, 2010

Good article. 404 error pages are often overlooked in the scope of development as many see them as a low priority. While it is a page that you never may intend for anyone to see, it is the one that may hold a potential customer or client if something does go wrong. If you give them nothing but a crude error, chances are they’ll hit google and one or your competitors instead of back. If you make it something that catches their attention and draws them back into the flow of your site easily, you may salvage that relationship and possible customer.

Odin Dutton

May 30th, 2010

@connor: http://www.google.com/404 with the amount of data google has a helpful 404 page would be nice. “Did you mean ***?”

1MiniMe

May 30th, 2010

You should also show best maintenance pages for inspiration.
I want to submit our page which is probably one of the funniest :D

http://www.1minime.com/_app_offline.htm

BTW: We make design 3D statues of yourself from a simple picture, fully handmade.

Kewl Luser

May 30th, 2010

great!!

Juan Ce

May 30th, 2010

Here you have one that uses random videos: http://www.unblogged.net/404

Smashy Design

May 31st, 2010

Very nice collection. Thanks for sharing…

devDsine

May 31st, 2010

lol, the south park!

Daniel

May 31st, 2010

Great collection, however, most of them were listed in a few other 404 collections.

Benjamin Weigl: Great Work! I’d say you KO the whole collection here:-) The whole website aroma-gusto.de is also worth navigating!

You can check mine 404 as well: http://dan-designs.com/404

Oles

May 31st, 2010

South Park Studios :)

BronsonID

May 31st, 2010

I’m surprised that this isn’t used more:
http://www.bronsonid.com/asadsad

Sasha Baksht

May 31st, 2010

How come you missed Techbridge’s one http://www.techbridge.ca/404.html? ;)

Karol

May 31st, 2010

Stunning collection. Great pages!

Estevão Mascarenhas

May 31st, 2010

You can see our 404 page here:
http://bit.ly/bNcdzc

We developed an fork game with the most used SEO terms, and it’s only CSS3 and jQuery. :)

Santiago Martinez

May 31st, 2010

Thanks! Guys. I’am Santiago from CUOMA, one of the 404 page creator.

Regards!

Jordan

May 31st, 2010

Nice list. Good stuff here.

Kelle

May 31st, 2010

I like minutedock’s one
http://minutedock.com/404

robert

June 1st, 2010

Nice 404 page in the list and in the comments too. Quality stuff here.

NicOnlyOne

June 1st, 2010

I’m not a fat ass, i’m big boned =)
http://niconlyone.com/error/404.html

Michel

June 1st, 2010

Really very good, very intelligent post with ideas.
I have to make changes in my 404 page.

pradeep

June 2nd, 2010

Great Buddy……..

Neha

June 2nd, 2010

nice collection dude!

Frinley

June 2nd, 2010

Thank you so much for the 404 collections,I ma getting some new ideas…thanks again.

scruffyrobot

June 4th, 2010

Great collection, but mine wasn’t on there – http://scruffyrobot.com/scruffy

Benjamin Weigl

June 5th, 2010

@daniel,
thank you very much. I’m glad you like the Site :-)

Alex Sabaka

June 6th, 2010

http://turbofilm.tv/404 It’s so beautiful error page =)

Tom

June 7th, 2010

This is neither beautiful nor useful, but it’s one of the first custom 404 pages I made for my personal site. It’s a Flash movie that shows random images along with an accompanying soundbite.

http://www.all-about-tom.com/error

Andrej

June 9th, 2010

Thank you ! Nice collection !!

abner caballero

June 20th, 2010

great it’s a goodest..
genial estan buenisimas

Alberto

June 25th, 2010

404 Pages of the 4chan are among the most brilliant.

Jameos

June 25th, 2010

@Alex Crooks…your site tells me that my IE8 is IE6.

Laurent

June 28th, 2010

Nice collection.
Here’s ours: http://www.providenz.fr/404/

Zhaph

June 30th, 2010

@Connor – That depends on how your server is returning the page – the concern is that a lot of those pages are returning status codes of “200 OK”, which search engines will treat as a valid page response, and index the page content accordingly.

If you’re going to have custom 404, and you should have one, then you really need to make sure that your server is returning it with a response code of 404, so that search engines don’t return it in results: http://www.google.com/support/webmasters/bin/answer.py?&answer=93641

MicroAngelo

July 1st, 2010

#13 – Future of Web Design – deserves special mention if you go to it with a webkit browser such as Chrome or Safari, as it has an amazing and surprisingly simple CSS3 animated spinning globe to fit with the “Houston, we have a problem” space theme.

The globe’s not in your screengrab, so you may have missed it.

Multimedium

July 13th, 2010

Love the examples above. Please take a look at ours too: http://www.multimedium.be/404

Swat Chap

July 19th, 2010

Nice post!
Here’s one more good one: http://anassin.com/404

pagina12

August 1st, 2010

Here one more :) from a news paper in Argentina http://www.pagina12.com.ar/404.html

Mark Dijkstra

August 20th, 2010

Nice list!!!

Thanks for including my cool 404 page ;)

pulsa

August 24th, 2010

thank You for an inspiration.I have to make changes in my 404 page.

Jack Moore

October 14th, 2010

Wicked 404′s here we really like our 404 check it out, should give you a laugh!
http://www.kitedigital.co.uk/404

J Appleseed

November 2nd, 2010

Here is another one at a company named Exuberate that makes iPhone apps:
http://www.exuberate.me/404

Elle

December 31st, 2010

I’ve bookmarked this for updating my page 404 as soon as possible, thank you!

Alex

January 17th, 2011

Love some of these examples, especially the grim reaper! Our 404 page: http://www.carbuzz.co.uk/404/

PDQ

January 21st, 2011

Nice collection! Every 404 page should be a little humorous – you at least need to take the edge off of what just happened to the end user. We recently updated our 404 page after seeing so many others: http://www.pdqinc.com/404.

Akhtar

February 18th, 2011

awesome collection. i hope u will love this one as well: http://smashingwall.com/inspiration/404-error-pages-examples/

Dylan

March 7th, 2011

We love this one – helping us to relax!

http://willoughbystewart.com/404

Carolina

May 17th, 2011

Very nice collection. Here’s mine http://www.carolinakaucher.com.ar/404

Chris

August 3rd, 2011

OK, this is all I needed to make me realise that standard 404 pages just aren’t good enough. Time to put my thinking hat on.

Douglas Karr

October 12th, 2011

We’ve got a nice one as well :)

Leave a Comment

Subscribe to the comments on this article.