This site uses cookies and other tracking technologies to assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide content from third parties. Cookie Policy

Accept Cookies

I agree to my data being stored and used to receive the newsletter. Privacy Policy.

The Anatomy of an Amazing 404 Page Design

Have you ever clicked on a link only to be confronted with an error page? Instead of seeing your favorite website, you have a blank page in front of you telling you that something’s gone wrong.

I’m obviously talking about the dreaded 404 page design. For website owners, you have two choices regarding this page. You can do nothing and let the viewer’s browser kick in and display a page of their own. Or, you can take things into your hands and get a custom 404 page designed – here are some nice examples.

Personally, I suggest you do the second of these two options. A custom 404 page can reflect well on your website. Believe it or not but a good page goes above and beyond displaying an error message for the user. In this piece, you’ll learn the anatomy of an amazing error page. I’ll provide all the tips to help you design a brilliant one in no time.

Focus On The Copy

The copy for your 404 page is extremely important. It sets the tone and should be reflective of your brand and website. For example, if you run a website that’s based on lighthearted humor, then a serious 404 page won’t make sense. It looks out of place, detached from your website.

Also, you have to think about the information you’re giving your viewers. I can’t tell you how many times I’ve seen an error page that tells me nothing. How are people supposed to know what went wrong if you don’t give them some help? What you should do is provide a short list of potential problems. To do this, you have to understand why most 404 errors occur.

Typically, errors happen for various reasons. This includes incorrectly typing in an address or following an expired link. Sometimes, the issue is deeper than that, and it can be a problem with the website’s server. My point is, you should tell viewers this information. Give them a list of possibilities so they can try and rectify the issue.

But, don’t bombard them with too much info. Just a few lines are all you need, not an essay! And, ensure you don’t blame the viewer for the error. It may seem trivial, but people get annoyed when accused of things. They’ll leave your site and never return again.

One great idea could be to provide visitors hitting a 404 error page with a small-scale magazine style section. You could even create them magazines to download by using this PDF magazine creator.

Link Back To Other Pages

Another important feature of a 404 page is the links you include. Along with the copy, you have to link back to other pages on your site. Remember how I said some errors are caused by mistyping or dead links? Well, if you provide a link back to your homepage, you help people resolve problems. If they click it, and your page loads up, they know it was one of the first two issues.

Some sites include this link in the copy they’ve written. Others will have a large button that people can click on and get redirected to the home page. The choice is up to you, go with whichever idea suits your site more.

Think About The Visuals

The text isn’t the only thing that needs to be on this web page. You also have to think about the visuals. The way your website is presented will have a bearing on the type of visuals you display.

Your branding is also vital. Make sure they are instantly aware about who you are. Your logo plays an important job here. I think of the logo on a 404 page a bit like walking or driving past a store you like the look of but don’t know what it’s called. The shop sign is also vital for passing trade of bricks and mortar stores.

For example, professional websites are likely to only include their logo. This keeps things looking authentic and maintains a professional edge. Then, more relaxed sites like to include cool or funny images. I believe Twitter has a cool little whale on their 404 page, while Google Chrome uses a dinosaur. It adds a lighthearted approach to things, and makes the error page less serious. But, it’s only suitable for certain websites.

Don’t Forget About The Search Box

The final thing every great 404 page has is a search box. It presents users with an opportunity to find other content on your site. Yes, a redirect link will partially do this too. But, it will only send them to your homepage. Of course, you could have a couple of other links too, but it won’t cover everything.

However, a search bar will! People can type whatever they want into it, and get sent to the relevant page. It’s great for users that followed incorrect links or typed the web address in wrong. They can get to where they need to be, without any fuss at all.

Consider this advice is you want to build an amazing 404 page. Believe me, it’s more important than you think to have good web design on this page. Don’t neglect it, spend some time creating a masterpiece.

Share:

Matt Janaway

I am a digital & online entrepreneur and marketer, specialising in the retail & eCommerce arena. I have built, purchased, optimised and sold in excess of 10 eCommerce businesses with multi-million pound revenues and I’m now heading a team project optimising 30 websites with over 20,000 products. I consider my methods, scientific and incredibly advanced.