Every website with more than a handful of pages will have a 404 error page. Users encounter them when they click a broken link, mistype a URL, or try to access content that's been moved or deleted. Most 404 pages are forgettable at best and damaging at worst � a dead end that sends visitors straight to the back button.
But a well-designed 404 page is a genuine opportunity. It can rescue a visitor who might otherwise leave, reinforce your brand personality, and guide users toward something useful. This guide covers how to design a 404 page that turns an error into an asset.
What Is a 404 Error?
A 404 error � formally "404 Not Found" in the HTTP protocol � tells the browser that the server understood the request but couldn't locate the content. From the visitor's perspective, they've arrived somewhere that doesn't exist.
The most common causes include:
- Deleted pages that still have inbound links
- URL structure changes after a site redesign
- Mistyped URLs in the browser
- Outdated links on other websites or in old emails
- Internal navigation links pointing to pages that no longer exist
You can't eliminate 404 errors entirely. But you can control what happens when a visitor encounters one.
Why Most 404 Pages Fail
The default 404 page on most content management systems is minimal to the point of uselessness: a heading that says "Page Not Found," maybe a line of explanatory text, and nothing else.
This fails on several levels:
It provides no path forward. The visitor knows something went wrong, but has no idea what to do next.
It communicates nothing about your brand. After all the work that's gone into your homepage, services pages, and blog, your 404 page is a blank white void.
It wastes the visit. Someone landed on your site for a reason. Even if the page they wanted is gone, they might still be interested in something you offer � if only you pointed them toward it.
The Elements of an Effective 404 Page
A Clear, Human Explanation
Avoid technical language. "404 error" means something to developers; it means very little to your average website visitor. A simple, friendly message is more reassuring.
Something like: "Hmm, we can't find that page. It might have moved, or the link could be out of date."
If your brand has personality � humorous, irreverent, warm � let that come through here. A well-written 404 message is a rare moment where a brand voice can shine in an unexpected place.
A Search Box
If the visitor was looking for something specific, a search box lets them try to find it through a different route. This is one of the most practical things you can add to a 404 page and one of the most commonly omitted.
Navigation or Popular Links
Give visitors somewhere to go. Options include:
- A button to return to the homepage
- Links to your most popular pages or blog posts
- Links to your main service areas
- A navigation menu if appropriate
The goal is to ensure visitors have a clear, low-effort way to continue engaging with your site rather than abandoning it.
Contact Option
If none of the links match what the visitor was looking for, give them the option to reach out directly. A "Can't find what you need? Get in touch." prompt with a link to your contact page can rescue a visit that would otherwise end in frustration.
Tone and Personality
The 404 page is an underrated canvas for brand personality. Because it's a moment of mild frustration, a little warmth or humour can diffuse that frustration and create a surprisingly positive impression.
Some approaches that work well:
Apologetic and helpful: "Sorry about that � this page doesn't exist anymore. Here's where to go instead."
Playful and on-brand: If your brand is warm and informal, a lighthearted message ("Whoops. This page has gone walkabout.") can reinforce your voice memorably.
Creative and visual: Some brands use their 404 pages as a showcase � an illustration, animation, or interactive element that demonstrates creative capability while acknowledging the error.
The key is that the approach matches your brand. A serious financial services firm and a creative design studio should have very different 404 pages. Consistency builds trust; jarring tonal shifts undermine it.
What Not to Include
- Technical jargon. "HTTP 404 error: resource not found" is unhelpful to most visitors.
- Blame or frustration. "You've followed a broken link." Even if technically accurate, this shifts responsibility in a way that feels unwelcoming.
- Autoplay media. Unexpected audio or video on an error page is especially jarring.
- An empty page with just a back button. This recovers nothing and gives visitors no reason to stay.
The SEO Angle
404 errors matter for SEO as well as user experience. If pages on your site return 404 status codes and have inbound links pointing to them, those links are effectively wasted.
Best practices:
Redirect deleted or moved pages. When you remove or rename a page, set up a 301 (permanent) redirect to the most relevant replacement. This preserves the SEO value of inbound links and ensures users who click old links end up somewhere useful.
Monitor your 404s. Google Search Console reports on 404 errors found by Googlebot. Review this regularly and redirect or fix the most significant errors.
Don't link internally to 404 pages. Check your site periodically for internal broken links using tools like Screaming Frog or Ahrefs. Fix them before Google finds them.
How to Customise Your 404 Page
WordPress: In the theme's template files, the 404.php file controls the 404 page. Most page builders (including Divi) allow you to design a 404 template within their interface, without touching code.
Shopify: The 404 page template is editable within the theme editor.
Custom sites: The 404 page is created as a standard page template and served when the server returns a 404 status � configured in your server settings or .htaccess file.
Whatever platform you're on, ensure the custom 404 page actually returns a 404 HTTP status code � not a 200 (success). Pages that display 404 content but return a 200 status are a soft 404, which can confuse search engines and dilute your SEO.
A Simple 404 Page Checklist
- Clear, friendly explanation (no technical jargon)
- Matches your site's brand, design, and tone
- Includes a search box
- Provides clear navigation options (homepage link, popular pages)
- Offers a contact route for visitors who can't find what they need
- Returns a genuine 404 HTTP status code
- Mobile-responsive
- Key broken pages have 301 redirects in place
Work With Elendil Studio
Every site Elendil Studio builds includes a thoughtfully designed 404 page � one that reflects the brand, guides visitors forward, and turns an error into a positive interaction.
Get in touch to talk about your website project.
Find out more about our web design services.