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 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.
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).
04. 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.
06. 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.
07. 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 time of writing, the clickable text leads to another, less well-designed 404 page.
08. 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.
11. 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 – see for yourself.
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."
14. 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.
Next page: More inspiring 404 pages to explore
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.
17. 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.
20. 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.
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?
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…
Audiko is a free ringtone-making service (surprised these still exist? Us too). Its 404 page is a delightful surprise, featuring a beautifully rendered illustration of London, including the obligatory red bus and telephone box, as well Big Ben, Sherlock Holmes and a hint of Tower Bridge. Even if you don't want to … ahem… design your own ringtone, the site's worth a visit for the brilliant artwork.
24. Bret Victor
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.
30. Blizzard Entertainment
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".
The US's National Public Radio website offers a fresh approach to 404 pages. It reassures the visitor they're in good company by presenting a list of other well-known people and things that have got lost. In a smart move, you can click through to access an audio clip and article on each item.
The tips, tutorials and advice blog CSS-Tricks has plenty of personality, and its 404 page is no exception. To contrast techy subject matter, the designers have gone for an analogue-style look. How did that tear get in the site? Also, appropriately for a site aimed at coders, the page provides a link where visitors can let the site owners know if they think it's them that have made an error.
Website builder Magnt subtly pokes fun at its visitors on its clever 404 page. A Venn diagram explains the two main reasons why you could have landed on the site’s error page: 'We broke something' or 'You can’t type'. Some well thought-out copy and a clear call to action to take you back to the homepage keep things usable.
- The best painting and drawing apps
- The best free fonts for designers
from Creative Bloq http://www.creativebloq.com/web-design/best-404-pages-812505