A 404 error page is one you rarely want your website visitors to run into. Especially when they’re just getting to know your brand.
While it’s impossible to completely stop that from happening, what you can do is to ensure that your 404 page doesn’t give them a bad impression of your business.
Better yet? Your error page could leave your audience with a smile and confidence that they are, after all, in the right place.
How’s that possible? That’s what you’ll find out from this article.
Below, we’re featuring some of the most interesting 404 pages we’ve seen on the web along with expert comments from fellow marketers who we’ve reached out to for help.
But first, let’s shine some light on what 404 pages are.
What is a 404 page?
A 404 page is a web page that users see when their request generates a 404 error – an HTTP status code indicating that the page they were trying to reach couldn’t be found on the server.
Most often, users see 404 pages because they’ve either typed in the wrong URL address or clicked on a broken link that leads them to a page that doesn’t exist. Another reason for this could be that the website owner decided to remove the page or moved it elsewhere, but forgot to redirect it to a new URL.
While most 404 pages simply inform users that the content they’re looking for couldn’t be found, many marketers choose to make their error pages fun and enjoyable to visit.
That said, let’s now look at some of these awesome examples of 404 pages web along with some insights from marketers that reviewed them. As you’re about to see, they’re all about changing the poor customer experience and retrieving lost visitors through some creative, fun, and inspiring tactics.
Did you know? With GetResponse’s website builder you can build your 404 page and an entire website as well! It comes packed with ready-made templates and an AI Wizard that’ll create an entire site for you in a matter of clicks. Check out this quick video to learn more about the tool and start building your own 404 pages today.
Impressive 404 pages and what makes them great
1. 404 page example: Ultimate Guitar
The best part of their 404 pages are the visualization that fits right in line and tone with the website.
The website shares music tabs and sheet music (written forms of learning how to play songs), either through expert documentation and notation, or by user submissions. All of which are reviewable so a user can see which one is considered high-quality, and give their own feedback on accuracy (or inaccuracy).
They have premium add-ons to see more of the expert content, including how-to videos and step-by-step guides, even “official” tabs so a user can learn the literal actual way a certain song (or instrument in a song) is played.
Their 404 pages rotate, from a guy playing guitar and jumping off an amp to look cool (and falling) to another guitarist trying to show off by swinging his guitar around his neck and having it fly off stage (and likely, getting broken).
Habeab Kurdi, GetResponse Senior Copywriter
Key takeaways:
- They keep it engaging, without needing to rely on copy. Having a guitarist trying to look cool, yet stumbling and falling to the ground, or losing their guitar, resonates with musicians and showcases a fun, engaged vibe consistent with the website, and with musicians (for the most part).
- The whimsy of the videos lets users know that hey, no big deal that they went to the wrong page or to a broken page. Yeah, you want to learn a new song (for yourself, to look cool, or both). But music is hard, looking cool is hard, doing both is pretty hard too, so don’t be afraid to fall or fail. Just get up and keep rockin’!
- About that copy. It’s simple, and to the point. Oops! is a classic line. Then they give a link to get back to the homepage (easy navigation) as well as a link to “report a problem” just in case something is broken. Lastly, they give you two CTAs, which replicate the links in the above copy, but give the user a super easy way for anyone to just go straight to where they want to get.
2. 404 page example: Wizarding World
404 pages usually break the immersion of the site’s experience. The 404 page from Wizarding World manages to keep it – and quite masterfully so.
First, there’s an image of Harry’s first-time use of the Floo network to travel. It’s the time he got lost and instead of landing in Diagon Alley, he wound up inside a dark wizard’s shop (Borgin and Burkes) in some shady back street.
This image is full of clues for true Harry Potter fans, the likes of which are most likely to be found browsing the Wizarding World website.
Second, there’s a question beneath that says “Oh dear, are you lost?” “Oh dear!” is something Mrs. Weasley tends to say a lot when she’s worried and preoccupied about something, and of course, Mrs. Weasley is front and center in this image, accompanied by most of her family.
So, the immersion experience is kept and this 404 page almost seems like it’s an integral part of the site, like the user is supposed to be there.
Finally, there’s a button at the bottom that says “Back to the Wizarding World” which. Ironically, slightly breaks the immersion because it makes it seem like being on that page is like being stranded in the Muggle world.
Which as I described above doesn’t feel like it at all:)
Nikola Roza, Owner of Nikola Roza – SEO for the Poor and Determined
Key takeaways:
- Make your 404 page highly immersive
- Keep it on brand
- Make sure it’s intuitive and easy to leave via a button
3. 404 page example: Wendy’s
Instead of resorting to a generic 404 design and copy, the international fast-food chain’s 404 page shows their brand’s personality to the fullest. The copy is full of food puns, reminding the user subtly that Wendy’s burgers are fresh. The site gives you three options – to view Wendy’s menu, find jobs, or stay and play a cute and simple Wendy’s-themed platformer game that, I’ll admit, made me want some nuggets and fries. It’s not a boring 404 page – it’s memorable, and a perfect example of a brand being their fun-loving, burger-eating selves.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- Embrace your brand’s identity on every corner of your website
- While running into a 404 can be disappointing, the experience of being there doesn’t have to be
4. 404 page example: Omelet
Though the creative agency is best described as marketing-oriented, its latest website design project was particularly clever. It released a page that automatically pops up a bright red warning with the words ‘this page is eggstinct’ as animated egg cracks over the screen, drawing attention to the word choice. Bright red, the color of warnings, signifies that this is a significant notice whilst the egg theme harmonizes with Omlet’s name.
The message is used in content marketing campaigns too, with Omlet coining the phrase ‘eggstinctly brilliant’ to describe its services. The creative agency’s website says, “Sometimes you have to crack open a bad idea, fry it up and serve it with a side of sarcasm.” Looks like Omlet is a creative agency with a difference. They take a common thing or situation and turn it on its head to create genuinely hilarious campaigns that are designed to make people think (and laugh).
Ronald Samson, Research Analyst at CreditDonkey
Key takeaways:
- Match the tone with the rest of your website
- Keep it fun and engaging
5. 404 page example: Canva
Canva is a graphic design platform, and their 404 page is very simple, yet quite engaging. When you encounter this site, you can either go to the homepage or stay and play a puzzle game. And when you play, you’re reminded of what makes Canva a great tool – their templates and the beautiful designs you can make with them. While not designed for conversion, this 404 page achieves the goal of being a fun and engaging one. The simplicity of it takes away the dilemma of “where to go from there” and makes it easy to go back to the homepage and continue designing. The things I’m not a fan of here is the slightly uninspired copy and lack of navigation. It also seems like the page hasn’t been updated in a long time, perhaps with more modern designs.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- The simpler the 404 page, the better – but don’t forget about the navigation
- Don’t be afraid to show off your strongest assets on the 404
- Remember to update your 404 page once in a while
Read more related content:
6. 404 page example: Slack
Slack is a business communication platform that understands the need of balance in life. That’s why their 404 is a perfect example of what they stand for. The copy on this page sounds calm and comforting and redirects you to the Help Center. There are regular navigation sections on this page, too. But what stands out here is the idyllic animated landscape in the background. It’s a picturesque scene filled with butterflies, flowers, and rainbows. What’s more – it’s interactive. You can explore the scene from left to right and “pet” the chickens and little pigs you encounter. It’s definitely one of the most soothing 404 error pages out there.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- Provide useful navigation on your 404 error page
- If possible, lend a helping hand and suggest solutions or redirect to your help page
- As glitches and expired links can be stressful, try to reduce the visitor’s negative emotions by using a calm tone in your error message
7. 404 page example: Airtable
In a world obsessed with scrolling, your website’s bottom footer is prime real estate.
I love that Airtable hasn’t reinvented the wheel here with their 404 pages and stuck with navigation that they know is familiar to their customers/website visitors. Offering their customers the ability to speak directly to someone is the perfect CTA for “lost users”. Offering support front and center helps eliminate any negativity built up during this process of misdirecting a customer.
Tom Barragry, GetResponse Product Marketing Manager
Key takeaways:
- Good use of the footer navigation
- Clear and actionable next step CTAs
- Suggestion: it would be great to offer more relevant suggestions based on the last page the user visited
8. 404 page example: Ueno
There’s nothing like a running hot dog to make you do a double take! Ueno uses some lighthearted fun to help point you in the right direction. And that hot dog is reminding us that the webmasters probably never got the memo to correct the page. Thanks for the laugh, Ueno!
Brooks Conkle, Owner at BrooksConkle
Key takeaways:
- Landing on the wrong page can be frustrating, so do your best to change that experience
- Humor always wins
9. 404 page example: Figma
Figma, a graphic design and prototyping platform, had a creative approach to designing their 404 page. When you enter the 404, it looks just like a usual error page. But, the 404 numbers are fully editable vector graphics, and you can spend hours on this site customizing their shape and look. Even if you come here by accident, knowing nothing about the company, you can still figure out what the tool is for by interacting with the page. There’s also a regular navigation bar on the top that will take you anywhere you want to go on the website. The black “sign up” CTA button stands out on this simple, white page design. This 404 error page example is one of my favorites because of how well it introduces what their tool is all about.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- Imagine the 404 page is the user’s first contact with your brand – maybe you can introduce your product or service here in a creative way
10. 404 page example: Seer Interactive
I love this 404 page because it’s unique, and not like the regular ones out there.
It has a catchy headline, which prompts anyone who stumbles on the page to pause and take a look at the information on it.
There’s also a call-to-action prompting the reader to either search for the information they need using the search bar right away or use the navigation menu on the website’s header.
They also subtly promote their community page, which highlights how they’re giving back as a company.
AbdulGaniy Shehu, Lead Content Strategist at Your Content Mart
Key takeaways:
- Don’t be afraid to try something different.
- You can redirect readers to another key page on your website from the 404 pages
- Be strategic with your 404 pages by letting readers know other ways they can find the information they’re searching for (for example, via search bar)
11. 404 page example: Nextiva
Our dev team actually took the time to build an interactive 404 page. I always find myself watching it for a few seconds because it’s fun to look at and I appreciate the work. It’s the little things like this that make our brand stand out.
Devin Pickell, Growth Marketing Manager at Nextiva
Key takeaways:
- Don’t be afraid to make your 404 page fun
- Your 404 page can reflect your brand voice
- If possible, include interactiveness
12. 404 page example: Zillow
The online real estate marketplace, Zillow, makes you feel at home on their 404 page. The animation of a cat purposefully knocking over a plant, combined with the “Uh oh, something broke” is both hilarious and cute. It’s straightforward and lets you return to the homepage (or go anywhere on their site by using the navigation bar). What’s great about it is that instead of making you feel frustrated that the page is not found, it puts a genuine smile on your face.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- Don’t shy away from being a bit more casual on your 404 page. In fact, that’s the page where you can show off your brand’s fun and witty side the most!
- Again, simplicity is the key
13. 404 page example: Mailtrap
When a website visitor is searching for a specific page and made mistake, we’ll show them our 404 page. On this page, we’re trying to concentrate attention on a clear CTA – return back to the home page. At the same time if a user was searching for a specific page/feature – he might find the answer in our Help Center. Providing two options is a great idea to recover lost site visitors. Furthermore, we’re recording failed URL paths. It’s one of the feedback channels for us, sometimes it may be a signal for you what visitors are searching/expecting to see on your site.
Andriy Zapisotskyi, Growth Manager at Mailtrap
Key takeaways:
- Provide a short and brief explanation of what went wrong
- Explain possible reasons for an issue
- Add a clear call-to-action to the home page
- Offer a chance to visit your Help Center to find more info about the product
- Treat your 404 page as a feedback channel and track the broken links
14. 404 page example: Templatemonster
The TemplateMonster 404 page features their brand mascot to keep it on brand. It also distracts visitors from an undesirable situation while showing some of the company’s personality. Additionally, those illustrations work best to make the 404 page witty without too many words given.
The short yet concise copy with an internal link encourages the visitor to go to other pages on the website instead. It makes it clear that the 404 page is not the dead-end for them so they can continue their journey. Therefore, it helps to decrease the bounce rate and untimely exit from the site. Overall, the design is simple, straightforward, and avoids trying too hard to jest.
Andre Oentoro, CEO and Founder of Breadnbeyond
Key takeaways:
- Provide easy navigation to the homepage
- Use illustrations to eliminate the need for technical jargon and make the page easy on the eyes
- Write your copy in a simple and casual manner to provide visitors the maximum use of all the options available on this 404 page
15. 404 page example: Giphy
The GIF search engine GIPHY welcomes you on their 404 page with what I’d describe as a 3D cool-but-sad cowboy emoji. They could have left it at that, but they follow it up with some encouraging copy and an endless supply of trending GIFs. So, even if you’re sad that the GIF you were looking for doesn’t exist, you don’t have to go anywhere else to still enjoy thousands of creations on GIPHY. It’s super useful and convenient for the user. There’s also a search bar and a button that redirects you to the homepage. The page doesn’t feature the “404 error” message, but it doesn’t have to – the ‘oops’ is just enough to know where we are and what’s going on.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- The 404 page doesn’t have to be a dead end. Keep the page useful by suggesting solutions to the problem the user might be here to solve
16. 404 page example: Bouncer
This 404 page is not an ordinary one, for sure.
When we land there, we immediately know that we are in the wrong place.
Bouncer’s mascot presents himself in a rather intimate situation, and with a funny twist which informs us about that.Then we are presented with two calls-to-action:
1) To go back to the main page
2) An emphasized one, of a greater cause – to adopt a gorilla with WWF
Then, below the fold, Bouncer presents links to their latest blog posts, in case we’d like to spend some time and learn something more about email deliverability.
All that is definitely consistent with Bouncers’ branding and tone of voice.
— Radek Kaczynski, CEO at Bouncer
Key takeaways:
- Provide clear calls to action
- Think outside the box, e.g. offer support for a greater cause
- Use your brand mascot to make the page and your brand more human
- Match your 404 page with your brand’s tone and voice
- Make use of the below the fold section to provide links to other useful content (e.g. popular posts)
17. 404 page example: Sprout Social
What if you could take your 404 page and turn it into a full-blown landing page? That’s exactly what Sprout Social has done with theirs. As per typical 404 page standards, Sprout Social starts out with one of those cheeky little error messages indicating that you’re in the wrong spot. However, that’s not what sets it apart from other 404 error pages. It’s everything else.
The first thing you’ll notice is a CTA in the middle of the screen directing you to learn more about their service through an actual demo – talk about maximizing your site conversions. And if you’d rather receive their company info through email, there’s a sign-up form on the page for their newsletter. But that’s not the real kicker. They actually have their live chat support open on the page, so you can speak directly to someone who can get you where you want to be! This isn’t really a 404 page, but a great example on how to convert lost souls into paying customers.
Robert Bernal, GetResponse US SEO Manager
Key Takeaways:
- Offer several different ways to turn an unfortunate error into a goal conversion
- Show live chat support availability to ensure customer satisfaction
18. 404 page example: NASA
NASA has a sleek, professional yet clever 404 page. Its copy (“The cosmic object you are looking for has disappeared beyond the event horizon”) and galactic background image is very on-brand for a space agency. There’s no gimmick to this page, and you can explore NASA’s website by clicking on the easily visible navigation bar. It doesn’t make you stay there longer than necessary and keeps you immersed in space-themed exploring.
Ada Durzyńska, GetResponse Content Marketing Specialist
Key takeaways:
- If there’s a way to keep the copy and design on your 404 related to your business, do it! By keeping a stable theme throughout your websites, you keep visitors engaged and invested in your story.
19. 404 page example: GetResponse
Without tooting our own horn too much, I genuinely think this 404 page is an effective one.
The tone and look of this page matches the new visual identity that we’ve been going for. You can see it in the color scheme, the yellow highlight, the fonts used, and throughout the whole copy.
Although this obviously is an error page, we wanted our visitors to leave with a smile. That’s why we made use of this comic-like illustration to explain what went wrong.
We also wanted to make sure our visitors know what to do next. That’s where the link to the homepage came in, along with the subtle hint to double-check if the URL address they’ve typed in looks OK.
At the very bottom of the page, we also added some extra sections to help enhance our visitors’ experience (and potentially improve our conversions, too). We added links to our top articles, a link to the page where the visitors can learn more about our features, and the signup page.
Now, if we wanted to further optimize this page, I’d probably go for a search bar feature next to the homepage link. While it may not be the best for conversions and getting new signups, I suspect it’d improve our visitors’ experience by helping them retype their query and find the piece of information they’ve been searching for.
Michal Leszczynski, GetResponse Head of Content Marketing & Partnerships
Key takeaways:
- Make sure to update the page if you’re changing your visual identity
- Make the page fun, enjoyable, and easy to navigate
- Evaluate how the page performs both in terms of conversions and positive user interactions
20. 404 page example: Ahrefs
It may sound like an easy play for an SEO company, but not all of them have used their 404 pages as effectively as Ahrefs has done here.
It’s fun, educational, and I wouldn’t be surprised if it converts well, too.
Since Ahrefs’ website visitors are most likely interested in SEO, they’ll probably appreciate what the team has done here – they explained what broken links are, and hinted that you can identify such pages on your own website using their free broken link checker tool.
And although the page is missing the elements we’re used to seeing – like a link back to the homepage, search bar, or other useful content – their target audience will most likely know their way around.
Michal Leszczynski, GetResponse Head of Content Marketing & Partnerships
Key takeaway:
- Don’t neglect the page’s potential to drive signups
- Use the 404 page to show what your brand is about
- Don’t be afraid to take a different route
21. 404 page example: Lego
Sometimes the product you search for is not there anymore. That’s sad. While most companies acknowledge this fact and sometimes apologize, Lego on the other hand reminds users that they shouldn’t worry, because everything is STILL AWESOME. They also provide a clear solution with the “Start shopping” CTA.
Irek Klimczak, GetResponse Senior Content Project Manager
Key takeaways:
- Empathize with the user
- Help them keep their calm
- Provide a clear solution
Time to create your own 404 page
As you’ve now witnessed, missing pages aren’t the end of the world. As a matter of fact, plenty of site owners use their 404 pages strategically.
Many try to turn the bad experience into a positive one – either by adding a funny message or interactivity to their error page, keeping their visitors entertained.
Others focus on providing assistance – serving visitors the most helpful links, a direct way to reach the site’s homepage, or a search bar to help them find the piece of content they’re interested in and looking for.
Finally, there are marketers who use their error pages to boost revenue and drive conversions.
Hopefully the error pages we showed you in this article will serve as a design inspiration that’ll help you create a wonderful, eye-catching, and highly-effective 404 page of your own.
Now, if this is the beginning of your journey and you don’t yet have a full-fledged website, you’ll benefit from reading our guide on how to build a website from scratch.
There, we explain the step-by-step process and the aspects you’ll want to consider when building your own site – whether it’ll be a robust WordPress website that requires tons of manual configuration or a site built with an intuitive drag-and-drop builder like the one offered by GetResponse.
Lastly, if you’ve not yet heard about this new cutting-edge solution, go ahead and watch this quick video overview to get a better feel for what you’ll get out of the box.