Design Blog

Designing the Best 404 Page in 2023

We’ve all been there—you’re meandering about the world wide webs, sipping your coffees (or teas, we don’t discriminate here!) and happily going abouts your day. *click, click* *SSSSIP* Ah, yes, this looks like the perfect path to venture. Filled to the brim with photos, illustrations, and all the information you would ever need, you continue onward in your surf-ari.

What's This?

You’ve stumbled upon a button! You ponder this contraption for a moment and decide to descend further into the depths. A moment of spontaneity rushes over you, you click this fascinating wonder when suddenly….BAM!

You find yourself in…

video game font 404 page

404 purgatory oOoOoooOOOO

No where to go, you frantically search for a way out. Left, down, UP, RIGHT—NOTHING! BUT THE EMPTY VOID OF DOOM! What do you do? After carefully considering each of your options, you find it best to leave this wretched establishment and scope out a new resource to explore. Slowly backing  away to that from whence you came, you do the only thing you can do: RETREAT.

— Intermission — 

Wheww…that was intense. Take a moment here to gather your bearings.

Bearings all gathered? Incredible. Let’s dive in and see how this emotional roller coaster could have been avoided. As witnessed, a great 404 page doesn’t just happen. There’s storyboarding, mockups, wireframing…okay maybe not all that. But what it does take is a dash of thought and a sprinkle of creativity. Let’s get cookin’!

Here's What You'll Need

1.
WordPress
2.
Crocoblock

Optional

3.
Elementor
4.
Elementor Pro

Optional

5.
Braaaaains :0

Consider your application

Whether you’re designing for a personal website or a multi-million corporation, think about the brand. Do they make cute, cuddly teddy bears? Build soaring skyscrapers? Rescue cats and dogs? Almost any 404 page can be customized to suit a client. 

For the 404 page below I photoshopped a lion in space, since the client uses a lion in their logo. I gave him a helmet, space lions need to breathe too! And to add a little spice I added a mouse-over effect to the 404 text. 

Play Video

Usability

There’s nothing worse than landing on broken link and having a blank 404 stare you in the face. One thing I like to do is offer the user different options on where to go next. This always includes a link to the homepage, and, depending on the needs of the client, I also include a search option.

Other elements to consider are: contact button, links to popular products, and perhaps display pages or posts with relevant terms.

Important!

Should you choose to include a search feature, be sure to set up your search results archive template!

Think about the message your 404 page will send to the user

When brainstorming 404 page ideas, consider whether your idea is appropriate. For instance, a spooky zombie crawling across the screen *miiiight* not be the best choice if you’re designing a website for casket and headstone services….

We build amazing websites for a variety of established construction companies, however, we steer clear from using fallen cranes, damaged materials, leaning buildings, etc., as this kind of imagery can give off the wrong impression. Instead, we opt for other interesting ways to incorporate their business or brand..like dogs. Who doesn’t like dogs?

Stevens Construction 404 page with a dog in a construction worker uniform
Explore ideas

There are tons of great 404 pages out there (just look at the examples included in this post!). Okay, maybe I’m biased. BUT, take a look around! Some of my favorites are Lego, Spotify, and who can forget Mint!

lego 404 pagelego 404 page
Spotify 404 pageSpotify 404 page
mint.com 404 pagemint.com 404 page
Have some fun with it

Even if you can’t come up with a clever, client-specific idea, you can still have a little fun! One thing we love to do is play with animations. You can find free animations at Lottiefiles.com, or use widgets, motion effects, and other various options included with Crocoblock’s JetTricks, JetElements, or you can choose to hard code them yourself if you’re hardcore parkour*.

*lessons in hardcore parkour not included

Play Video
Getting started

Elementor makes creating your 404 page a breeze! Once you have your theme and other resources installed, simply hover over Templates in your left-hand admin panel, click Add New, then select Error 404 from the dropdown. Call that new baby something special, then click Create Template. This will take you to the Elementor editor.

Tip: I like to make the container fill the height of the screen, which gives me a large canvas to work with. 

Create your design, and once you’re finished, click Publish. Under Conditions, choose to apply it to the 404, and VOILA! The power now lies within your website. Please 404 responsibly.

clicking on templates to get more options
choosing Error 404 template to work on

Recent Posts

The Importance of Protecting your Intellectual Property

June 20, 2024

The cease and desist letters seem to be a frequent occurrence and many businesses small and large are struggling to...
Change Text Color on Container Hover in Elementor

March 29, 2024

When it comes to designing in Elementor, there are many different possibilities straight out of the box. However, sometimes you...

Contact Us

Let's start the conversation

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.

Contact Us

Let's start the conversation

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.