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