A 404 page, if you don’t know, is a standard response code in HTTP telling the user, in effect, that they’ve clicked on a broken link. If you’re designing a website, you’re going to need one. 404 error pages have traditionally been an immense source of frustration, but in recent years, creatives have been using them as an opportunity to add something to the site. More and more, we’re seeing bespoke 404 pages that use humour, great UX or beautiful design to sweeten the pill of finding you’re in the wrong place.
Done really well, a 404 page 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 keenness for customer service or unique approach to design. 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.
- 1 01. Pixar
- 2 02. Matteo Vandelli
- 3 03. 20th Century Fox
- 4 04. Cloud Sigma
- 5 05. BluePath
- 6 06. Marvel
- 7 07. The Australian
- 8 08. Kualo
- 9 09. The Useless Web Index
- 10 10. Waaark
- 11 11. Steve Lambert
- 12 12. Dan Woodger
- 13 13. Figma
- 14 14. Airbnb
- 15 15. Hot Dot Production
- 16 16. Lego
- 17 17. Falvey Memorial Library
- 18 18. GitHub
- 19 19. CSS Ninjas
- 20 20. MailChimp
- 21 21. Emirates
- 22 You will like these Articles / Tutorials / Recipes
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.
02. 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.
03. 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. Ironically, at time of writing, the clickable text leads to another, less well-designed 404 page.
04. 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.
07. The Australian
Australian national newspaper The Australian, owned by Rupert Murdoch’s News Corp Australia, has a corker of a 404 error page. Poking fun at politicians’ language, personas and public mess ups, it invites you to select a politician to explain away the error like only a politician can. This one is on-point and lots of fun.
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.
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.”
Even the world’s largest index of useless websites can have an off day. And when the Useless Web Index can’t find what you’re looking for, it’s ready with the next best thing: a photo of meerkats, doing meerkat peering and stuff for your amusement. The 404 error page is beyond compare.
11. Steve Lambert
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.
12. Dan Woodger
Some 404 pages are technical masterpieces. Others are just a drawing of a cheeseburger on roller skates. But while Dan Woodger’s 404 page might not feature any bells and whistles, it does give you a clear idea of his style, and encourages you to click through to the rest of his work.
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.
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.
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.
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.
Villanova University’s Falvey Memorial Library in Pennsylvania may not have international stardom, but it does have dragons. Created by Laura Bang and Chris Hallberg, this 404 page just makes you smile with its amusing “Careful!” title and clear instructions and options to get you back on track and away from these dangerous beasties (don’t worry, they’re just beautiful illustrations from a library book).
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.
19. CSS Ninjas
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.
Ultra-hip email newsletter service MailChimp has recently undergone 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?
When you’re an international airline known for chic styling and high quality, you don’t want a sub-par 404 page. Luckily, Emirates’ error page ties in beautifully with the rest of its website, getting its brand voice down to a tee and providing ample opportunities to get back on track with ease.
Tomas Panek at Emirates explains the company didn’t want to leave its 404 behind, so redesigned it to keep it on-brand, complete with aviation-themed copy. The team also put a particular focus on UX. “We looked into analytics to see where people usually go after landing on 404, and based on the findings, we added four CTAs to help our customers,” says Panek.
Next page: More brilliant 404 pages…