website design - What image and message use in the "Not found" page (404 error page)

I've seen the robot of Google, the creature that has Github. I think that is question of imagination and what kind of data manages your web app to design a custom image and the message to show to the user for the 404 error.

I would like to see other examples or if you got some design ideas about it.

Answer

This is a bit like saying - can you just type 404 page examples into Google for me and summarise the results for me too. Try doing this and you get a bunch of pages like this and that on Smashing Magazine and just a whole load of other collections.

But there's more to presenting a 404 page than a funny picture - A List part has a good article on The Perfect 404

404 Must-haves

As well as the “something went wrong” text, you should ensure that your error page has the following:

• 
  

  A link to the site map (if you have one) and the home page. This is the easiest way for users to bail out. This no-brainer requires no clever scripting.

  
  
  


• 
  

  A search box. If you have a site search, add it to your 404 page. If you don’t have a site search and are in the habit of generating 404 errors, perhaps you should get one.

  
  


• 
  

  A distinctly minimalist look. Avoid putting all your standard site navigation on this page. You should aim to remove distractions. Besides, insisting on including a complete site navigation strip may present a maintentance overhead (your 404 page can easily lag behind the rest of the site if it is not dynamically updated with the rest of your site and the last thing you want is to have navigation on the 404 that is no longer relevant/working. Oh the irony!)

  
  

Also be sure to cut the jargon. I mean, we can talk about 404s here, right? We’re in good company. But 60-year-old Doris who got a broken link while browsing a knitting site won’t have a clue what a 404 error is. If you want to use the phrase “Error 404,” do it subtly — do it as a footnote, a nod to those who understand your freaky-deaky web speak.

So here's a comparison of what not to do, and what to do:

Here's my favourite humerous one - and I'll assume that Lorem Ipsum is ironic (but I wonder what real book they could have used instead). But it's absolutely totally useless. It's a complete dead end.

And here's an example one from Bergan Blue that's not amazingly funny, but is actually truly useful in terms of forwarding the visitor on to another page.