The 404 page is one of those pages visitors of your site need but probably won’t realize they need it until it’s not there. This is the page that tells them the page they’re trying to access is unavailable or doesn’t exist.
Without a 404 page, visitors might see a blank page. Or, they’ll see a generic error message like “HTTP 404 Not Found,” against a white background with no additional information or options for finding what they were looking for. Both leave visitors confused, frustrated, and ready to get off your site.
But you can keep visitors on your site by doing what the best 404 page examples do: Design your page strategically, use specific best practices to help visitors understand what happened, and give them options to get to where they were originally trying to go.
Marvel
Marvel’s 404 page sets the tone for what a branded 404 page is supposed to look like. They rope in their long list of Marvel Cinematic Universe (MCU) characters into each page and tie the error message back to the specific character they use.
Putting their superheroes front and center brings so much character to the page. There are also subtle animations that bring the page to life even more. And you can refresh the 404 page and see new characters and error messaging.
They keep their message very simple and tell people exactly what to do (make sure you typed the address correctly, go back to the previous page, or use the site search).
But to be honest, Marvel is missing something for me. Buttons! I think people like to just click and go. It makes it easier for them to stay on the site.
But overall, Marvel makes the 404 page fun and entertaining, which helps get rid of the frustration of not finding what you’re looking for.
Best practices used to create this 404 page:
- They stay on brand and leverage the popularity of all their Marvel characters
- They state what happened and how to potentially fix it very clearly
- The animation is subtle versus taking over the page
- The overall layout is simple and easy to digest
Ready To Go Survival
I love Ready to Go Survival’s 404 page because it kind of does what brands do with influencers, leverage the reputation of someone popular. In this case, they use a popular cultural reference with an iconic scene from The Matrix.
Morpheus is staring at you asking you to choose between the red or blue pill to get the answers you’re seeking. The copy supports the reference even more saying the page you’re looking for “got lost in the matrix.” Then it goes on to explain what to expect when you choose the blue pill vs. the red pill.
I also like how the reference to the Matrix ties into their brand of survival because that’s ultimately what the Matrix movie was about.
Their 404 page gives visitors a way to find what they’re looking for. But they don’t overwhelm them with a whole bunch of options.
When you scroll down, you can subscribe to their email list. I think that’s a nice touch, just in case that’s what the person was looking for in the first place.
Best practices used to create this 404 page:
- They make the page a lot more interesting by referring to an iconic scene from an iconic movie that’s all about survival
- Instead of overwhelming you with every way to find what you’re looking for, they give you two options
- They use the page as a chance to guide people to a conversion with the email subscription
- Brand colors and images are spot on to support what the 404 page is saying
CrazyEgg
Okay, okay. I might be a little biased. But I think CrazyEgg’s 404 page does something that all visitors appreciate when they’re lost on a site, and that’s to keep it simple.
“Whoops! The page you’re looking for could not be found,” is as straightforward as you can get. Couple that message with a single link back to the home page and they’re giving visitors exactly what they need in this situation (to understand what happened and a way to start over).
The cute graphic of the girl floating away in a hot air balloon is a nice touch. There’s also a little more when you scroll down. You see the third-party endorsement trust badges, a way to sign up for their tools for free, and the rest of the links in the footer. They give you a little more to work with if the homepage isn’t what you want.
Best practices used to create this 404 page:
- The page is as simple as it gets, making it easier for any visitor to understand what’s going on and how to move forward
- The image reinforces the “Hey! You’re lost!” feeling
- You get one button so you’re not overwhelmed with choices
- You can scroll down and see a little more information like who the company is trusted by
- They understand their audience. They don’t want all the frills or don’t need them. Just tell me I’m in the wrong place and give me a way to start over
Spotify
Spotify’s 404 page is clever as much as it is thoughtfully designed and helpful.
They’re a music-streaming giant, so the witty 404 error message of “This Page is Out of Tune,” is on point with their brand. The image of the digital audio workstation with flowers growing out of it is light-hearted and makes the experience more inviting. It feels like it’s saying, “Hey, “something happened, but it’s not that bad and we can fix it.”
My favorite part about this 404 page is the way they guide you forward. They tell you to check the link first. From there, they guide you to a most-performed action (listening to their web player) and a place to find answers (their support page).
Spotify also does a good job of separating these links from their main call to action (CTA), signing up for their service. They link to the actions above but created a separate button for “sign up free.” It’s a great way to drive conversions on a page that’s not really meant for that.
Best practices used to create this 404 page:
- They leaned into witty, on-brand copy for their error message (“This page is out of tune.”)
- They use an image that supports the message perfectly and evokes a certain feeling
- They give you those most important links (the web player or support page) but they also highlight their main CTA
- The background color makes everything else pop on the page
- A simple, readable font goes a long way
Blizzard
Blizzard is a popular video game producer that prides itself on creating epic entertainment experiences for all their players. I was pleasantly surprised to see that this epic entertainment experience extended to their 404 page.
The animation really makes the entire experience. You’re greeted by a Murloc, a creature from their game World of Warcraft. He’s looking around like a lost puppy, standing in the middle of a Blizzard. This is such a fun way to highlight the brand name and the products they produce.
“404-page Not Found” is displayed prominently in the middle of the page. And then comes the witty copy that ties into the Murloc character, “We’ve dispatched a rescue Murloc to guide you back to safety.” Even the button mimics the sound of the Murloc (Mmmrrgmgrrrgmmll) rather than saying “Back to the homepage.”
More than anything, I love this 404 page because it speaks directly to and is designed for its unique audience.
Best practices used to create this 404 page:
- Everything on the page is for their unique audience, from the Murloc to the button back home
- They use animation to compliment the page and confirm that lost feeling
- The page is so on-brand that the button is something that you probably won’t understand unless you play their games or know their brand
- Witty copy works when it speaks to a specific audience (“We’ve dispatched a rescue Murloc to guide you back to safety.”)
- Use colors that are of the same family and complement the brand (Blizzard is the brand and they use all the blue colors)
Patagonia
Patagonia’s 404 page is the epitome of capturing your brand’s vibe. Everything about it reads Patagonia. Fans of the brand will appreciate them putting in the extra effort on a page that could easily be a message on a white background.
They chose an image of a snowboarder wiping out to support their 404 message, “Sorry for the airer.” And that cheeky text continues when they ask you to please try to “stick the landing on another page.”
I like how they did an overlay on the background image to allow the white text and buttons to pop. Distinguishing the home page button from the help center button is also a nice touch.
What’s really unique about this page is the “You May Like” section. They show some of their clothing that you might be interested in buying. It really helps the people who were looking for a certain product that might be sold out or no longer in production.
Best practices used to create this 404 page:
- Don’t be afraid to do a play on words with your error messaging as long as it aligns perfectly with your brand (“Sorry for the airer.” “Please try sticking the landing on another page.”
- They’re very clear about what has happened and give you the two best options to start your journey over
- Do something that you know others aren’t, like their “You May Like” section for clothing suggestions
- Choose a humorous background image that goes well with the message. The image of the snowboarder crashing is chef’s kiss
Steve Lambert
Steve Lambert is known for his brand of experimental art and large-scale, creative public projects that engage new audiences on difficult topics. He’s a little off-beat and his 404 page is no different.
He starts by giving it a title, “The Most Awkward 404 Not Found Page on the Internet,” while most other brands wouldn’t even bother with one. Then comes this super cringe video.
He walks into a relatively empty room kind of shocked that we’re there too. He’s basically like hey you’re lost too? The search bar below can help. You’re welcome to hang out as long as you want but this is all you’re really going to get. But he says all of that in his off-beat way.
He really took advantage of highlighting his personal brand and creating a memorable moment with visitors.
I also appreciate how he kept it super simple with his error message and gives you the option to search for what you want. He kind of cuts out the middleman and gets you to where you want to go faster.
Best practices used to create this 404 page:
- Use video to capture the spirit of your brand and the page. That video is so funny and so unique. I don’t think I’ve ever seen a video like that on a 404 page but it goes so well with his brand
- Use your 404 page to create a memorable moment with visitors and further brand recognition
- Rather than just using the page doesn’t exist message, give your 404 page a title to make it a little more interesting
- Tell the person exactly what happened (He says, “This page isn’t here. Maybe it moved. Or maybe it never existed.”)
- Use a search bar instead of buttons. I think this kind of cuts out the middleman and gets people to where they need to go faster
Every Best Practice the Best 404 Page Examples Use
- Brand your 404 page
- State what happened and how to potentially fix it very clearly
- If you’re going to use animation, keep it subtle
- Use a simple and easy-to-digest layout
- Give people 1-3 options for finding what they need, don’t overwhelm them
- Use an image or video that supports the error message and evokes emotion
- Design the page for your unique audience
- Lean into witty, on-brand copy for your error message
- Use a background color that makes everything else pop on the page
- Use a simple, readable font
- Do something that you know others aren’t, like a “You May Like” section like Patagonia does or a video like Steve Lambert
- Consider using a search bar instead of buttons to get people to where they need to go faster
