Effective 404 Error Pages: Best Practice and Examples

Every year the Internet is replenished by more and more sites with sophisticated designs that amaze us with its vibrant and extraordinary realization. A lot of advanced elements such as high-detailed illustrations, full screen HD photo backgrounds, animations, parallax, etc. can be found in a modern website designs. All these become possible thanks to new specifications of HTML5, CSS3 in cooperation with several programming languages. Whereas you can easily find spectacular landing pages, unconventional navigations, unusual sliders, there are still couple of essential website parts that remain unnoticed such as contact forms or 404 error pages.

As for the latter, despite all the provided options, web designers intentionally neglect them. Although, being well-thought out they can transform almost left visitors into newly arrived ones, making them stay on your site a bit long and in some cases eventually find what they are looking for.

Well-designed structure of Error Pages

In order to build a good 404 page you should take care of several essential issues such as:

  • provide users with alternative solutions, for example integrate menu, home link, search box or list of useful resources;
  • entertain them with mini games, jokes, texts or captivated illustrations.

Boring, clean and clear background pages with bunch of plain black links neatly arranged in columns won’t make any difference. Your page should have a zest.

To start with I suggest you to take a look at our collection of really good examples of 404 Pages that covers interesting ideas and approaches of creating attractive place.

Netiko uses hand-drawn rough illustrations with hidden message and conspicuous explanatory text.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Netiko

La Yogurt certainly grabs user’s attention with calm blue background and yummy illustrations. Moreover, it provides clear navigation system along with exuding home button.

La Yogurt

Ideal Hut charms with whimsical illustrations that actually gives the dynamics through the use of animated colorful ‘black hole’.

Ideal Hut

Soap Media highlights message of the lost result by means of properly done illustrations.

Soap Media

Webdesignerdepot utilizes only one, but really glaring and quickly-to-understand image of ‘something went terribly wrong’. I suppose with such a vivid picture even header seems to be redundant.

Webdesignerdepot

Piccsy does a good job of using only one geometric pattern and red color in order to create something truly unconventional and at the same time artistic.

Piccsy

Airgid Media Inc keeps up with the modern trends by integrating full screen photo background that depicts bewilderment and incomprehension.

Eric Lagarda demonstrates technical side of the issue by means of truly itemized animation.

Eric Lagarda

LLT Group use of idiosyncratic pirate-monkey illustration creates a menacing look that is perfectly complemented by circular navigation and funny threatening text.

LLT Group

Grain and Mortar integrates outline images along with squared background, recreating feeling of discreet design with clean and clear general appearance, in which is really difficult to get lost.

Grain and Mort

Ubooly has a really funny and cheerful picture of what’s happening, so that it looks hugely impactful. Basic navigation menu in the header and couple of widgets in the footer offers several lines of retreat.

Ubooly

Jorgeatgu breaks the monotony of the page by means of angled typography and some cool graphics.

Jorgeatgu

Diesel offers clear escape routes in a simple easy-to-understand manner.

Diesel

Saaspose imaginatively presents an image of missing page providing users with list of helpful resources.

Saaspose

UK TV is centered around popular TV series urging you to check out online streams.

Red Monkey Goo principally leans on its mascot, major elements that are traced through the entire design and explanatory text with standard navigation menu.

Red Monkey Goo

Angry Birds adds a lot of personality by using popular scene and characters from the game.

Angry Birds

CaptainDash screams out minimalist style with a single monochrome illustration and several menu items that represented in a huge blocks.

CaptainDash

Noupe relies heavily on hilarious graphics along with search box and popular articles widget.

Noupe

Welikesmall is another great example of using photo as a background for an error page. Such approach gives an opportunity to show both informative and emotional side of the issue.

Harris Farm features rustic typeface with slight grunge touch. By using green color palette designer wants to help alleviate nervousness and anxiety of those who have not found what they were looking for.

Harris Farm

Is it WordPress exudes an image of darkness with only one bright element that plays role of the logo and home backlink.

Is it wordpress

Lift Interactive meets its users not only with a univocal image, but also with footer full of widgets with useful information and landing page header.

Lift Interactive

Ian James Cox is marked by subtle and delicate, slightly crumpled paper texture with handwritten title and invigorative photo.

Ian James Cox

Cool Apps has a strong extraterrestrial feel with vibrant, rich in details illustration.

Cool Apps

Pixel Stadium is based on a concept that non-existent pages were swallowed by a black hole. Such a scientific approach of explaining what is happening makes the page unique and attractive.

Pixel Stadium

Page doesn’t exist….or does it?

As a matter of fact 404 pages notify the users that a page does not exist, but physically it can be used as a sterling website page and an integral part of the whole design. Moreover, you can easily transform it from the final page in the intermediate one thereby closing the circle on the main page.

So, what do you think of fully using Error pages? Do you find this approach helpful and necessary for everyone? Do you know any other good examples of 404 pages? We are looking forward to hearing from you.

Nataly Birch

I'm an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

Newsletter

10 Comments
  1. Sernick Mar 24, 12:10 am

    Cropp.com has eye-catching 404 site: http://cropp.com/404 :D
    People was talking on Twitter whole day about it ;)

    Reply
    +8
  2. Lindiwe Mar 24, 1:27 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
    • Bionik6 Mar 24, 2:14 am

      Thanks ;-)

      @Sernick: You’re can shock!

      Reply
      +2
    • sernick Mar 24, 11:38 am

      @Lindiwe: u don’t know anything about marketing i think ;)
      You see that menu on the top? It’s not there without the purpose. Someone will get a 404 -> then see this page -> then show friends this page -> someone of his/her friends will go to shop. Pure marketing! :)

      Reply
      0
  3. Lindiwe Mar 24, 1:28 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -8
  4. Aidoru Mar 24, 2:23 am

    At http://notfound.org/404 there is an example of a relly functional use of 404 page

    Across the European Union, thousands of children go missing every year. Thanks to the NotFound project, you can make a difference. Install our snippet and a picture of a missing child automatically gets published on every ‘page not found’ of your website. Together, we can find them.

    Reply
    +11
  5. k2 Mar 25, 5:32 pm

    Quite good collection… And nice ideas for sure

    Reply
    +2
  6. Stefano Nov 12, 1:39 pm

    Some of the examples are really very good pieces of design, but…
    How can you consider them “effective”?
    Maybe for the designer who made them or for the owner of the web who wants to look modern, but I really doubt that most of them are effective for users.

    You say that a good error page should:
    “entertain them with mini games, jokes, texts or captivated illustrations.”
    No, sorry, this is NOT a 404 best practice. Users did not came to your website to play (unless it is the purpose of your website). They came here to find information and if they don’t find it quickly or don’t understand how to recover from an error, they’ll leave.

    On the other hand, you say that a good 404 page should “provide users with alternative solutions, for example integrate menu, home link, search box or list of useful resources”.
    Yes, this IS a good practice, but, how many of the examples are respecting it?

    – Webdesignerdepot is not self explanatory at all. What went wrong? Did the user or the page do something wrong? How can I recover from error?
    – Jorgeatgu page could be difficult to read for many users
    – Piccsy: Really, how many normal users (not web designers. Users) know what a 404 error is? Moreover, most users won’t even be able to read the 404 message.
    – Noupe and CaptainDash: What happened? Why am I seeing this page?

    Of course if your users are only web designers they will understand, have fun and stay in your website. But, please, keep in mind that you should never user those pages in most websites.
    Believe me, I’ve seen so many users struggling to understand error messages that at a first sight seemed 100% clear.

    Reply
    +4

Leave a Reply

*
* Minimum length: 20 characters