35 Entertaining 404 Error Pages

5 Sep

via Mashable! de Erica Swallow le 04/09/10


“404 Not Found.” These three little words can make any Internet explorer an unhappy camper. After all, who hopes to click on a broken link or stumble upon a moved or deleted page while cruising around the web?

Luckily, some web designers have chosen to end the misery of encountering a 404 error page. Instead of letting their site readers bump heads with a nasty dead-end error message, they’ve managed to squeeze a little entertainment out of it.

Below you’ll find some of the most entertaining 404 error pages on the web. We’ve listed them alphabetically to avoid playing favorites, but they’re all worth a look. Share your favorite 404 error page designs in the comments below!

1. 501st Legion

<img title="1. <a href="http://www.501st.com/404" target="_blank">501st Legion</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/501st.jpg&#8221; width=”400″ style=”border: none;” />

501st Legion is a Star Wars costume organization. It only makes sense that its 404 page would play on Obiwan’s famous jedi mind trick with a “weak-minded” stormtrooper.

2. Abduzeedo

<img title="2. <a href="http://abduzeedo.com/404" target="_blank">Abduzeedo</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/abduzeedo.jpg&#8221; width=”400″ style=”border: none;” />

Yes, Houston, a 404 is definitely a problem.

3. Apartment Home Living

<img title="3. <a href="http://www.apartmenthomeliving.com/404.html" target="_blank">Apartment Home Living</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/apartmenthomeliving.jpg&#8221; width=”400″ style=”border: none;” />

A nice ol’ chap comes to your assistance on ApartmentHomeLiving.com if you run across a 404 error page. Click the lovely lady peering from behind the frame for proper navigation suggestions.

4. Astuteo

<img title="4. <a href="http://astuteo.com/404" target="_blank">Astuteo</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/astuteo.jpg&#8221; width=”400″ style=”border: none;” />

“Uh-Oh! SpaghettiOs!” You know you’re a part of pop culture if your jingle makes it into a 404 error page. The popular SpaghettiOs marketing jingle is here to stay.

5. Blippy

<img title="5. <a href="http://blippy.com/username_available/404" target="_blank">Blippy</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/blippy.jpg&#8221; width=”400″ style=”border: none;” />

Head over to Blippy’s 404 page for an adventure. Keep clicking on the boy dressed in a unicorn outfit to discover a triple rainbow! Who knew a 404 page could be so fun?

6. Factor D

<img title="6. <a href="http://blog.factordstudio.com/404" target="_blank">Factor D</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/blog-factorstudio-com_.jpg&#8221; width=”400″ style=”border: none;” />

In an ode to early horror films, Factor D features an appropriately horrific 404 error accompanied by a beautiful, yet terrified scream queen.

7. SureDev

<img title="7. <a href="http://blog.suredev.com/404" target="_blank">SureDev</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/blog-suredev-com_.jpg&#8221; width=”400″ style=”border: none;” />

Many 404 error pages apologize for the error. Not this one. It’s obviously your fault.

8. Blue Daniel

<img title="8. <a href="http://www.bluedaniel.com/404" target="_blank">Blue Daniel</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/bluedaniel.jpg&#8221; width=”400″ style=”border: none;” />

This 404 error page is a beautiful depiction of “Track 404,” a fictitious NYC subway line. Check it out to experience the full animation.

9. Brandstack

<img title="9. <a href="http://brandstack.com/404" target="_blank">Brandstack</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/brandstack.jpg&#8221; width=”400″ style=”border: none;” />

“You can click anywhere else, but you can’t click here.” Love it.

10. Center’d

<img title="10. <a href="http://www.centerd.com/error.html" target="_blank">Center’d</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/centerd.jpg&#8221; width=”400″ style=”border: none;” />

Bottom line: You can’t go wrong with cute kittens.

11. Chris Jennings

<img title="11. <a href="http://chrisjennings.com/404" target="_blank">Chris Jennings</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/chrisjennings.jpg&#8221; width=”400″ style=”border: none;” />

Most of us would like to run into a 404 error page just as much as we’d like to run into the Grim Reaper.

12. Colour Marketing & Design

<img title="12. <a href="http://www.colourmd.com/404/" target="_blank">Colour Marketing & Design</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/colourmd-com_.jpg&#8221; width=”400″ style=”border: none;” />

When you’re facing “sharks with laser beams attached to their frickin’ heads,” what do you expect? Definitely a 404 error.

13. CSS-Tricks

<img title="13. <a href="http://css-tricks.com/thispagedoesntexist" target="_blank">CSS-Tricks</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/css-tricks-com_.jpg&#8221; width=”400″ style=”border: none;” />

Well, that can’t be good.

14. CSSscoop

<img title="14. <a href="http://cssscoop.com/404" target="_blank">CSSscoop</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/cssscoop.jpg&#8221; width=”400″ style=”border: none;” />

Picking a 404 error page design that is consistent with your name is an appropriate move. CSSscoop chose a melting ice cream cone, with a scoop of ice cream, of course.

15. Digitalmash

<img title="15. <a href="http://www.digitalmash.com/extras/404/" target="_blank">Digitalmash</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/digitalmash.jpg&#8221; width=”400″ style=”border: none;” />

Sarcasm in dire situations is always appreciated, right?

16. Good Old Games (GOG)

<img title="16. <a href="http://www.gog.com/en/error/404" target="_blank">Good Old Games (GOG)</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/gog.jpg&#8221; width=”400″ style=”border: none;” />

Try not to make any missteps on GOG, or you’ll end up lost in the cosmos.

17. HomeStarRunner.com

<img title="17. <a href="http://www.homestarrunner.com/404" target="_blank">HomeStarRunner.com</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/homestarrunner.jpg&#8221; width=”400″ style=”border: none;” />

Insulting your readers doesn’t usually help, but this 404 made me chuckle.

18 Hoppermagic

<img title="18 <a href="http://www.hoppermagic.com/404" target="_blank">Hoppermagic</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/hoppermagic.jpg&#8221; width=”400″ style=”border: none;” />

Hoppermagic chose to stick to its brand imagery when creating its 404 page.

19. iFolderLinks

<img title="19. <a href="http://ifolderlinks.ru/404" target="_blank">iFolderLinks</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/ifolderlinks-ru_.jpg&#8221; width=”400″ style=”border: none;” />

There’s just something about a really frustrated baby that catches your attention. And if you’ve made it to this 404 page, you probably feel his pain.

20. Itchy Robot

<img title="20. <a href="http://www.itchyrobot.com/404" target="_blank">Itchy Robot</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/itchyrobot.jpg&#8221; width=”400″ style=”border: none;” />

If you can’t think of something clever to say on your 404 page, just write exactly what your users are thinking.

21. Jackfig

<img title="21. <a href="http://www.jackfig.com/404" target="_blank">Jackfig</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/jackfig-haiku.jpg&#8221; width=”400″ style=”border: none;” />

Jackfig added a creative touch to its 404 error page, with an inspirational haiku.

22. Jolie Poupée

<img title="22. <a href="http://www.joliepoupee.it/404" target="_blank">Jolie Poupée</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/joliepoupee-it_.jpg&#8221; width=”400″ style=”border: none;” />

Jolie Poupée, creator of eco-friendly children’s clothes, serves up an audience-appropriate 404 on its site.

23. Mark Dijkstra

<img title="23. <a href="http://www.markdijkstra.eu/404" target="_blank">Mark Dijkstra</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/markdijkstra-eu_.jpg&#8221; width=”400″ style=”border: none;” />

This 404 error page is reminiscent of the kitschy tourist shirts that your lousy friends and relatives buy you when they visit amazing places.

24. Merge

<img title="24. <a href="http://www.mergeweb.com/404" target="_blank">Merge</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/mergeweb.jpg&#8221; width=”400″ style=”border: none;” />

Prithee, go medieval on your site’s visitors if need be.

25. Milrayas

<img title="25. <a href="http://www.milrayas.com/404" target="_blank">Milrayas</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/milrayas.jpg&#8221; width=”400″ style=”border: none;” />

Imagery always makes a 404 more entertaining.

26. OrangeCoat

<img title="26. <a href="http://www.orangecoat.com/404" target="_blank">OrangeCoat</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/orangecoat.jpg&#8221; width=”400″ style=”border: none;” />

Some 404 error pages do a wonderful job of explaining to users exactly what caused the 404 error. OrangeCoat provides a fun decision tree for lost web surfers that is sure to help them along their merry ways.

27. Oroza

<img title="27. <a href="http://www.oroza.com/404" target="_blank">Oroza</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/oroza.jpg&#8221; width=”400″ style=”border: none;” />

Have fun with colors, shapes and exclamations.

28. Sick Designer

<img title="28. <a href="http://sickdesigner.com/404" target="_blank">Sick Designer</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/sickdesigner.jpg&#8221; width=”400″ style=”border: none;” />

Sick Designer captures the depression that a 404 can cause on its error page.

29. Student Market

<img title="29. <a href="http://www.studentmarket.ro/405.html" target="_blank">Student Market</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/studentmarket-ro_.jpg&#8221; width=”400″ style=”border: none;” />

How fitting that a student-centric site would feature an addition problem on its 404 page.

30. The Brand Surgery

<img title="30. <a href="http://www.thebrandsurgery.co.uk/404" target="_blank">The Brand Surgery</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/thebrandsurgery.jpg&#8221; width=”400″ style=”border: none;” />

This page just pops. We like it.

31. The North Face

<img title="31. <a href="http://www.thenorthface.com/404" target="_blank">The North Face</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/thenorthface.jpg&#8221; width=”400″ style=”border: none;” />

For true entertainment value, why not just tell a story? The North Face does just that by creating a tale about link-eating mountain goats.

32. Tinsanity

<img title="32. <a href="http://www.tinsanity.net/404.shtml" target="_blank">Tinsanity</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/tinsanity-net_.jpg&#8221; width=”400″ style=”border: none;” />

You might have been pwned, burned, punk’d or rickrolled recently, but have you been 404’d? Click here to join the party.

33. TK Designs

<img title="33. <a href="http://www.tkdesigns.tv/404" target="_blank">TK Designs</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/tkdesigns-tv_.jpg&#8221; width=”400″ style=”border: none;” />

Excitement! Adventure! Ahhhhh, where I am?!

34. Urban Outfitters

<img title="34. <a href="http://www.urbanoutfitters.com/urban/html/404.html" target="_blank">Urban Outfitters</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/urbanoutfitters.jpg&#8221; width=”400″ style=”border: none;” />

Our sentiments exactly.

35. Urban Pill

<img title="35. <a href="http://www.urbanpill.com/404" target="_blank">Urban Pill</a>” src=”http://cdn.mashable.com/wp-content/gallery/entertaining-404-error-pages/urbanpill.jpg&#8221; width=”400″ style=”border: none;” />

If, after searching for hours, you still can’t find the page you were seeking, Chuck Norris probably has it.


More Web Design Resources from Mashable:


12 Beginner Tutorials for Getting Started With Photoshop
Use Adobe Fonts in Your Own Web Designs
10 Essential Free E-Books for Web Designers
12 Beginner Tutorials for Getting Started with Adobe Illustrator
6 New Mac Apps for Designers and Developers

More About: 404, 404 error pages, error page, web design, Web Development

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s