15个很有创意的404错误页面

Three weeks ago we’ve showcased some of the most beautiful, creative and user-friendly 404 Error Pages ; we’ve collected some interesting ideas one can use to help out the visitors once they got lost ony your page. We’ve also asked our readers to design their own 404 pages and promised to present the best solutions afterwards.

We’ve received over 100 entries. The choice wasn’t easy, so evaluating the quality of the entries we’ve considered – among other things – the communication with visitors, precise and clear navigation, the use of graphics, creative ideas and some outstanding solutions. Some of the solutions presented below might not be as helpful as they could or should be, however they include some creative approaches you should be aware of designing your 404 error pages.

We’d like to thank to everyone who participated, your input means a lot for us and for web-designers worldwide. You help to improve the quality of the Web. Don’t underestimate it.

So here is what you’ve come out with: over 40 working examples of user-friendly, creative and outstanding 404 error pages – in a brief overview.

[Offtopic: by the way, did you already get your copy of the Smashing Book ?]

1. Appealing images

A really dirty, hand-made image with a comment – for despaired visitors only. The page also includes a search box.

Radiohead in 404 Error Pages: Reloaded

Rainfall Daffinson makes sure you don’t feel lost.

Rainfall in 404 Error Pages: Reloaded

Even a 404-error page can look stylish.

Cgcraft in 404 Error Pages: Reloaded

A book with the page which couldn’t be found.

Book in 404 Error Pages: Reloaded

Slonky in 404 Error Pages: Reloaded

Iamww in 404 Error Pages: Reloaded

Jamie Huskisson communicates with “lost” visitors using imagery.

Robot in 404 Error Pages: Reloaded

404 error as time on a clock.

Tix in 404 Error Pages: Reloaded

Sometimes you can feel or even smell that you’re definitely not on the page you wanted to visit.

Village in 404 Error Pages: Reloaded

2. Getting poetic

404 error haiku. Informative, however a direct link to the start page would be quite useful.

Jackfig in 404 Error Pages: Reloaded

Three more haikus by Lumino.us. Plus beer to keep you company.

Lumino in 404 Error Pages: Reloaded

And one more haiku by alt-web.com.

Alt-web in 404 Error Pages: Reloaded

BlueVertigo offers a poem with horizontal scrolling.

Vertigo in 404 Error Pages: Reloaded

A small poem about the 404 error by Poemofquotes.com

Poemof in 404 Error Pages: Reloaded

Jacob Thomas quotes Winston Churchill and informs lost visitors that the page they’ve been looking for seems to have been burnt down by a puckish elf called ‘Prontyr’.

Upward in 404 Error Pages: Reloaded

Darren Hoyt appeals to the humanity of mistakes and errors and communication with visitors directly.

Darrenhoyt in 404 Error Pages: Reloaded

3. Communicate through emotions

Isn’t he sad…

Sudpende in 404 Error Pages: Reloaded

…however, Cat Content seems to be doing well…

Tyson in 404 Error Pages: Reloaded

…and Krystal gets no biscuit.

Krystal in 404 Error Pages: Reloaded

4. Communicate through irony

Maybe an idiot has passed you the wrong link or maybe a bigger idiot has linked in their site to a page that doesn’t exist. In both cases the big boss man has been sent an email informing him of this problem, so the person responsible can be tied to a tree and horsewhipped! Nice to know.

Alphomega in 404 Error Pages: Reloaded

Martin Yelland has some good explanations about what happened: strange little Web Gremlins or fluctuations of the Earth’s Magnetic field might have caused the error – however, a team of highly trained monkeys has been dispatched to deal with this situation.

Tadley in 404 Error Pages: Reloaded

Even although you’re a douche bag, you can use a search box to get to the page you’ve been looking for.

Expansion in 404 Error Pages: Reloaded

Apparently, this is a test of the emergency broadcast systems. You should remain calm, these kinds of things happen all the time. The “four oh four error” by Poropoptrt.com.

Pyropop in 404 Error Pages: Reloaded

5. While you are lost…

…you can read a comic…

Bioneural in 404 Error Pages: Reloaded

…or more comics (the image is changing after every reload)…

Afrison in 404 Error Pages: Reloaded

…get two cocktail recipes…

Cssleak in 404 Error Pages: Reloaded

…die…

F23 in 404 Error Pages: Reloaded

…don’t count to 404 (the site also provides a search box and a tag cloud)…

Porcupine in 404 Error Pages: Reloaded

6. Explain what happened.

Explanation in a well-designed visualization of what happened.

Nextwave in 404 Error Pages: Reloaded

Be aware when you’ve reached a buzzless page…

Printscreen in 404 Error Pages: Reloaded

Martinkorner in 404 Error Pages: Reloaded

7. Explain what can be done.

Psyked in 404 Error Pages: Reloaded

Foobr offers a detailed explanation on what can be done and what the “lost” visitor might be looking for.

Foobr in 404 Error Pages: Reloaded

Robgo in 404 Error Pages: Reloaded

3amproductions.net suggests pages the visitor might be looking for.

3am in 404 Error Pages: Reloaded

Renet-web.met offers recent posts and a search box.

Renet in 404 Error Pages: Reloaded

8. Unusual solutions.

Shocking visitors with colors – interesting, but not quite appealing…

Palmfly in 404 Error Pages: Reloaded

Blue Screen Of Death on the Web.

Galiacho in 404 Error Pages: Reloaded

Sorabji.com lists what people were looking for when they got the 404 Page Error. Interesting approach, however not recommendable – think of spambots.

Sorabij in 404 Error Pages: Reloaded

9. Be sincere.

Jeremy seems to be really sorry about the missing page…

Fuksa in 404 Error Pages: Reloaded

…so is Rainer…

Pernpaper in 404 Error Pages: Reloaded

10. Do whatever you want to do.

This is not a working example, since the site isn’t using the page as a working 404 error page. Nevertheless it’s quite funny: the characters are talking, and as you might suggest, they are talking about 404 errors!

Doodoo in 404 Error Pages: Reloaded

原文:http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值