How to Design Your Website’s 404 Page (Part 1)

What’s a 404 page in the first place? For those who don’t know, a 404 page appears when someone clicks a faulty link. It’s a typical response to a defunct page. Not a lot of websites personalize the given error message on the 404 page. Usually, the page will just let you know that the link you clicked is “broken” or say that “page not found.” These days, web designers venture out and experiment on the 404 page.

Man Holding a Map.

Man Holding a Map.

In this post, I will give you tips on what to add on your 404 page. I will give you unique ideas on how to present your error message in a helpful and creative way. After all,  the page isn’t all fluff. It should offer assistance to the web visitors who have lost their way.

  • Lessen the impact of the error.

  • When your web visitors see an error, they already disappointed. What you can do is to lessen their frustration. Grab this opportunity to pacify the atmosphere. Remind them that you are doing your best to resolve the issue.
  • A generic promt would not help appease the situation. It will only give a very cold and uncaring impression. Ultimately, it will make your web visitors more disappointed. and abandon the page.
    • What to do to lighten things up?
    • Be like a friend!

    • Number 1 tip is to be friend. Draft a 404 page using a friendly tone. Design the page with a welcoming and amiable atmosphere. Remind them to check their link. Say something like, “Hi there, I’m sorry that you’ve stumbled upon this page. Perhaps, you clicked an incorrect or outdated link. Kindly check the link again.”
    • You can even tell a joke.

    • People feel bad upon seeing an error, but you can always lighten up the situation by adding puns, or sharing a corny joke. Add something funny to ease the disappointment. For example, “Oh no! The link is broken like all the broken hearts out there! Will fix this before Valentine’s Day!”Below that, you can add more options for them to click.
    • Be bold.

    • Grab the attention of your web visitors by adding you own personality. Blizzard’s 404 page is literally a broken page. It’s shocking for first time visitors, but it’s an awesome and unpredictable response at the same time.
    • Add interactive games.

    • Kualo‘s 404 page is more than just funny meme. When you’ve stumbled upon a broken link, it will notify you that space invaders took over the web page. An actual game similar to Space Invaders will appear.
    • See, the page, what once was considered a bearer of bad news, is now a very fun and exciting game.
    • The error will also give you the chance to get a discount. If you score over 1000 points, the game will grant you a web hosting discount. This proves that 404 pages are not always full of disappointment.
    • Be informative!

    • Aside from being sassy, friendly, and funny, this is also your chance to be of help to your web visitors. You can suggest resources and links about things that got lost.
    • The National Public Radio’s 404 page offers a list of informative posts about people who mysteriously disappeared like Amelia Earhart. Instead of thinking about your broken link, you will be more curious on what really happened to Amelia.

For more 404 design tips, you can check out part 2 right here!

How to Design Your Website’s 404 Page (Part 2)

Man looking for safety

Man looking for safety


A 404 page does not always have to bring disappointment in our lives. As a web designer, this is your chance to make up for the mishap. Guide the web visitor back on the right track. You can suggest taking them back to the previous working page or suggest reading another article that may interest them. You can present all your navigation options through a 404 page.

Follow these tips when designing an error page:

  • A 404 page is not all text.

  • Yes, you have to convey well your message. Apologize for the mistake, but you also have to ease their frustration by adding an image. Some websites add a funny image to lighten up the mood. Why empathize on the image? Because the first thing that people will notice is the image on the screen. The image displayed will help lay emphasis on your message.
  • Don’t overwhelm your web visitors.

  • You have to understand that they are already frustrated. Don’t add up to their stress. Images may help them cheer up, but you also have to offer a clear navigation.
  • Help get out that 404 page by presenting a limited number of options. They are lost so there’s no need to further confuse them by presenting so many options on where to go.
    • When your web visitors encountered an error, these are the 3 basic things you can offer:
      • They go back to the previous page so they can track where it went wrong.
      • They can also go to the home page of the website so they start over.
      • Lastly, they can report the error. Allow your web visitors to help you out. Perhaps, you are not aware that such problems exist. When you have an avenue for your web visitors to report an error, invalid page, bad link, you get to immediately take action. You are given a heads up that hey! This page ain’t working. You know what areas to improve on, and you know what needs to be done instantly.
    • Aside from giving 3 navigation options, you can also add these tools on your website to help more customers in the future.
      • Live chat feature.

      • Most of the time, chat bots are annoying. They just pop out of nowhere. However, when someone needs help, chatbots are really helpful. In a situation where a customer is lost, chat bots can be a lifesaver. Adding a chat option can help customers get on the right direction. You create automated messages that will guide web visitors to the main parts of your website.
      • Search box.

      • Another brilliant way to help is to add a search box on the 404 page itself. Web visitors don’t need to go to the home page to start a new search. They can do it right there. Perhaps, the 404 page appeared because they misspelled something. This search box can offer immediate assistance.
      •  FAQ.

      • Lastly, you can use this chance to answer questions regarding 404. You can why they are seeing an error, and answer common questions related to it. Grab this opportunity to inform your web visitors about the causes, and at the same time, alleviate their frustrations.