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.
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 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 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.Â
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. Â
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.Â
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.
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. Â
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.
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’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!Â
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?
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!Â
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.