Designing Fun and Creative WordPress 404 Pages

Does the number 404 mean something to you? If you have browsed the Internet long enough, you might stumble onto this number on more than one occasion. It shows up every time a site can’t fulfil a user request because of bad links, a typo, URL change, deleted page, or many other possible reasons. While some web owners dreaded the 404 pages, some others decided to use them as their creative outlets and came up with really fun and amazing results.

If you manage a website, the 404 page is bad for business because it means you could lose a visitor every time that page loads. It also means that the web owner does less than a satisfactory job maintaining his/her site.

Let’s look at the problem from the user’s point of view. What would you do when you clicked on a link and landed on a 404 page saying what you’re looking for doesn’t exist? Most people would just close the tab and move on to pursue another link, unless they are given a reason not to.

It’s clear that if you want to keep your visitors from fleeing away, you have to modify your 404 page to show more than just an error message.

Creative 404 -mte- 01 - Jonathan Patterson

In his book “Emotional Design,” Donald Norman said that a great design is about how it makes you feel, what it helps you do, and what it says about you. Applying this principle to web design means that a successful 404 page should:

  • Make the visitors feels positive – You can use funny words and pictures to amuse your visitor, or wow them with amazing images. Make sure that landing on your 404 page is an unexpected but rewarding experience. Make it similar to finding an easter egg or winning a lottery instead of having an accident.
  • Help the visitors do/achieve something more – Your 404 page is also a good place to do a little bit of promotion. You can put links to your popular posts there or links to other locations on your site that you want your visitors to visit. Don’t forget to include a search box and a way to report the broken link so that you can fix it.
  • Show the visitors who you are – Branding and personality are important to establish your reputation on the Internet. So why not use the 404 page as another way to achieve that goal? Make the page in sync with the image that you want the world to see.

The easiest way to create a 404 page in WordPress is to use a plugin called 404page. This plugin will let you set any page as a custom 404 page. Just build and customize a page, and choose it as your 404.

Creative 404 -mte- 01b - Plugin

Since you can use any theme out there for your WordPress, and there are various page builders that can help you make any page imaginable, there’s virtually no limit on what kind of 404 that you can create for your WordPress site.

When you are ready to build a custom 404 page for your WordPress site, here are some creative and fun 404 pages that might inspire you.

Ford

Creative 404 -mte- 02 - Ford

Ford, a car maker, cleverly use a road to draw 404 and an animated car moving nowhere in loops.

Roman Menshikov

Creative 404 -mte- 03 - Roman Menshikov

This 404 page concept utilizes the lonely atmosphere of the image to show the feeling of being lost.

Derek Clark

Creative 404 -mte- 04 - Derek Clark

Another 404 page concept that will fit photography sites.

GigMasters

Creative 404 -mte- 05 - gigmasters

As a site that deals with shows and performances, using a magician to represent a page that disapears shows that the webmaster put a lot of thought into planning the page.

The Movie Nerd

Creative 404 -mte- 06 - Movie Nerd

This site uses the 404 page as a recruitment page. If you can’t find what you’re looking for, why don’t you write it for us?

I Love Icons

Creative 404 -mte- 07 - I Love Icons

Where is it? What is that? It looks like 404. Am I lost?

Brendan Pittman

Creative 404 -mte- 08 - Brendan Pittman

Nobody is in the audience. Maybe it’s because nobody should be here. You’re lost; return home. A great 404 page concept for music-related sites.

Mitchell Geere for Kiss.com

Creative 404 -mte- 09 - Kiss dot com

Where’s the party? Not on this 404 page.

Lego

Creative 404 -mte- 11 - Lego

What can represent the Lego site better than its figures?

Umbro

Creative 404 -mte- 12 - Umbro

To maintain its identity as a sport-related company, Umbro created a sports-related 404 page.

IMDB

Creative 404 -mte- 14 - IMDB

It’s fitting of a movie database site to show a movie-related 404 page. The page will show different movie quotes every time you refresh the page.

Dilbert

Creative 404 -mte- 15 - Dilbert

A 404 page showing a funny 404 page comic strip. Which one did Scott Adams create first: the strip or the page?

Mark Dijkstra

Creative 404 -mte- 16 - Mark Dijkstra

Sometimes simplicity can go a long way. The page might appear simple, but creating it is not as simportant as its look.

magnt

Creative 404 -mte- 17 - magnt

Magnt doesn’t want to shoulder all the blame. You and your inability to type are also responsible for bringing up the 404 page.

Blue Fountain Media

Creative 404 -mte- 18 - Blue Fountain

Let’s play PacMan. Missing page? What missing page?

Huwshimi

Creative 404 -mte- 19 - Huwshimi

Why Ninja? Why not?

Wearespry

Creative 404 -mte- 20 - wearespry

No, don’t go home. Mom, can I keep it?

NotFound.org

Creative 404 -mte- 13 - Not Found org

And if you are still not sure about what kind of WordPress 404 page that you want to build, you can put that error page to good use. NotFound.org is an organization that helps find missing children. If you decide to participate, your 404 page will always be updated with the latest missing children info. By speading the information, you increase the chance of finding those unfortunate youngsters.

This list barely scratches the surface. There are tons of other creative 404 pages out there, and it’s impossible to put them all here. So, please share your favorites using the comments below.

Image Credit: Jonathan Patterson

Leave a Reply

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.