"404 page not found" is one message website visitors are never supposed to see. Yet, people do land on 404 pages from time to time and, unfortunately, can be put off by your clients’ site as a result.
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're an empty state that doesn'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 design. 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? In simple terms, a 404 page is an error page that web visitors see when they click on a broken link. 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.
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 a perfect world, website visitors never see your 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 at some point along the user journey. 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 the main benefits that a well thought out 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.
How to design custom 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:
1. Don’t add too much content on the page
We know that people on the web don’t read, they scan. This rule applies to all web pages, including 404. Visitors aren’t supposed to read the text on 404 pages, they are supposed to glance at the page and understand what is happening. That's why you should avoid writing long passages of text. Instead, make every word count and get straight to the point. For example, Zhenya Rynzuk’s 404 page features only one sentence (404 error) and a single navigation option (bring me back) that leads to the homepage
2. Avoid generic 404 page messages
When it comes to writing an error message for 404 pages, it's not enough to write a clear and concise copy. You also need to ensure that the message has the right tone. Generic messages like "404: Page Not Found" sound cold and robotic and don't positively impact visitors' moods. It's better to use a more human-friendly tone such as "Oops! This page doesn't exist." Hugoware went even further with its 404 message—they say "404. Page was sucked into the vortex!" and…literally show how every page element goes into the vortex.
3. Maintain visual consistency
Visual consistency is an integral property of good design. The same visual language should apply to all product parts, including 404 pages. By doing that, you will create a familiar experience for your audience and help them easier navigate your website.
A 404 page should align perfectly with the rest of the site’s branding, both in terms of language and styling. You need to use the same visual attributes (colors, fonts, spacing) that you use on all other pages on your website. Notice how Mailchimp, the email automation service, maintains visual consistency on its 404 page. A call to action button that says “Mailchimp Home” has the same styling properties as “Sign Up Free” in the top right corner.
4. Make the page functional
The primary purpose of the 404 page is to guide the visitor on what they can do next, so it's essential to offer a next step (or steps). Depending on the nature of your website, you can offer one link (i.e., "Go to homepage"), a few links to key pages of your website (i.e., for a corporate website, you can add "Home," "Products" and "About Us") or even add a search bar (i.e., for an eCommerce website). On its 404 page, Airbnb offers a few key directions that represent main functionalities and areas of the website.
It's vital not to go overboard with offering too many options. Presenting too many choices makes the page less visually appealing and makes it harder for a visitor to decide what they want to do next. This phenomenon is known as analysis paralysis. Use your analytics data to understand what parts of your website are the most important to your visitors, choose the top important ones (as a rule of thumb, up to 5) and add them on this page.
5. Add relevant imagery
A picture is worth a thousand words. Using relevant imagery is a great way to communicate with your audience visually and demonstrate great attention to detail. Properly selected illustration, photo, or video can help you draw interest and create an emotional connection with your audience and encourages them to stay at your website. A music streaming service Spotify uses very relevant imagery on its 404 page. An illustration of a vinyl disk is an excellent visual metaphor that is clear to the music-loving audience of this service.
If you want to use imagery on your 404 page, you need to ensure that you select imagery that the majority of your visitors associate with your brand. It should be easier for visitors to decode the meaning. For example, if you sell automobiles, you can use imagery of a car on your 404 page.
6. Use generous whitespace
Since the 404 page doesn't feature a lot of content, it's possible to use whitespace to let content breathe. The more whitespace you add around an individual element, the more user attention it will receive. A very interesting example of using generous whitespace can be found on the CUSP 404 page. A simple black and white page features a pseudo-3D sphere in the center that rotates together with the mouse cursor's movement. Contrast and whitespace work in tandem to direct entire user attention to the key message.
It's vital to remember that the layout of your page should look equally good on any screen and resolution.
7. Utilize your brand attributes
Ask yourself, "Can I show what my company does visually?" If the answer is yes, congratulations—you should be able to find unique ways to express its 404 pages visually, too. Myriad Video, a creative agency specializing in video production, uses fairly common imagery that mimics the classic color bars that used to appear on old TVs. Most TV users are familiar with this signal and can easily understand the company's area of work (video production).
8. Introduce creative visual effects
Motion effects can make the page more dynamic and alive. Original animation can demonstrate your level of craftsmanship and surprise your visitors. Below you can see the 404 page from the personal website of Andrea Reni, a software developer. The animated element in the center of the page symbolizes the glitch. This glitch moves as you move your cursor, which creates lovely visual feedback for visitors.
9. Add a healthy dose of humor
Adding humor is the best way to connect with your audience on a personal level. A funny 404 page can make visitors chuckle and stay on your website longer. Humor can be anything—from a joke that you crack on the page to the fun game you invite visitors to participate in. A web creator from France, Romain Brasier, found a pretty unusual way to incorporate humor on the 404 page. Once visitors land on the 404 page, they are engaged in a fun game where they need to save lemmings that fall from the top of the screen. This smart design decision adds another layer of interest, and makes the website itself a bit more human and engaging–even when the user landed there by accident.
At the same time, being humorous is not an easy task. If you want to add humor to your website, ensure that your jokes resonate with your users. Visitors should not feel offended by your jokes. Learn more about your target audience and use this information to design jokes that work for them.
10. Add unexpected but useful functionality
Adding an unexpected but very useful feature on a 404 page can shift a moment of aggravation into a moment of delight. Dribbble, a social network platform for visual designers, uses the minimal layout for its 404 page that gives users essential information they need, but it also lets visitors generate HEX colors using a slider. It is a neat and beneficial feature for many people in the design industry.
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. [Related: Learn how to make the most of styled horizontal menus.]
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.
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.
Common mistakes to avoid with 404 pages
Now that you know the best practices, be sure to look out for these typical pitfalls designers encounter when creating 404 pages for their agency’s clients.
Don't lean too heavily on your 404 page. While you don’t want to treat it as an afterthought, you still want to make sure people don’t land on it too often. Don’t some to ‘show off’ your creativity with 404 pages, after all, users should only ever arrive here by accident.
Make sure you don’t have any links that point to deleted content somewhere on your clients’ websites. Running routine maintenance checks for any broken links can help your clients reduce how many 404 pages appear on their website.
Sometimes 404 pages pop up because your clients' users are making typos. Note the most common spelling mistakes they make and consider redirecting those wrong urls to the right page instead.
404 problems can also be caused by caching issues. Suggest clearing them within the 404 page’s copy to resolve the issue.
Turn failures into opportunities
Design is in the details. The more you polish individual design decisions, the better experience your users will have. The quality of error pages, including 404 pages, can say a lot about your attention to detail. Fine-crafted 404 page design is a prime indication that product creators genuinely care about their users and want to offer the best possible experience to them.
In the grand scheme of things, you want to think of 404 pages not just as a mistake to curtail, but an opportunity to redirect your clients’ users towards actions you want them to take. Get leads and prospects back on track with meaningful 404 pages that are memorable for all the right reasons.
.jpg)
