404 Page Design: Turn Dead Ends Into Helpful Detours

Every website eventually sends someone to a page that does not exist. A mistyped address, a deleted product, an old link in a newsletter: the visitor lands on a dead end and has to decide whether to stay. A thoughtful 404 page design gives them a reason to.

This guide covers the practical side: what the page must say, what it should offer, what to avoid, and how to reduce the number of people who see it in the first place.

What a 404 page actually is

A 404 is the standard response a server gives when it cannot find the requested address. The visitor sees whatever page you have designed for that situation. If you have designed nothing, they see a plain browser or server message with no branding and no way forward.

It is worth separating two ideas:

• The visitor experience: what people see and can do on the page.
• The technical response: the server must still report that the page was not found. If it reports success while showing an error message, search engines can treat error pages as real content, which creates a mess.

Ask whoever manages your hosting or site platform to confirm that missing addresses return a genuine not-found response while displaying your custom page.

Write the message in a human voice

The first job is to tell the visitor, quickly and plainly, what happened.

1. Say the page was not found. Avoid jargon such as error codes as the only message.
2. Take a little responsibility. "We can't find that page" feels better than a message implying the visitor made a mistake.
3. Offer a next step in the same breath.

Compare these two hypothetical openings for a small online bookshop:

• "Error 404. Resource not located."
• "That page seems to have wandered off. Try a search below, or head back to our bestsellers."

The second keeps the brand voice and points somewhere useful. Humour can work if it suits the brand, but keep it light. Someone who arrived urgently looking for a delivery address will not enjoy a long joke. If you need help setting a consistent tone, the brand voice guide is a good starting point.

Include the right elements

A strong 404 page is short and useful. Aim for these elements in roughly this order:

• A clear headline saying the page could not be found.
• One or two sentences explaining that the link may be broken or the page moved.
• A search box, if your site has more than a few pages.
• Links to your most important pages, such as the homepage, services, products, blog and contact page.
• A way to report the problem, if you want to hear about broken links.

Keep the standard site header and footer. They keep the page feeling like part of your site and give visitors the navigation they already know. A page stripped of the menu is a true dead end.

Smart suggestions

If your platform allows it, suggest likely matches based on the address typed. A visitor who requested a slightly misspelled address can be offered the correct page. Even without that, listing popular pages or recent posts gives people somewhere to go.

Match the design to your brand

The 404 page is part of your brand, not an afterthought. Use the same fonts, colours and tone as the rest of the site, and keep the layout simple.

• Keep illustrations light so the page loads quickly even on slow connections.
• Make sure text has good contrast and the buttons are easy to tap.
• Do not rely on animation to carry meaning, and avoid anything that autoplays with sound.
• Use the same call-to-action styling you use elsewhere, so the main button is obvious.

A custom illustration or a small piece of brand character can be memorable, but only if the practical content is still clear. Design principles from graphic design principles for marketers apply here just as anywhere: hierarchy, spacing and one clear focal point.

Think about different visitors

People reach a 404 page in different states of mind, and a good page works for all of them.

• The mistyper wants the correct address. Offer search and suggestions.
• The follower of an old link wants the content that used to exist. Redirect where you can, or link to the closest replacement.
• The browser is exploring. Show popular sections to keep them moving.
• The customer in a hurry wants contact details. Put a visible contact link on the page.

For an online shop, consider linking to categories rather than only the homepage. For a service business, a prominent contact or booking link may be the best exit.

Handle special cases

Not every missing page is the same, and a few situations deserve their own treatment.

• Products that are gone for good. Explain that the item is no longer sold and link to the nearest category or a similar product, rather than leaving a generic error.
• Seasonal or expired offers. Point to the current offers page so the visitor from an old email still finds something relevant.
• Members-only or private pages. These should explain that a login is needed, which is different from a page that does not exist.
• Deleted blog posts. If the topic still matters, redirect to the updated article. If it does not, let the error page do its work.

Deciding these in advance saves you from making case-by-case guesses each time content is removed.

Do not make these mistakes

• Redirecting every missing address to the homepage. It confuses visitors, who wonder why they landed somewhere unexpected, and it can look like a soft error to search engines. Redirect to the closest relevant page only when one genuinely exists.
• Hiding the page behind a login or blank screen.
• Blaming the visitor.
• Using only a code and no explanation.
• Forgetting mobile. Check how the page looks on a small screen.
• Making the page too clever. A game or elaborate animation may delight some people and frustrate those who simply wanted their page.

Reduce how often people see it

The best 404 page is one few people need. Dig into why visitors are hitting it.

1. Review your search tools. Google Search Console reports pages that returned not-found errors. The Google Search Console basics guide explains where to look.
2. Check analytics for views of your 404 page and which addresses triggered them.
3. Fix internal links pointing to removed pages. These are entirely in your control.
4. Contact the owners of external links to important pages, or set up a redirect from the old address to the new one.
5. Use redirects when you move or delete content. If a page has a close replacement, send visitors there. The 301 vs 302 redirects guide explains which type to choose.

Redirect planning is also a core part of any website redesign checklist, because redesigns are one of the biggest sources of broken addresses.

Set up a regular check

Add a short broken link check to your routine maintenance. The website maintenance checklist includes it alongside updates and backups. A quarterly review is plenty for most small sites.

Measure whether the page helps

Treat the 404 page like any other page. In analytics, look at what visitors click after landing there. If most people leave immediately, your suggestions may not match what they need. If many use the search box, consider whether those searches reveal content you should create or pages you should restore.

You can also track how often the page appears over time. A sudden rise usually signals a recent change that broke links, such as a menu update, a plugin change or a migration.

A simple build checklist

Use this list when creating or reviewing your page:

1. The page returns a real not-found response.
2. The headline says plainly that the page could not be found.
3. The tone matches your brand.
4. A search box and key links are present.
5. The normal header and footer are visible.
6. The page works on a phone and with a keyboard.
7. It loads quickly and uses no heavy media.
8. You review the list of broken addresses regularly.

Takeaway

A 404 page is a small piece of design with a real job: stop a lost visitor from leaving. Say clearly what happened, keep your navigation, offer search and useful links, match your brand voice, and avoid the lazy homepage redirect. Then work on the cause by fixing broken links and redirecting moved content.

If you would like help creating a custom error page or auditing broken links on your site, get in touch and describe your setup.