Navigation

15 really creative 404 pages

By Kendra Gaines | Inspiration, Web Design, Web Development | May 2, 2013

We’ve talked about ‘Contact’ pages. We’ve talked about the ‘About’ page. You know what to put on these pages because, hopefully, you’ve thought long and hard about it. And you know exactly what to put on the inside pages, because you have your content for those as well. You think you’ve got it all covered, right?

Think again! You have the opportunity to design and make use of your 404 error page. And quite frankly, you’re not a cool kid if you don’t have a super cool 404 page. Why do we go above and beyond for these basic error pages? Well, because we can. It’s like a little hidden world that you often hope no one will see. But if they do get a chance to see it, you’ll want to make sure it’s a looker.

There are two options when talking about designing 404 pages. Since it is technically a page reached in error, you can make your 404 completely functional so it helps return your viewers to relevant content. The second option (which many seem to fancy), is to make your 404 page your own little creative space. It can be an awesome illustration or picture or it’s own page to which people will be desperate to return.

There are many ways to go about each and today, we are going to take a look at a few. Let’s jump right in.

 

Gig Masters

We will start off with a very practical 404 page. Here, when we stumble upon this error, we are quite aware that we’ve gotten here on accident. The page offers a link for you to return to the homepage or you could complete a search and get the results. It’s very straight-forward and fits into the visual branding of the site.

 

Qype

Qype have created another rather practical use of their 404 page by allowing you to return home or search all the categories the site has. They also offer answers to questions you may have as well. In addition to the practical use, they did add a bit of flair by creating a very beautiful, high quality illustration that refers to their brand’s use. 

 

Klapp

Klapp has created a very interesting use for their 404 page. They’ve created an entire game you can play while you determine what you want to do next. It’s a very fun game. It’s actually very addictive. But when the game is over, the game is over and you’re forced to get back on track. Or try to get lost again. 

 

Audiko

Again, this brand has decided they want to couple the most obvious use of returning the viewer to the correct page with creating an amazing illustration for you to view. The difference here is Audiko has created such a focus with this illustration that all you want to do is marvel at it and find your way back later. 

 

The Movie Nerd

The Movie Nerd has used a clever little iteration of their logo to characterize their 404 page. That’s extremely smart and consistent branding. Because of the very visible navigational bar up top, they didn’t see the need to make sure the viewer needed to be redirected.  

 

Inriality

Here’s another use of illustrations in 404 pages. While I’m unsure of what it says (due to the language barrier), I can assume it says something to the effect of ‘Click here to return to Inriality.’ Obviously, when you click the picture of the illustration, you’re redirected to the homepage. 

 

Davidwashere

What I like about this 404 page is it’s simplicity. Not only that, but while it’s straightforward, the brand has decided to let a bit of their personality come out with some of the instructions. It’s a very easy way to approach the 404 page.

 

Illucolor

This is another very clever graphic. It seems as if your Internet is broken and you need to get it fixed. Again, I’ll have to assume the graphic says to click somewhere to refer to the home page, but again it’s another attempt at a semi-practical, yet highly visual 404 page. 

 

I love Icons

This 404 page doesn’t have much to do with anything. In fact, if you stumbled upon this page you’d probably be extremely lost. However, that does not change the fact that in it’s simplicity, this is just a beautiful image. And the faint “404″ is a nice touch.  

 

Bellstrike

Another simply beautiful 404 page. The illustration is exceptionally consistent with the visual image throughout the web site. This 404 page lets you know you’ve stumbled upon the wrong page, but you’re still on the right site, which is extremely important.

 

Molome

Well, this 404 page is just plain cute. Molome obviously wanted a chance to show their graphic skills and weren’t too worried about directing the viewer back home. That’s fine though, because again, the navigation is very visible. The 404 page is an extension of the brand. 

 

The Many Faces Of…

 We sometimes like to crowd the Internet with parody sites and sites used to poke fun at (or honor) certain people. The Many Faces of Leonardo DiCaprio seems to do one of those, creating little meme faces from Leo himself. for the 404 page, why not keep it the same? This is a very fun approach to 404 pages.

 

Focus Lab

Focus Lab’s approach to the 404 page is pretty simple and straight-forward as well. I like this one because, again, you get to see the 404 copy in the brands voice. However, this time, instead of directing the viewer to the homepage, Focus Lab directs the viewer to some of the most important pages in the web site.

 

Mic Check 404

While this is just a concept, this is indeed a very clever concept. I mean, what else do you do when you’re trying to make sure something’s right? You test it! 

 

Kiss.com

Another concept, Kiss.com takes a completely different approach to the content on the 404 page. Instead of directing people to the homepage or other pages, we’re doing something different here. They ask you to submit a support ticket so they can fix the problem, which makes sense. Because after all, it is an error page, right?

 

Dribbble 404

This is another concept a designer on Dribbble created. They became so close to the brand, they developed a 404 page for them. Now, this is just extremely clever because of the branding of Dribbble as well as the copy on the page. Dribbble should see this and implement it. Immediately! 

 

Conclusion

404 pages don’t have to be these bland pages controlled by the web and different browsers. You can take control of yours today. You may want to go simple or you may decide to be completely extravagant in your approach. But remember the 404 page should always be a solid representation of you and your work. 

Have you worked on a 404 page design lately? Have any favorites? Let us know in the comments.

Share this post
Comments (no login required)
  • Jerry Low

    Great collection! I never get bored of list posts like this.

    • nk

      I do.
      Bored.

  • Igor

    One of the best is by Blizzard Entertainment. I haven’t seen anything like that one http://us.blizzard.com/en-us/error.html though these are creative too.

  • Filipe Carvalho

    check coolappse.com 404 page.

  • http://twitter.com/rob_hope Rob Hope

    Great collection Kenra! I’m going to give a shout out to http://mmminimal.com/404 with a unique 404 with background video. Warning, do not view if scared of the sea;)

  • http://twitter.com/nanomagmag Magalie MARION

    for Inriality, it says that you have moved to the other side of the screen, a reference to Alice in Wonderland :) On my old site, I put a “don’t worry ! be happy !” word art and my fave chocolate cake recipe, the goal was to have a useful 404 :D

  • MG

    great post! quick fix: klapp links to qype.

  • Alen J.

    Here’s our own contribution: http://www.davaware.com/test404

  • http://www.blackbookoperations.com/ Black Book Operations

    couple of nice ones

  • http://twitter.com/emzoneproducts emzone

    We just had ours done this past week: http://emzone.ca/404

  • http://ten1seven.com/ Jeremy

    I had fun building the 404 page for Time Life (http://timelife.com/four-oh-four). We even spent time working out the correct rotation speed.

  • http://nodws.com/ Nodws

    whoops!

    Comment not found.

  • Alan Horwell
  • http://www.facebook.com/kaups Kaupo Kalda
  • http://twitter.com/camweb Adam Lord

    Here is our 404 page, we tried to keep it humorous and light hearted. http://www.cambridgewebsolutions.co.uk/404

    • http://www.weboutsourcing-gateway.com/ Web Outsourcing Gateway

      Nice 404 page there @twitter-96153232:disqus.

      “We spend many hours and a lot of effort to try to eliminate all broken
      links. Despite this, within minutes of arriving on our website, you
      have tracked one down.” Excellent idea.

  • http://jivaldi.com Marketing Gal

    These are great !! I love Dribbble’s. Such a great opportunity to get creative and quirky.

  • http://mikemai.net/ Mike Mai

    I have one, too. :P

    http://mikemai.net/404

  • Rohit Sharma

    very cool :)

  • http://www.facebook.com/MDuhh Michael David Noble Pascual

    Klapp’s image link is the same as the one above it

  • http://twitter.com/AliGhobadi Ali Ghobadi

    Awesome selection. We just revamped ours, hope you like it :) http://www.charlesclinkard.co.uk/errors/error_404

  • Kiavor

    And this? :) http://urli.st/afaf

  • CoolApps(e)

    Hi rmwebs!

    Thanks for noticing that error! The correction was made ​​:)

    Check: coolappse.com/anything/ (the problem was in the “/”)

    Kind Regards! Thanks a lot!

    CoolApps(e).

  • Tim Dugan
  • Tony Cregan

    Just a little something I knocked up, some of the examples given are outstanding.

    http://www.tdcbitworks.co.uk/404/index.php

  • Osamah Qashou

    http://iloveicons.ru/404
    This one is breath taking!!

  • Ryan Sullivan

    http://uppababy.com/404.php
    Just finished this today for a stroller company

  • lmazorra

    Here my 404 error page: http://webxtrap.com/error

  • Kent

    This was our simple twist.
    http://www.jobberswarehouse.com/404

  • http://www.emailcenteruk.com/ Craig Loynes

    I made this one for Emailcenter. Pick which developer to fire for letting the side down! http://www.emailcenteruk.com/404

    • http://www.beautifulonlinepresence.com/ Marinda Jansen van Rensburg

      Haha, that’s so cool!

  • Filip Pižl
  • ANGELICA VELEZ

    What do you say about this 404 http://www.thedailybell.com/this-url-whatever/

  • Yangki Imade Suara

    I also create this one for IRSA Indonesia at http://www.irsa-indonesia.org/index.php/error-404

  • GreekGeek
  • http://jkstories.com/ Jake Kaufman

    This is a great collection! I came across another interesting idea: 404 pages that save children from poverty: http://404gotten.org/

  • http://www.manausa.com/open-house-visitors/ Joe Manausa, MBA

    Great group of 404s. I am trying video on mine, and I’ve been getting good feedback on it … wish it had made this list! http://manausa.com/four-o-four/

  • Pantelis Gkavos

    Here’s a nice retro one: http://www.entec.biz/consultants/404

  • http://www.bonstutoriais.com.br/ Victor Brito

    There is my contribution to inspire http://criativito.com.br/404

  • Kathryn

    This is awesome! It’s always adds to the disappointment when you get to a 404 page and its SO dull and boring. I think these counteract the let down. Maybe our website will add a spunky 404 page – just for fun.

  • http://TinkerTry.com/about Paul Braren

    Disqus (the company that’s behind this commenting system)
    has some video fun with their 404 errors (animated gif backgrounds):
    http://youtu.be/oeztng-X0CE

  • Daniel Kreeft

    The Inriality comment:

    You have ended up on the other side of the screen
    Click here to go back

  • http://www.grandcrayon.ca Sam Melamed

    How about this office supply site: http://www.grandcrayon.ca/custom404/ ?