A 404 page is what pops up when you try to access a web page that doesn't exist. If you're designing a website, you're going to need one. They're traditionally an immense source of frustration, but the best 404 pages turn the situation to the designer or brand's advantage.
More and more, we're seeing bespoke 404 pages that use wit, clever UX or beautiful design to sweeten the pill of finding yourself in the wrong place. Whether its some thoughtful CSS animation, a cool parallax scrolling effect, or just some smarter-than-your-average copy, there are plenty of ways to liven up your 404 error pages – as these examples prove.
The best 404 pages can become a mini-ambassador for the website itself. It might even be shared on Twitter or relevant blogs as an example of the site's commitment to customer service or unique design style. The 404 error pages we present here have achieved all this and more, so take a look and be inspired to think outside the box with your own.
01. Color of the Year
Image: Color of the Year
This site is dedicated to everything to do with PANTONE's Color of the Year. Everything about it has been beautifully designed, including its 404 page. The site goes into an impressive amount of depth, with sections on relevant colour systems, suggested palettes, and examples of the shade in use. Meanwhile, the 404 page takes a smart-but-simple approach. There's a short explanatory message and a swatch of PANTONE shade 404, which is a delightfully appropriate grey-brown, to match the user's mood when finding themselves there.
Ueno is a full-service agency with a standout 404 page. What you're seeing above doesn't capture the full effort that's gone into it: the hotdog is animated so it runs in an infinite loop through a surreal landscape, and there are several hilarious explanatory messages to explore. It's bonkers and totally unique – visit the error page here.
Android turns getting lost into a fun experience with its gamified 404 page. Tiny worker Android Bots shoot out doughnuts, jelly beans and marshmallows, and the user spins the cogs to direct them into the correct tube. Sporting a simple, cute and on-brand design, this game is as addictive as the sweets being sorted. Check it out here.
Gym Box is a gym company that aims to offer "the most unique and diverse classes in London". The limits of that claim might be the kind of magnificent '80s fitness spectacle that appears on its 404 page. Short shorts, crop tops and pelvic thrusting – what more could you want from an error page?
It's only a slight exaggeration to say that Slack's 2019 logo update was met with widespread horror, and its super-saccharine 404 page is sure to have its fair share of haters too. Go wrong in Slack, and you're directed to a magical landscape of lush foliage, mountains and rainbows, where butterflies, chickens and tiny little pigs roam free. The scene scrolls horizontally with your mouse movement, too (try it here).
06. Purée Maison
Purée Maison is a creative agency specialising in communication strategy, and its characterful website is full of delightful animations (we'd recommend taking a look around). We're particular fans of this surreal 404 page, which somehow manages to perfectly capture the pain of hitting a digital wall.
Some people can take things just a little too much to heart. Pixar's 404 page, featuring Sadness from 2015's hugely popular Inside Out, is simple, straightforward and does the job. If it's representative of your reaction to getting a 404 error, though, then maybe you need to re-examine your life a little.
08. Matteo Vandelli
You don't need to be a major brand to put a bit of effort into your 404 page. We love this interactive example from graphic designer Matteo Vandelli. He's used the error page from his design portfolio as another opportunity to show off his creativity and design savvy. As the visitor mouses over the 404 text, it ripples and shifts like water. The effect is strangely mesmerising.
09. 20th Century Fox
Can't find the film you want? Fox Movies' site has a great way to inspire you for when you get a URL wrong; its 404 page pops up with a still from a cult movie, with a pithy caption and a selection of other films you might like to watch. We've spotted snippets from Edward Scissorhands, Revenge of the Nerds and Napoleon Dynamite, amongst others (take a look to see which one you get). Ironically, at the time of writing, the clickable text leads to another, less well-designed 404 page.
10. Cloud Sigma
Cloud Sigma is a cloud server and cloud hosting service operating in the US, Europe and Asia-Pacific region. While flexible cloud servers are useful, they're not exactly fun, which we guess is why the company has made a little extra effort to inject some humour into its tongue-in-cheek 404 error page. We wonder how long it'll be before this helpful-looking junior developer gets poached by the competition.
Another website to use humour on its 404 error page is Atlanta-based data strategy consulting firm BluePath. The page shows a map of Atlanta, with a dot on the other side of the page indicating the visitor is 'Wayyyy off the map'. In an extremely tenuous link, the map also includes data-driven info showing reported crimes in the area. "Why? Because it’s a crime you haven’t hired us yet!" Ah, these whacky data analysts.
Marvel keeps things solidly on-brand by basing its 404 error page on the universe's Watcher. Perhaps because Uatu isn't much of a looker (sorry), Marvel has decided to pander to visitors more shallow than ourselves and add his eye only, against the backdrop of Black Widow. Extra cool points for making the eye follow the visitor's cursor round the screen.
Web hosting company Kualo has been in business for over 15 years – an eternity in internet time – and its 404 page harks back to yesteryear by treating visitors to a game of Kualo-themed Space Invaders. It's not perfect. The key strategy of picking off the fleet's outer edges to slow the invaders' descent doesn't work, for starters. But it is fun, and it can earn you a discount on your hosting deal if you manage to score over 1,000 points. Play it here.
Its inclusion in this article has also inspired US pest control company Pointe Pest Control to include its own Pest Invaders game on its 404 error page, complete with different flying and crawling bugs to spray.
As Chloe Zollinger from Pointe says: "Reaching a 404 error page is most often frustrating for a site user. We understand how important user experience on a webpage is. To better our visitors' experience, our team dedicated themselves to creating an interactive game on our 404 page."
NSFW; put your headphones on first
New York-based artist Steve Lambert describes this as "the most awkward 404 not found page on the internet", and you know, he may well be right. It features an excruciating piece to camera that just goes on and on. We defy you to get to the end of his video without any part of your body clenching.
Next page: More inspiring 404 pages to explore
16. Victoria Spicer
Image: Victoria Spicer
Victoria Spicer is a set designer and prop stylist based in London. As you'd expect, her portfolio site is packed with beautiful photography, and her 404 error page is no different. It shows off her playful side while still keeping things looking polished.
Even though we have a copy of Illustrator CC right here, and could play with anchor points and Bézier curves literally any time we want, we're still entranced by Figma's 404 page. Oversized 404 text is rendered in vectors that you can reshape to your heart's content. Have a go for yourself.
This 404 page from Airbnb features a simple-but-delightful animation of an unlucky girl dropping her ice-cream on the floor. Airbnb has built its reputation on being personable and friendly, and this 404 page suits its brand image perfectly.
19. Hot Dot Production
Hot Dot Productions has applied its 'where design meets technology' tagline to its impressive 404 page, which features the three numbers made up of hundreds of tiny dots that change direction or disperse in response to the visitor's mouse movements. Seriously cool. Play around with it yourself here.
LEGO can do no wrong in our eyes (have you read our piece on how Lego reinvented itself as a super-brand yet?). We love this cute 404 page, which keeps things simple with some alarmed Lego figures and a jargon-free explanation.
You'd expect some tech wizardry from a website dedicated to code versioning. The 404 page targets a different kind of geeks with a simple Star Wars parody elevated by a smart parallax effect when you move your mouse. GitHub also has a nice 500 page for when the server breaks.
The web design world loves ninjas. Often as part of a self-styled job title. Falling in with the trend (and, we guess, its name), the 404 page for CSS Ninjas features a clean, stylised illustration that reflects the site's general approach to design.
In autumn 2018, ultra-hip email newsletter service MailChimp underwent a rebrand, and its 404 page has a new look to match. The new-look error page features on of the off-beat, naive illustrations around which MailChimp's new branding centres. And really, what says 'I'm lost' better than a donkey with its head in a hole?
24. Volta Footwear
Volta is a footwear store based in Milan. Its website includes plenty of cool UI design touches, and we like that it's not just gone for a standard 404 page, either. Good quality, dedicated product photography with a quirky touch – a miniature marble statue that nods to the flagship store's Italian home – help elevate this error page.
Computer scientist Bret Victor's 404 page, inspired of course by René Magritte's iconic painting, The Treachery of Images, confronts the viewer with some challenging philosophical questions. If this is not a page, then what is it? What constitutes a 'page'? Is it a thing that can be truly said to exist? What is the 'this' that this apparent non-page is referring to? Is anything truly real? Makes you think, no?
Another awesome, movie-based 404 error page can be found on the IMDb website. This comprehensive database of film facts has jazzed up its 404 page with iconic quotes from famous films, subtly edited to fit their new purpose. Take a look to see which one you get.
The 404 page for link shortening service Bit.ly features a cute Pufferfish bobbing upside-down in an interactive sea. The stranded fish responds to your mouse movements, and subtly animation details in the clouds and seagull help create a calming mood.
DropBox has replaced the Escher-esque impossible box that adorned its 404 page for years, with a similarly quirky illustration. We like to think of an abstract representation of everything going wrong – the wheels coming off. It's a nice, simple hand-drawn illustration that gets the message across well, with plenty of helpful navigation links for a top user experience.
The last thing you want to hear when you're looking for love is that it can't be found. Online matchmaking service eHarmony's 404 page softens the blow with the news that while the page you're after is unavailable, there are still about half a million fish left in the sea.
Starbucks makes good use of its primary product to illustrate its 404 message. In this instance, the tell-tales signs of a missing coffee cup are used to tell the story. There's also some jargon-free copy to help the user find what they were looking for.
Video game developer Blizzard takes an original approach to its 404 page. In it, the working website design appears to have become broken: the header navigation has dropped down and there's a smashed screen effect. There isn't much in the way of helpful links, with Blizzard instead opting for a no-nonsense error message: "This page doesn't exist or some other horrible error has occurred".
Read more: creativebloq.com