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.

High-Quality iPhone App Template Bundle – 92% off!

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.

Vector Mania! 4400 vectors – only $49!

The UMBC WebBase corpus is a dataset of high quality English paragraphs containing over three billion words derived from the Stanford WebBase project’s February 2007 Web crawl. Compressed, its size is about 13GB. We have found it useful for building statistical language models that characterize English text found on the Web.

The February 2007 Stanford WebBase crawl is one of their largest collections and contains 100 million web pages from more than 50,000 websites. The Stanford WebBase project did an excellent job in extracting textual content from HTML tags but there are still many instances of text duplications, truncated texts, non-English texts and strange characters.

We processed the collection to remove undesired sections and produce high quality English paragraphs. We detected paragraphs using heuristic rules and only retrained those whose length was at least two hundred characters. We eliminated non-English text by checking the first twenty words of a paragraph to see if they were valid English words. We used the percentage of punctuation characters in a paragraph as a simple check for typical text. We removed duplicate paragraphs using a hash table. The result is a corpus with approximately three billion words of good quality English.

The corpus is available as a 13G compressed tar file which is about 48G when uncompressed. It contains 408 files with paragraphs extracted from web pages, one to a line with blank lines between them. A second set of 408 files have the same paragraphs, but with the words tagged with their part of speech (e.g., The_DT Option_NN draws_VBZ on_IN modules_NNS from_IN all_PDT the_DT).

The dataset has been used in several projects. If you use the dataset, please refer to it by citing the following paper, which describes it and its use in a system that measures the semantic similarity of short text sequences.

Lushan Han, Abhay L. Kashyap, Tim Finin, James Mayfield and Johnathan Weese, UMBC EBIQUITY-CORE: Semantic Textual Similarity Systems, Proc. 2nd Joint Conference on Lexical and Computational Semantics, Association for Computational Linguistics, June 2013. (bibtex)

Download the corpus from here.