top of page

404 Error Page: How to Write and Design it.

Updated: May 1, 2023

404 error page… What did you just say to me!?

Will and Grace

More often than not, 404 pages are ignored and considered informative yet useless. That’s why whenever you come across one, you see these uninspired white pages with a big 404 error message strapped across the page.

Don’t make the mistake of letting a perfectly good opportunity to engage and build a relationship with your audience, go to waste. Get your creative juices going and brush up on your copywriting skills, they’ll both come in handy.

Let’s take it from the top.

A 404 error page has 2 jobs:

  1. Inform the user that what they’re searching for isn’t available. Include information referring to why the page they’re looking for isn’t there.

  1. Bring them back to where you want them by including links to relevant pages on your site. This is a perfect place to redirect them to the contact page or your service page. If you have an online shop, perhaps to your best sellers and add a message that says something like “You might have not found what you were looking for but here’s something most love to discover.”

If you’re using a CMS (content management system), such as WordPress, Joomla!, Drupal, or Magento, you can use plugins to automatically redirect visitors to another page when they arrive at a URL that doesn’t exist.

It’s also a great place to get creative with your audience and showcase your brand’s values or at least entertain them so they don’t just give up and move on.

Here’s what some big names out there did with their 404 pages.

Using humor and (subtly) throwing in a few links to other pages

Rolls Royce went for this strategy and started off their 404 page by adding “Here in spirit” over an image of the cosmos. Then they used play-on-words with a CTA that reads “May we drive you elsewhere?” and gently nudged the reader to other pages like their latest car or their corporate brand page where they showcase their values and vision.

Rolls Royce 404 error page

Again, Rolls Royce 404 error page

Also, yours truly used this strategy too:

My own 404 error page

Use the 404 error page to reinforce your brand’s tone of voice

Frank Body did a great job with this simple yet very on-brand statement: “Like a man undoing a bra clasp, something went wrong.” I don’t know about you but I actually laughed out loud.

Frank Body 404 error page

Add a clear call to action

Instead of peppering in a few links, you could add a clear call to action at the top of your 404 page that redirects to a certain page you think your audience will want to see.

Here’s what Marie Kondo did with her 404 page.

Marie Kondo 404 error page

Or technological consulting company PlektonLabs did with theirs:

PlektonLabs 404 error page

Include an image or video

A good 404 error page should include an image or video to make it more visually appealing. This helps users navigate through your website faster and makes them feel more comfortable with the design.

Here’s what productivity and task management tool, Evernote, did with theirs:

Evernote 404 error page

Or Pixar for that matter:

Pixar 404 error page

Your 404 error page is a great place to get creative and use certain copywriting techniques to keep your users engaged and get them closer to becoming a client. Add some humor or whichever emotion your brand identifies with, an image or video, and a CTA or a link, and you’re off to a great start.

But that’s just me… thinking out loud.


bottom of page