Copyright and a Non-Exclusive License
404 Information & Great User Experience

OOPS! Examples of Creative 404 Error Pages & Mistakes.

OOPS-FLOWER-Front copy 

Before tackling the technical issues of a 404 error page on your website, try to think of an imaginative idea that can turn a WWW mistake into an artistic, cleaver, interesting and entertaining 404 error page consistent with your art work, media, signature style or brand identity. 

Goof-Off-Flower-Pin-404My 404 page uses a custom made OOPS! Flower Pin (shown above). My OOPS! Flower Pin was preceded by an earlier idea, the Goof Off Flower (left).
 
The images for your 404 page can be anything you want it to be, but for artists and makers, the images can and should be consistent with the style of your website and your art or craft. Seems to me it is a bonus for your website if the viewer experiences something special, even in the midst of a technical error.  Finding original content is a sure winner on the web.  And the content for this 404 page isn't a permanent commitment. You can change your images anytime you want.  

Below are a couple of presentations found on the Internet with lots of great 404 page ideas.  Following that are more 404 examples from art museums that successfully use the artwork in their collections to present memorable 404 error pages.

20 really cool and creative 404 error pages from SeoCustomer.com

The presentation below has even more 404 pages (but most of them are boring and represent a functional corporate solution).
Don't let your 404 page look average. Quickly Scroll through the whole presentation as the Lego 404 page (about three quarters of the way through) is fabulous...so keep looking. 

As a creative artist and maker, your 404 Page can also reflect your creativity. 
 
Here is the 404 page for the Museum of Modern Art. This is what I would consider an effective use of art in their collection for the 404 page - an Edward Ruscha oil painting  "OOF" from 1962.
404-Museum-Modern-Art
 
The 404 page for the Walker Art Center uses three paintings with the numbers 4, 0, 4 from Jasper Johns, Robert Therrien, and Jasper Johns respectively.  As you can see below, the use of artwork for the 404 ties directly into their collection. 
 

404-SFMOMA-Lost-rico-98
The San Francisco Museum of Modern Art takes an image from Rico 98 titled Found LOST Bird Poster (right). Thematically it fits right into the concept of a 404 error page. I am not particularly fond of all the white empty space on the page (shown below), but keeping the image small keeps all the pertinent information "above the fold." 
404-error-SFMOMA
 
"Above the fold" is an old newspaper term. All the important information was above the fold so it was seen when the folded paper was sold at the newspaper stand.  In web design it translates to the fact that all the relevant information is visible without scrolling down.  "Above the fold" is an essential part of good 404 error page design.
 
Here is how the Minneapolis Institute of Art plays on the "lost" theme of a 404 Error page.
Minneapolis-Institute-of-Art-404-error-page

MINNEAPOLIS-institute-art-Lost-statue-404The Randolph Rogers "The Lost Pleiad"
 statue is perfect for a 404 error page. It is just wonderful how this marble statue from 1874 is given an unanticipated new context in the 21st century.

The MIA 404 error page also included a Google search box so that the viewer can refine their search without leaving the site, however it would have been better to squeeze all of these features including the statue credits above the fold (perhaps left or right justifying the image). Then the text and search box would fit on the other side. 
 
Despite my advice to be creative, keep in mind that a 404 page should also help the viewer navigate your website. Here is an example of a very creative page that fails to support the navigation purpose. 
404-Museum-Bad-404
While this is a cute picture and captures the motif
 for a 404 error page, it is a 404 fiasco, a huge website blunder. Why? Because this has no specific identity for the museum and worse, no navigation back to the website.  It leaves the viewer stranded with nowhere to go. This is a big mistake.

Your 404 page should always:
1) reinforce your identity,  
2) engage the viewer,  
3) keep the viewer on your website
 
The next post in the series "OOPS 404 Error Page"  is a list of recommended information for creative and effective 404 error pages and some hints to avoid some common missteps.
 
O.K. you've got the idea....think about the potential images for your custom 404 page. 
It isn't so hard to do after all and increases the usability of your website.


OOPS 404 Error Series and Related Posts:

OOPS! When Something Goes Wrong - Broken Links & 404 Errors

Comments