How To Design a 404 Page That Keeps Visitors On Your Site

by Stephanie Hamilton

Last updated on February 27th, 2018

You shouldn’t understate its utility.  The 404 page is perhaps the most neglected web design element.

When your website visitors land on your 404 Page Not Found page, it can be everything from a major inconvenience to a pleasant surprise.

While this page has the sole function of telling the user where to go next, the creation of your 404 page should be approached from both a creative and functional point of view.

In this article I’ll present a few techniques to keep in mind when designing 404 pages of your own.

1. Explain the Issue

Ease the worry in the user’s mind by addressing the issue that landed them on this page. Simple errors may be a mistyped URL, slight variations in the URL, or even a recent site re-launch.

Gog’s 404 page alerts users the page doesn’t exist, and then encourages them to check their spelling and try again. If that fails, they also have the option of reporting an error. The simple design also stays true to the design of and allows for easy navigation through the menu and search bar at the top.

This 404 page gives the user a few valid reasons why the page doesn’t exist. This actual 404 page is integrated into the design of the site, placing no doubt in the user’s mind where they are. Doing so also allows the user easy access to other content on site and encourages them to stick around.

2. Speak in Plain Language

User’s are never happy to see a 404 page when they have a designated goal in mind – to reach a page as quickly as possible. You can ease this frustration by injecting a little personality and humor into your 404 page. Your page need not be a hodgepodge of technical terms.

This 404 page provides a humorous short animation upon landing on the page.  The text supports the playful feel of the animation, while directing the user to where they should go through a clear call to action. The link to the homepage is commonly used on 404 pages to entice the user to stay longer on the site and get to know the company.

The light-hearted text on this 404 page alludes to the imagery it supports. It also offer the user the option of visiting the homepage and contacting the site to address issues.

3. Provide Tools to Remedy the Situation

A professional graphic with some light-hearted text is sometimes enough to soothe your but your goal is to keep user’s on your site as long as possible.  Give them paths to follow to prevent them from leaving.  Some common tools to remedy the situation include:

  • Search bar: If the page has been moved, give the user the option of searching for where it’s been moved to by including a search bar on the page.
  • Contact Information: If the user has found a faulty link on your site you’re not aware of, you’ll want to know about it. Including contact information, or a form, easily allows them to send you a message. If using a form, you may want to ask them to tell you which page they came from and what link they followed.
  • Menu: Including a menu allows the user to take paths in reaching their designated spot. It’ll also help retain the design of the rest of your pages so it’s not a complete departure from your brand.
  • Link to Homepage: If they’ve arrived at your site from another website, providing a link to your homepage allows them to get familiar with what your site offers.

The 404 page for Mixx explains the issue succinctly while providing links that allow the user to move on, including a link to the homepage as well as a way to get in touch with them for further questions.

This personalized 404 page shows a hint of animation studio’s personality, while making it easy for the user to get back on track by providing a menu of links.

Providing a search bar allows the user to search for where the page has been moved. Providing a link to post archives also aides the user in finding what they’re looking for much faster.

4. Retain the Same Design

Your 404 page shouldn’t be an unfamiliar departure from the rest of your site. This page should retain the same branding as the rest of your pages by including the same fonts, colors, and style.

The 404 page for Carsonified retains the style and visual language of the rest of the site, yet is unique enough to stand on it’s own. The page is integrated into the existing design, which establishes a sense of familiarity while encouraging the user to explore.

This 404 page retains the visual style of the rest of the site while being unique in it’s own right. Some characteristics of well-designed 404 pages appear here, such as the use of plain language, explaining the issue, and proving tools to remedy the situation.

5. Fix Broken Links

The best way to prevent a user from landing on your 404 page is to constantly check for broken links within your site. Once a month is ideal for checking for missing articles, videos, pictures and so on so your viewers will come across a 404 page less and less.

Nobody wants to encounter a 404 page. But it happens.

When it does, equip your errant site visitor with a user-friendly page that communicates the issue effectively with your audience. Remember your goal is to retain visitors and give them incentive to stay; the combination of thoughtful design, along with useful resources that get them closer to their destination are key aspects that factor into a successful 404 page.

Have you found some unique 404 pages that aren’t listed above? Or tips to make a 404 page the best it can be? Please share with us!



Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    February 7, 2018 at 11:31 pm

    Some good 404 examples. Sometimes we see very bad 404 pages with bad text like “What are you doing here?”

  2. Mindy Guillette says:
    April 17, 2017 at 12:36 am

    Who would have thought of this? Nice article.

  3. December 19, 2014 at 3:33 am

    Thanks Neil. We were struggling to put up a 404 page and were thinking to redirect it to homepage. This article helped us to select one 🙂

    • December 19, 2014 at 9:56 am

      Glad you found it helpful. Stephanie nailed the issues that matter in a 404 page.

  4. September 28, 2014 at 8:29 am

    What a beatufiul article. I have never seen such excellent 404 pages before. And I am not saying jus tfor the sake of it. Nice efforts. Great output.

    • Neil Patel says:
      September 28, 2014 at 5:24 pm

      Abhijit, glad you liked it. Thanks for the feedback 🙂

  5. Thai says:
    June 13, 2014 at 1:16 am

    Woa, i very like the 404 page for Carsonified. So interesting!
    Thank for your article!!

    • Neil Patel says:
      June 13, 2014 at 6:08 pm

      Thai, glad we could help. Thanks for reading 🙂

  6. Tony says:
    June 2, 2014 at 3:27 pm

    Hi Stephanie,

    This is a great article on designing a 404 error page. I recently updated mine:

  7. asadalirano says:
    July 2, 2013 at 1:48 am

    Its really informative especially identfying the missing links will help your website to get better results…

  8. Nathan Smoyernatesmoyer says:
    April 1, 2012 at 12:48 am

    One of my personal favorite 404 pages –

    Thanks for writing this. Too many overlook this real estate on their website. It is, as you say, a great place to grab the visitor’s attention.

  9. Constantin Druc says:
    February 23, 2012 at 7:24 pm

    An useful plugin to solve no. 5 is Broken Link Checker. It will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

    Download link:

    • Russ Henneberry says:
      February 24, 2012 at 8:25 am

      @Constantin — Thanks for this!

  10. Mat Bennett says:
    February 17, 2012 at 1:09 pm

    An obvious point worth making is to log the 404s and the what page or term referred the user to it. That gives you the opportunity to fix the underlying cause, recover lost pagerank and keep everyone happy…

    … although it would mean less people seeing you cool 404 page

    • Russ Henneberry says:
      February 17, 2012 at 2:01 pm

      @Mat — Great point Mat and one definitely worth making. Thanks!

    • Tim Leighton-Boyce says:
      March 22, 2012 at 10:12 am

      Mat’s so right about being sure to track 404 pages. If you use Google Analytics to do this, for example, you can even set up Custom Intelligent Alerts to email you if the % of people hitting getting a 404 goes up suddenly. Then you can dive in to the GA reports to see if you can find the broken link and fix it.

      I’ve written a couple of posts on the subject. This one explains how to use the Alerts and it includes a link through to an earlier post on setting up the tracking itself:

  11. Sanj Sahayam says:
    February 10, 2012 at 8:30 pm

    Great Article! I love the “Ninja Stole this page” example. 🙂 We use a simple site map with a summary of what each page provides as a 404 page. We also give the user a chance to email us with what they were looking for, should they not find it.

    Another way to see if people are hitting pages that don’t exist is by using Google Analytics. Using analytics you know exactly which page(s) they were looking for by examining the addresses they were entering.

  12. Robin Cannon says:
    February 8, 2012 at 8:07 am

    Really enjoyed this piece.

    It’s very easy to assume that everyone knows what “404” means, but that’s probably not the case for a lot of web users, so making a friendly, plain English, and memorable 404 page can have a huge impact on keeping people on the site.

    I like 404 pages that, while they retain some consistency of branding with the rest of the site, are still noticeably different. They’re actually single pages where a designer can play around a little, making a frustrating experience into a fun one, while still making it easy to redirect users back to the main content.

    Oddly, one of my favorite 404 pages from a purely aesthetic point of view is actually not very helpful from a practical one. It looks great, brings a smile, but offers no assistance in getting back to the site content. A Ninja Stole This Page.

    • Russ Henneberry says:
      February 8, 2012 at 8:25 am

      @Robin Cannon — That’s awesome Robin! A Ninja Stole This Page!

    • damu says:
      January 7, 2014 at 10:48 pm

      awesome @robin! +1 for that 🙂

Show Me My Heatmap

I’m just @crazyegg’ing everything these days.

Kyle Mitchell


What makes people leave your website?