We’ve all grown accustomed to freely zapping through websites and scrolling down feeds uninterrupted. When, low and behold, something goes wrong or we click on a link that doesn’t work, the subsequent “This page cannot be found” message can be more than frustrating. And that’s exactly where 404 pages come into play.
A 404 error page can make or break your customer experience. This small yet all-important section of your website design has the potential to boost your sales and urge visitors to take action. It can be the difference between a site visitor giving up and leaving your website, or becoming a loyal customer and fan of your brand.
The following brands and designers show us how the classic error message can be used to your advantage. They’ve spruced up their 404 pages to not only soften the blow, but also provide customers with a smile, sense of relief or even a little giggle. Here are some of the best 404 page examples around:
What is a 404 page?
A 404 page is an online page that appears when you click on a link that is broken and is therefore no longer (or in fact, never was) available.
This can happen if someone mistypes the URL (or in other words, the web address that appears in the browser’s address bar). You can also reach a 404 page if a company has deleted or moved certain content from their website or has made changes to their permalink structure.
When you create an eCommerce website, you can either leave the default option as is, or you can customize your 404 error page. The latter gives you the opportunity to craft an enticing design that will boost your customer experience. On top of the design, you’ll have the option to write a friendly, on-brand message that will provide visitors with the help and direction they need to keep browsing.
01. Pixar - Cute 404 page
Pixar fans will no doubt resonate with this heartwarming 404 page. Featuring a character from the much-loved movie, Inside Out, it helps strengthen their brand reputation and build a bond with their site visitors. The use of colloquial language and a familiar character also make the page feel more human, helping us relate and connect.
Whether or not your brand is as widely recognized throughout the world as Pixar’s, you can experiment with text and imagery to create a friendly, human sensation. Play around with warm and informal language, using words like “awww” and “oops” to connect with your audience.
02. Omelet - 404 page with humor
There’s nothing like a touch of humor to help alleviate a frustrating situation—especially when it’s done this well. Creative company Omelet has utilized the power of discreet comedy on their 404 page, all the while keeping in line with their egg-related theme.
The vivid shade of red automatically indicates a warning sign, but the initial panic is balanced out by the comical “This page is eggstinct” message. Notice how they’ve left their menu bar visible at the top of the screen, making for comfortable website navigation and enabling site visitors to continue browsing.
03. Dribbble - Interactive 404 page
Distraction isn’t always a bad thing. Social network Dribbble’s error page proves just that. The fun, interactive design invites visitors to play, while momentarily taking their attention away from the fact that they didn’t reach their desired web page.
Not only is the game addictive, but also serves as a form of navigation; clicking on any of the images will take you to the profile of its creator, fluidly removing you from the 404 page. They’ve also made sure to include a search bar and a link to their homepage.
04. Dropbox - Helpful 404 page
You can’t help but fall in love with this friendly, bike-balancing duo. Drawn in an innocent illustrative style, the figures grin from cheek-to-cheek and seem to make everything just that little bit better. This wonderful example of incorporating illustration in web design conveys a sense of familiarity and approachability, which alleviates the frustration of reaching a 404 error page.
Additionally, Dropbox has made sure to add a few helpful links to help users navigate the rest of the corporate website. When creating your own 404 page, it’s recommended to help your site visitors by adding links to your website’s most popular sections, such as your homepage, contact section (check our our Contact Us examples for more inspiration) and ‘About Us’ page.
05. The-Artery - On-brand 404 page
There aren’t many people who would complain upon reaching this beautifully designed 404 page. The trendy visuals are cohesive with the rest of this creative studio’s website, resulting in a seamless browsing experience, even when coming across a broken link.
The image itself moves in response to the cursor and is made up of intriguing elements. This makes it likely that site visitors will even end up purposefully lingering a little longer on this page. The text used is also comforting, inviting you to click anywhere on the screen in order to easily continue browsing.
06. Lazy Oaf - Trendy 404 page example
Here’s a 404 page that doesn’t quite stick to conventions. Claiming to be ‘Keeping it weird since 2001’, fashion label Lazy Oaf has stuck to its promise here as well - in the best way possible.
Instead of providing site visitors with the usual explanation on why they may have reached this error page, they’ve switched it up with comical excuses, sad emojis and a sign saying ‘s*** happens’. However, this very frank and brightly colored 404 page is anything but sad. They’ve also ensured intuitive navigation by keeping the menu bar visible, as well as including images from their online store just a short scroll away.
07. Spotify - 404 page with a personal feel
Spotify’s error page helps strengthen their brand identity, with its trendy use of millennial pink and vinyl record imagery. They’ve kept their menu bars on show, both in the header and footer, making navigation simple.
Other than the possibility to navigate via the menus, Spotify has also adopted friendly, conversational language to suggest other useful pages. When creating your own, try implementing informal words like “maybe” and adding questions, to help your site visitors feel as though there is a human on the other side.
08. Julie Bonnemoy - Animated 404 page
This design portfolio by freelance designer Julie Bonnemoy is a real feast for the eyes. The 404 page is almost identical to the homepage design, just with different text. This means that you can fluidly navigate to any of the other sections, barely noticing that you’ve reached a 404.
If you decide to design your homepage and 404 page in a similar style, you can experiment with adding certain elements to create an engaging experience. Play around with animated elements on your site, add transparent videos and unique vector art illustrations.
09. OkCupid - Tranquil 404 page
Dating network OkCupid hasn’t tried to hide its main goal: encouraging site visitors to sign up to its service. While this prominent CTA (call-to-action) is very direct in its approach, it’s paired with a delicate font and soothing underwater visuals that gently drift across the screen. Together, these form an overall balanced look that is far from pushy.
Another tip is to center your 404 page design around calming hues, so as to assure customers that while the page may be missing, they’re still on the right track. OkCupid’s shade of blue evokes both tranquility and a sense of trust - a wise choice for a 404 page. It’s worth looking into color psychology to find the right hue for your design.
10. Lego - Friendly 404 page
Lego has used a familiar character for their 404 page design, helping to connect the audience to the brand and create a friendly atmosphere. Their conversational style of text is also reassuring, keeping the tone light and playful, with exclamation marks and everyday language.
If you’re also going for a humorous 404 page, make sure to keep it functional, like Lego has done here, offering alternative navigation options. They’ve emphasized the CTA button with a white background that makes it pop. By keeping the menu on show, both in the header and footer, site visitors can easily reach additional pages.
11. Ueno - 404 page with creative copy
Digital agency Ueno has created a few variations of their fun, lighthearted 404 page. The animated hot dog seemingly running for its life is enough to bring a smile to anyone’s face. But merged with the witty text on the left, site visitors will be glad they stumbled upon this missing page.
Ueno has combined comedy with a precise, minimalistic design. If you include humor in your 404 page, make sure to balance it out by maintaining a professional look that abides by the principles of design. The use of white space, a minimal color palette and textual hierarchy helps the brand achieve a professional tone.
12. Figma - Engaging 404 page
While this may at first appear to be a classic black-text-on-white-background design, it’s far from that. A closer look will reveal the possibility to play around with the text, making for a somewhat addictive interactive game and giving a glimpse into the nature of the product itself.
Figma has also incorporated many different navigation options, including menus on both the top and bottom of the page. Potentially frustrated visitors can easily access the page they’re looking for by clicking on one of the many menu items.
13. MailChimp - Heartwarming 404 page
Implementing an illustration style that sits in a perfect spot between childlike and emotive, MailChimp definitely knows how to cushion the somewhat disheartening situation of landing on a 404 page. They’ve included a large button that stands out, being the only colored element and situated right in the middle of the page.
However, what makes this 404 page truly special is the sensitivity with which each element has been created. The image of the donkey with its head in a hole, desperately searching for the page the visitor was looking for, is moving in itself. But when combined with the poetic language and the font pairing of a serif with a sans-serif font, the overall effect is touching and uplifting.
14. Wade and Leta - Weird and wonderful 404 page
This unique design by creative duo Wade and Leta stands out from the crowd. Like the rest of their x it’s personal and weird in all the right ways. They’ve included a short looped gif of Wade chatting away in a supermarket aisle and making a hand gesture that seems unrelated to the issue of the 404 page.
It does, however, bring up a smile, which is no doubt a positive outcome of reaching an error page. The large in-your-face text is not only a web design trend, but also serves to bluntly inform you of the issue in a stylish, unapologetic way.
15. Wix - Clean and concise 404 page
We couldn’t help but include this one. And not just because it features an incredibly fluffy cat. While this feline friend certainly wins on cuteness, it also serves to subtly suggest that the site visitor may have mistyped the domain name (either that, or some paws are to blame).
Other than the visual aspect, this error page offers useful links that will guide the visitor to their desired location. The text is concise and to-the-point. Merged with a simple website color scheme, made up of a large white background, as well as a touch of gray and black, the page's web design evokes a sense of calm.
