a-404-page-–-best-practices-and-design-inspiration

Jelisaveta Sapardic

If you aren’t already familiar with the term, a 404 error page is a page that has a job of notifying the user that the link they’ve tried to access is broken or does not exist. Needless to say, getting a 404 error page result is irritating for every user that experiences it.

To make this occurrence a bit more bearable to users, many web page designers have taken it upon themselves to customize their 404 error page so that it appears more “fun” and unique. They usually do this by incorporating humor, wit and a design that contains creative originality into their page.

If you also have a plan to design your own 404 page in this way, then looking at some examples of already made custom 404 pages may serve as a nice inspiration for you. Thus, we’ve decided to share a list of witty and unique 404 error page examples that may help you during your creation.

How a 404 error page should look like

First, we’ll mention some characteristics that, in our opinion, a custom 404 error page should have. Some of these strategies have actually been applied by many influential websites.

1. It should match with the overall style of your web website

If you ask us, this should be a no-brainer. There are so many WordPress themes that are specifically made to fit the vibe of a certain business type or the nature of services or product that the site is promoting. Therefore, it’s only natural that you should adjust your 404 page design to both your website template and the overall theme of your website. For example, if you’re a restaurant website that specializes in fine dining, it would be good to incorporate a picture of a fancy-looking meal, as well as its name into your 404 error page. In this way, your visitors at least won’t forget that you serve good food, despite the inconvenience they’ve run into at the current moment.

2. It should contain some form of apology

Having a 404 error page pop up is not only annoying, it is also something that shouldn’t have happened in the first place. That’s why it’s always a good idea to include some sort of apology into your error page, where you emphasize that you are really sorry for the user’s trouble in some way.

3. A 404 error page should include a search bar

This can also be a good practice. If you add a search bar to your 404 error page, it can make users stay on your website in order to keep exploring.

4. Consider adding a link

Just like a search bar, a useful link can do more good than harm. This can be any link that you deem important, such as your blog, contact page, or even your homepage.

5. Lighten it up with humor

We already mentioned humor earlier. Be it witty, self-defeating, or just plain weird, using humor in situations like these can really go a long way in lightening up the mood or your visitor. Who knows, your relaxed and comedic approach may even end up with them having a more positive impression of your brand overall.

In short, if you have a good idea for a witty line that can go on your 404 error page, don’t hesitate to add it, as humoresque attitude is welcomed by many. And even if your visitors don’t find it funny, it’s always better to keep things lighthearted than to be machine-like about it.

You can also set a redirect to your 404 error page. For example, if an error occurs, your page can just get redirected to your homepage. This, however, isn’t the best solution, because if there is something wrong with your homepage, you’re back to square one.

Our error 404 page inspiration picks

Now that you know what elements can make a good 404 error page, we will also provide you with some examples of error 404 pages that have caught our eye with their sense of humor and the overall impact of their design.

Pixar

Hopefully, the way this 404 error page looks like does not portray how you will react when you run into this problem. Pixar has decided to add a character called Sadness from a popular 2015 picture Inside Out, with a message that advises you not to take things like these too personally. We couldn’t agree more.

Mailchimp

After launching a new brand identity and design, Mailchimp has also changed the look of their error page. The website that specializes in email newsletter services has decided to include an unconventional image of a donkey whose head is buried deep into a hole, indicating that it has searched every crevice of the site and there’s simply no page to be found. Well, it is evident that the donkey really tried its absolute best to find that page for you, so there’s really no point to get too frustrated about it.

Afotografy

This professional photography-based website specializes in capturing portraits of newborn babies, weddings, and other family-related events. So it’s only fitting that they’ve decided to include a picture of a smudged toddler throwing a tantrum in their 404 page. Even though it’s evident from the picture that the child has ended up eating a cake, the text subtly suggests that the page you were looking for has been eaten as well. But how can you get angry at a crying child? It was just curious and ended gobbling up your page by an accident!

Batman

Being Batman’s most notorious nemesis, the Joker is known for his pranks that only he is amused by since they are more often than not bordering on morbid. This German Batman-based blog that features 3D images of the DC hero captures the creepy atmosphere that maybe isn’t too humorous, but still allows users to stay immersed in the world of the comic book vigilante.

What makes it even eerier is the fact that Batman’ flashlight moves as you drag your mouse pointer over the screen, giving the picture a 3D effect. Plus, a modern-day Joker making exactly a print like this on the wall isn’t that hard to envision.

Blizzard

Blizzard Entertainment’s 404 page design has a twist to it. Aside from a broken window and a distorted menu (that still works, by the way), there is a message that blames the user for the error. They were a bit daring in their approach because this is definitely a change from the usual apologetic messages that tend to pop up on error pages. However, it is still unique and refreshing, so it’s bound to get at least some people amused by this unexpected turn of tables.

Angry-Birds

Seeing an Angry Birds’ antagonist completely defeated on the screen of this game’s official website just because the page cannot be found could actually have a comforting effect on a person who views it. After all, it’s none other than a Bad Piggy that can relate to your misfortune.

Flywheel

Flywheel is a company specialized in helping developers and designers build WordPress websites. Their 404 page is simplistic in nature but comprises of a few engaging web design elements. There is a “this really sucks!” message that is actually a clever pun, considering that a number zero is actually an animated black hole that has sucked in what appears to be a laptop with a broken page.

Distilled

British humor is often characterized by not taking itself too seriously. The company owners themselves are British, so in this situation, they’re actually taking a jab at themselves. They’ve done so by drawing two posh characters who are deeply immersed in their conversation about a page not working. All the while they’re giving advice to the user about what they should do next by using British phrases that sound downright comical in this context.

Personally, we lost it when they called the page a ‘Four-Hundred and fourth message of error’ and when they commented that ‘their web-butler will fix their mistake in a doddle’.

Slack

Slack is a collaborative platform that helps businesses and companies work together and move forward. But if you land on their 404 page, consider yourself truly lost. Their error page features a pretty animation that also moves if you drag your mouse pointer across the screen. Even though it’s visually engaging, this is an example of a page that has no correlation to the website’s content whatsoever but still does its job well.

eHarmony

There is only so much a dating site can do in order to make the nature of their services relate to their error page. However, eHarmony succeeds in doing so by stressing that even though the page is unavailable, there are half a million singles that are. Talk about connecting the incompatible!

Looking at the already-existing 404 error pages may be fun, but making one can be a whole different story altogether. It requires wit, creativity and a bit of open-mindedness as well in order to work. Nonetheless, we hope some of our suggestions will at least help you get a good head-start.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!