We’ve all experienced it more than we’d like. That feeling when you click on a link in anticipation of opening a new web page that did enough on face value to grab your attention, only to be hit with the dreaded 404 error.
Page. Not. Found.
Oh dear, oh dear. If you’re the user you are immediately frustrated or disappointed. If you’re the website owner, the moment you find out that you have a broken link or page is always one mixed with embarrassment and confusion -- “but it worked yesterday!”
However, amongst the disruption, there are often a few hidden gems when it comes to 404 error pages. Rather than following the sheep, some websites have taken the time to turn their 404 pages into an excuse to use a surge of fun or additional information -- pretty smart if you ask me!
Those custom error pages serve as the perfect inspiration for other designers. Of course, the best case scenario is an immaculate website design that works impeccably each and every time. However, things happen, themes go awry, web servers malfunction and pages break. Thus, a custom on-brand message on your site to lessen the blow and keep your visitors coming back for more after a snafu is imperative.
After scrolling through the internet in search of errors (as weird as that sounds), there are a few 404 pages that stand out from the others. A few of these are arguably better than the actual websites (although I’m not sure if that’s intentional…).
The 10 Best 404 Error Page Designs
1. The Mapped-Out 404 Error Page Design: BluePath
BluePath works with their clients to “create and implement automated analytics strategies” which help move users away from spreadsheets. While that awesome in itself, they’ve also kindly taken the time to put together this quirky 404 error page.
The page actually shows a map (which you are not on thanks to your stupidity of navigating “off the map”). The copy on the page also says:
“This [map] shows all the reported crimes in Atlanta over the past couple years. Why? Because it’s a crime you haven’t hired us yet!”
Well played, BluePath. Well played.
2. The Snarky 404 Page Error Design: The Australian
Australia’s leading national news brand The Australian boasts a range of national and global news and business coverage. However, just like the rest of us, they’re vulnerable to the occasional error. In this case their 404 error page.
But rather than submit to the classic “page not found,” The Australian has opted to use the page as a chance to have a sly dig at several Aussie politicians (Donald Trump and a lump of coal also make the list, strangely). Each politician has a quote associated with them and their thoughts on the broken link.
3. The Top Gamified 404 Error Page Design: Kualo
Ok. This is might just be the best 404 error page in the history of the internet. Kualo decided to turn their home for broken links into a game of Space Invaders for users to play. I don’t really need to say anymore!
What’s better? If you destroy 1,000 invaders you get a discount on their hosting. All around, this is truly an amazing design and it took me an extra hour to write this article purely because of this page. Hats off to Kualo.
P.S. Can you beat my high score?
4. The Quirky 404 Error Page Design: The Useless Web Index
The useless web index -- with their highly appropriate name - decided to give us the much-loved meerkat in their 404 error page design. The longer you spend on the page the more meerkats that arrive, so much so that after about 10 seconds there are at least eight of them on the screen.
You almost feel bad for the meerkats who are clearly struggling to find your web page!
5. The Illustrated 404 Error Page Design: Lego
If you’re a Lego fan you’ll enjoy their 404 error page design. As some companies have already highlighted, the 404 page is actually a great excuse to use an erroneous page to reassert your brand or product to visitors.
In the case of Lego, the ‘cable’ that connected the link you clicked to the web page is broken, and some poor chap has stumbled across it to his horror!
6. The Punny 404 Error Page Design: Blue Daniel
As part of his portfolio, Daniel Karcher chose to use the 404 error page to showcase his skills even further. He opted for a subway setting, with billboard advertisements using puns and a play on words for a humorous twist.
In his error message, you’ll notice references to the movie “The Missing” and the TV show “Lost.” The latter has graffiti overlayed to ask users the question “are you LOST?”
7. The Adventurous 404 Error Page Design: Emirates
As mentioned at the start of the article, some companies use a combination of humor and useful information to create a 404 error page that feels more like part of the actual website than a broken section or link.
Emirates are a prime example, who couple an ironic joke with links to their most commonly visited pages. They say, “Sorry, We’ve traveled the globe, but we can’t seem to find this page.” Suggesting that since they’ve been everywhere, the page you’re looking for almost certainly doesn’t exist - d’oh!
8. The Best Minimal 404 Error Page Design: CSS Tricks
It’s probably quite embarrassing for a web development or coding website to have a 404 error. I mean, it is their job to ensure these things don’t happen after all - isn’t it?
Regardless, the team over at CSS Tricks managed to turn a potentially embarrassing mistake into a nicely designed 404 page. The center of the page is styled like a ripped sheet of paper, behind which sits the code that should have made up the page you’re trying to visit.
9. The Self-Deprecating 404 Error Page Design: Cloud Sigma
I can relate to what Cloud Sigma have done with their 404 error page. I always say, if in doubt, just use pictures of dogs or cats to ease potentially bad situations. In this case, the site features a picture of a cat (sorry, their junior developer) attempting to use a computer is well timed. You can’t help but laugh!
But most importantly, the Cloud Sigma site error also offer you a clear method of escape back to their homepage.
10. The Unconventional 404 Error Page Design: LimpFish
Lastly, Limpfish used a quirky version of a 404 error page to once again bring a smile to every user's face. Granted, I was a little confused when I first saw this as it seems to be a combination of a dating ad and a genuine tech-related request… I’m not sure which is more apparent.
However, the newspaper effect adds a little irony, considering we are operating on the internet.
Each site's 404 error page design takes the mishap and transforms it into an opportunity to further build brand loyalty. Through creativity, stellar design and a bit of sharp wit, your website design won't have to worry about errors either -- it will all just be an extension of the company.
Share your favorite 404 error page designs in the comments below!
Want more inspirational designs?