How to design 404 pages that will turn your users' frustration into delight

Profile picture of Nick Babich

{date}

{#hash1}

{#hash2}

Illustrations by {name}

10 ways you can design better, more human 404 pages—with examples.

8 min read

An illustration of the word "404" linked together with a chain over a black background.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

"404 page not found" is one message that website visitors are never supposed to see.


Yet, people do land on 404 pages from time to time and, unfortunately, can naturally become upset about that. That's because not all 404 pages are well-designed. Product teams typically dedicate a lot of attention to polishing active pages, while 404 pages are treated as an afterthought because they don't belong to a happy path, a scenario featuring no error conditions. However, how a 404 page is designed can significantly impact how users feel about a website. A page created with love can make a positive impression on your visitors and minimize the chances of leaving a website.


This article will discuss what a 404 page is, why customizing a 404 page can benefit website design, and offer ten practical tips on how to design a 404 page.


What is a 404 page?


First of all, what does 404 mean? From the technical perspective, 404 is an HTTP error message code that a web server sends to the client (your web browser) when the server cannot find what the user requested. In simple terms, a 404 page is an error page that web visitors see when they click on a broken link.


There are three main reasons why a link can be broken:


  • Content is no longer available for visitors. The company removed the content from the website, but the link is still available in Google search results.

  • Website content moderator or web developer added an incorrect link to the website. For example, a moderator mistyped the URL address or moved the page to a different URL but forgot to add a permanent redirect.

  • Website visitors mistyped the URL of the page. Typing is error-prone activity. It is especially true for mobile users since it's much easier to make a mistake when you enter data on a tiny screen of a mobile device.


What are the benefits of a 404 page?


In the perfect world, website visitors never see the 404 page. But in the real world, both website visitors and website moderators make mistakes, and it's nearly impossible to avoid showing the 404 page. Poorly designed 404 pages can fill visitors with frustration, while a well-designed 404 page can turn that moment of frustration into a moment of delight.



Here are just a few benefits that a good 404 page design can bring:


  • User experience benefits. A well-designed 404 page doesn't feel like a dead-end page; it's a page that helps visitors decide what they can do next. For example, it can offer a few high-level pages that a person can visit depending on their goal.

  • Visual benefits. Nice visual design can create a positive impression on your visitors. In fact, aesthetics-usability effect suggests that users are more tolerant of minor usability issues when they find an interface visually appealing.

  • Marketing benefits. Good design can strengthen your brand image. The best 404 pages guide visitors to the right decisions and become a huge conversion opportunity.

What's included in a 404 page?


Every web page is created from the foundational building blocks— header, body, and footer. To make the 404 page look consistent, you make the header and footer the same as on any other web page. For example, you should put the site's logo and top-level menu in the header. The footer should contain key navigation options. The body should feature content that is relevant to the 404 page.


Copy that reads “page not found” is the absolute bare minimum of what you can show on a 404 page. If your website contains a lot of content, you can also offer a search bar to help users find what they are looking for. For example, Apple uses a fairly standard design for its 404 page—the text section and search bar.


A screenshot of the webpage https://www.apple.com/404
Screenshot: https://www.apple.com/404

It's possible to make the page more visually appealing by adding an illustration or photo. Visuals can convey the main idea much faster than plain words. Ideally, text messages and illustrations should reinforce each other and help visitors understand what is happening. Lego’s 404 page is an excellent example of pairing great visuals with a fine copy.


A screenshot of the webpage: https://www.lego.com/en-us/404
Screenshot: https://www.lego.com/en-us/404

If you’re curious how to create a custom 404 page using Editor X, this guide covers the process, step by step.



How to design great 404 pages: Best practices with examples


So, how do you design a great 404 page? “Keep it simple” is by far the most important rule to remember when building a 404 page. Just because you want to create a custom 404 page doesn’t mean you have to create something completely innovative. The primary purpose of the 404 page is to give users a clear signal of where they are and what they can do next. That's why it's recommended to follow minimalist design principles when designing the page—less text and less visual details—to make it more effective for average users.


The secondary purpose of the 404 page is to prevent visitors from abandoning a website by engaging them in interaction. Depending on the nature of your website, is it possible to achieve the goal by adding functional or decorative elements to the page.


Here are ten tips you'll want to keep on hand to improve 404 page design: