Menu

Beautiful and Useful 404 Error Pages for Inspiration

Advertisement

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.

This was published on May 30, 2010

75 Comments

Benjamin Weigl May 30 2010

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

Odin Dutton May 30 2010

Google, I hope you’re listening!

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 30 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 30 2010

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

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

#23… When you see it…

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

Nick Burd May 30 2010

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

great post.

Thanks

Rishabh Agarwal May 30 2010

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

Work of mine – http://error.horde.lt/

Michael May 30 2010

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

Marc Gayle May 30 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 30 2010

He also is quite opinionated :)

http://marcgayle.com/contact/

Luke Desroches May 30 2010

Blizzard’s error page is my favourite:

http://us.blizzard.com/lkasjdflasd?rhtml=y

Free Vector Graphics May 30 2010

Indeed, great 404 pages!

FFCommunicator May 30 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 30 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 30 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 30 2010

great!!

Juan Ce May 30 2010

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

Smashy Design May 31 2010

Very nice collection. Thanks for sharing…

devDsine May 31 2010

lol, the south park!

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

South Park Studios :)

BronsonID May 31 2010

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

Sasha Baksht May 31 2010

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

Stunning collection. Great pages!

Estevão Mascarenhas May 31 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 31 2010

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

Regards!

Nice list. Good stuff here.

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

Alex Crooks Jun 01 2010

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

NicOnlyOne Jun 01 2010

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

JV Media Jun 01 2010

These are all great! Here’s ours: http://www.jvmediadesign.com/error.html

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

pradeep Jun 02 2010

Great Buddy……..

nice collection dude!

Frinley Jun 02 2010

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

scruffyrobot Jun 04 2010

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

Benjamin Weigl Jun 05 2010

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

Alex Sabaka Jun 06 2010

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

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

Thank you ! Nice collection !!

abner caballero Jun 20 2010

great it’s a goodest..
genial estan buenisimas

Alberto Jun 25 2010

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

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

Laurent Jun 28 2010

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

@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 Jul 01 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 Jul 13 2010

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

Swat Chap Jul 19 2010

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

pagina12 Aug 01 2010

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

Ionut Mantescu Aug 11 2010

i have one on my website.. http://www.dmdesign.ro/404

Mark Dijkstra Aug 20 2010

Nice list!!!

Thanks for including my cool 404 page ;)

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

Florian Schommertz Sep 10 2010

I like blizzards 404.

Jack Moore Oct 14 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 Nov 02 2010

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

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

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

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.

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

We love this one – helping us to relax!

http://willoughbystewart.com/404

Carolina May 17 2011

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

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 Oct 12 2011

We’ve got a nice one as well :)

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners