50 Professional and Creative 404 Error Page Designs

November 12, 2010 · 10 comments

by Dustin Betonio

50 Professional and Creative 404 Error Page Designs

The 404 error aka File Not Found — is one of the most common errors we run into browsing the Internet. It can be frustrating, but broken links are common and inevitable. This is why having a good and professional Error 404 page is almost as important as having great contents. Sometimes it may not be your fault that visitors landed on the error page, but when it happens being able to hold their attention and lead them back to a relevant page is absolutely critical.

A well-designed 404 Error Page can help you avoid losing your visitor’s trust and potentially building up your readership even when everything is not perfect. In this article I give general advice on designing 404 error pages and have compiled a showcase of 50 professional and creative error pages.


ElegantThemes
ThemeForest

Advertisement

404 Error Page Tips

Knowing how bad it is!

OK 404 error pages are typically not given the focus they deserve. Most webmaster believe that there will be no broken links on their site and typically they click on the right links themselves (unless they actually take testing really serious). While 404 error pages are typically not overrun with traffic it can be quite interesting to investigate the traffic analytics for it to learn how many clicks there are and from where. One way to get the actual number is to use Google Analytics and view stats for Content By Title. You are looking for the title “Page not found”. If there are pages with a high number of 404 hits you can use Analytics Entrance Sources view to know exactly where the requests came from.

image

What elements to add to a 404 Error page

When a visitor end on a page not found error page the main goal is to provide option for leading the person back into the site. One excellent option for this is a search feature and some funny graphics to make the situation less serious. In the showcase below you will find numerous examples of website that are sing illustrations this way.

image

Another good idea for a 404 error page is to provide useful links and suggest the visitor to go on and not leave right away!

image

Keep the design simple and consider to say sorry. A lot of sites use sentences like “holy crap the page is lost”, Uh-Ho, oops, woopsie and so on. It can be a combination with an illustration or an alternative way forward. It is important though that the visitor is not mislead, confused or unsure if the current page is a error page.

image

404 Error Page Examples

1. Fotolia

Fotolia

2. Tinsanity

tinsanity

3. 501st Legion

501st

4. 24-4 Media

24-7media

5. CssTricks

csstricks

6. On wired

01-onwired

7. iFolderLinks

ifolderlinks

8. latelategifts

latelategifts

9. Surfing On Static

05-surfingonstatic

10. Renkoo

renkoo

11. Dundee Living

09-dundeeliving.

12. TurboMilk

turbomilk

13. Abduzeedo

abduzeedo

14. Propeller

propeller

15. B3ta

b3ta

16. Limp Fish

10-limpfish

17. Blue Daniel

11-bluedaniel

18. Home Star Runner

12-homestarrunner

19. Astuteo

astuteo

20. Blippy

blippy

21. Pixel 2 Life

13-pixel2life

22. BrightKite

brightkite

23. Studentmarket

studentmarket

24. RetardZone

retardzone

25. Chibi Design

14-chibidesign

26. Suspended Animations

15-suspendedanimations

27. rush68

rush68

28. Soocial

soocial

29. Brandstack

brandstack

30. Chris Jennings

chrisjennings

31. Mmo Game Zone

mmogamezone

32. Digital Mash

digitalmash

33. The Brand Surgery

thebrandsurgery

34. Mozilla

mozilla

35. Club penguin

18-clubpenguin

36. The Truth

20-thetruth

37. Gadies

21-gadies

38. Jotsai

jotsai

39. Acme

acme

40. Merge

mergeweb

41. Milrayas

milrayas

42. Urban Outfitters

urbanoutfitters

43. Sick Designer

sickdesigner

44. Factor D

blog-factorstudio-com_

45. Wulf Morgen Hatler

22-wulffmorgenthaler

46. Heinz

25-heinz

47. Eternal Moon

28-eternalmoon

48. Apartment Home Living

apartmenthomeliving

49. Red Tag

30-redtag

50. Tk Designs

tkdesigns-tv_

51. catalyst studios

catalyst studios

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 7 comments… read them below or add one }

Gerald May 13, 2011 at 10:45 am

Another german version of a 404

http://xpaket.de/404

Reply

Aadil January 27, 2011 at 8:24 am

nice collection.. :)

Reply

Oliver November 18, 2010 at 6:38 am

Here is a great one! Enjoy

http://www.ienlive.com/error-404

Reply

Lars November 18, 2010 at 1:52 pm

Thanks a lot Oliver!

Reply

Samo November 13, 2010 at 10:06 am

Great ideas and design.
Here is another one: http://blog.bagr.si/404

Reply

Web Design Nottingham November 12, 2010 at 5:29 pm

Thats one way of voiding an error! Great designs

Reply

WayLay Design November 12, 2010 at 4:58 pm

Very nice collection of 404′s. You can see our 404 here:

http://www.waylaydesign.com/404

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 3 trackbacks }

Previous post:

Next post:


Web Analytics