10 min read
The best 404 page designs
When designing a website, the 404 page may not be your first priority, and hopefully your users won’t often encounter it when browsing your website. But a 404 page can be a very effective way of conveying your brand identity, entertaining visitors in a clever way which will seep them from clicking away in frustration. Of course, you’d prefer your visitors to stay way from this page but adding your brands personality through the use of a clever design is a way of adding a silver lining to an error.
We’ve put together a list of some of our favourite 404 pages which use innovative UX, stunning designs and even a little humour thrown in there for good luck.
Let's start with our very own 404 page, we decided to use a minimal design emulating the homepage hero design with a clever little illustration of our studio dog.
Check out the MadeByShape 404 page
Netflix has a vast amount of content to pick from for their 404 page, and it has included a clever full page still from one of their feature movies, Lost in Space.
Check out the Netflix 404 page
A footwear store based in Milan, Italy. Their website features a load of cool UI design touches, which extend to their 404 page. This features some quality photography with a quirky touch.
Check out the Volta Footwear 404 page
As seen in many others, Tripadvisor uses a simple 404 page with a brand specific illustration of someone pulling a suitcase, with some clever copywriting to support the image. The animations adds a little personality to the page. also.
Check out the Tripadvisor 404 page
So you've landed on the wrong page, where do you go from here? The web agency Orange Goat have taken their time to create a funny little flowchart which asks how you arrived at the 404 page. It's funny, unique and we absolutely love it.
Check out the Orange Goat 404 page
Marvel have multiple versions of their 440 pages, which are all themed around the MCU. Check out the Marvel 404 page, and be sure to give the browser a couple of refreshes to see which ones you get.
Check out the Marvel 404 page
This 404 page has a lot of character, featuring a very on-brand illustration of a burger carrying a flag which reads 'Sorry'. It's simple, quirky and has a unique feel to it.
Check out the Dan Woodger 404 page
Disney uses one of their most popular character for their 404 page, it features a shocked looking Mike Wazowski from their classic hit, Monsters inc.
Check out the Disney 404 page
The Lego 404 page is quite minimal in design, but exudes personality. The Lego man’s expression, plus a push on one of their brand tagline ‘Everything is still awesome’ creates an error page we're sure you’ll like.
Check out the Lego 404 page
Help Scout's 404 page features a large dog illustration and some nice copy for their 404 page. Their 404 page offers links to their blog and other useful posts to help the user get to where they want to be.
Check out the Help Scout 404 page
Another minimal one, but effective. This 404 page features illustrations based on MailChimp's branding.
Check out the MailChimp 404 page
A minimal design, with a clever play on worlds for the Omelet's 404 page. The page features a sub heading 'this page is eggstinct' as an animated egg crack appears on the screen.
Check out the Omelet 404 page
It may not look like a inspirational design, but this page is great for SEO, it's packed full of links, articles and videos.
Check out the Redbull 404 page
DropBox have gone for the 'less is more' kind of feel with their illustrative themed 404 page, it's nothing special, but show's some thought went in to creating the page.
Check out the DropBox 404 page
Arriving at a 404 page can be annoying, so the 404 page for link shortening service Bit.ly features an illustration of a female meditating in an attempt to restore calm with the user, the page also reminds teh user that links are case-sensitive.
Check out the Bit.ly 404 page
Zillow have used customer data to learn that they are predominantly pet lovers. It's because of this they have used a 404 page which has a nice, minimal full page gif of a cat in a home.
Check out the Zillow 404 page
CoSchedule, a marketing scheduling tool, keeps it simple with a cute GIF of dogs sat lounging on beech chair, with useful links to their blog, and homepage.
Check out the CoSchedule 404 page
This 404 page from Mantra Labs is simple yet effective. A full page space back drop with an illustration of a person floating in space in to the '404' with the text 'Oops! You ran out of oxygen'. This page also features a count down to you being redirected back to the sites homepage.
Check out the Mantra Labs 404 page
Video game developer Blizzard kept it simple when creating this page, it features an animated character which grabs the users attention with the message 'We've dispatched a rescue murloc to guide you back to safety'
Check out the Blizzard Entertainment 404 page
This car buying comparison site which helps you find the prefect car, but when you go off course, there's a clever little on-theme game to keep you amused whilst on their site. Visitors are presented with an 8-bit game which is a simple but very addictive game (trust me, I've spent some time on it)
Check out the Carwow 404 page
A very on brand 404 page, using the companies illustration style to give their 404 page a quirky twist. It features a hot dog running and dodging oncoming items. There are also several different hilarious explanation messages to explore if you fancy refreshing your browser a few times.
Check out the Ueno 404 page
Gymbox is a fitness studio that aims to offer "the most unique and diverse classes in London". Their 404 page features a brilliant 80's fitness video featuring short shorts, crop tops and pelvic thrushing. What more could you posibly want from a 404 page 😅
Check out the Gymbox 404 page
Moz keeps it simple with a feature from the brand's mascot, Roger Mozbat.
Check out the Moz 404 page
We're not too sure where the idea may have come from for the Slack 404 page, but we enjoy it. It features a very illustrative scene featuring mountains, rainbows, chickens and pigs. The screen also scrolls horizontally with your mouse movement.
Check out the Slack 404 page
Purée Maison is a agency specialising in communication strategy, and their website is full of animated character illustrations (we'd highly recommend you check it out). It's no surprise that the 404 page features a quirky, fun animation of a character hitting a 'digital wall'. It's fresh, fun and we absolutely love it!
Check out the Purée Maison 404 page
Pixar's 404 page features 'Sadness' from their 2015's hugely popular 'Inside Out'. The minimal, no thrills design simply does the job. The character's expression represents a users reaction to hitting a 404 page.
Check out the Pixar 404 page
Another one which utilises the use of a very on brand illustration with some clever copy. This one is very similar to our very own 404 page, and we absolutely love it.
Check out the BigCommerce 404 page
A 404 page which features full screen snippets from a cult movie, with a caption and selection of films you may like to view next. We've spotted snippets from some of their most popular, classic films like Edward Scissorhands, Revenge of the Nerds and Napoleon Dynamite. Check out their 404 page and see what you get.
Check out the 20th Century Studios 404 page
Cloud Sigma is a cloud server and cloud hosting service operating in the US and Europe. While cloud servers are useful, they're not exactly fun, which is probably why they have made a little extra effort in creating a quirky 404 page.
Check out the Cloud Sigma 404 page
A minimal 404 page, with a difference. This page has a colour slider below the text which allows the user to drag to a colour then search the Dribbble website for designs based on that colour. Quite a nice feature, and helpful for someone wanting to browse the site.
Check out the Dribbble 404 page
This one is one of my favourite illustartion based 404 pages, Kinsta, a cloud-based WordPress hosting company have created a pretty detailed full screen illustration of a girls trying to find where she's going.
Check out the Kinstra 404 page
Overflow’s brand personality is at the forefront of this 404 page. They've created a variation of their logo mark to show the user is lost, with some casual, down-to-earth copy.
Check out the Overflow 404 page
Another site which uses humour for their 404 page is Atlanta-based data strategy consulting firm BluePath. The design isn't brilliant, but the idea is there.. it features a map of Atlanta, with a dot on the side of the page reading 'Wayyyy off the map'
Check out the BluePath 404 page
Fashion brand Lazy Oaf has used a distinctly hipster approach to their 404 page. It features a few quirky lines 'happy 404', 'shit happens' and 'this link is dead' in fun boxes giving you some reasons you may have landed on the error page.
Check out the Lazy Oaf 404 page
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.
Victoria Spicer is a set designer and prop stylist based in London. SO as you'd expect, her website is packed full of beautiful photography, including her 404 page. It features a
Check out the Victoria Spicer 404 page
This one's a really cool one, Figma's 404 page featured an interactive heading made up of a load of anchor points and Bézier curves. This is a cool little feature which allows you to reshape the 404 text.
Check out the Figma 404 page
If you're a Harry Potter fan, you'll know that Harry gets lost when ehe uses the Floo powder for the first time. This 404 page features an image from the scene where harry comes out of the fireplace where he accidentally transported himself. This is a brilliant and quirky idea with a nod to all Harry Potter fans.
Check out the Wizarding World 404 page
The 404 page for Airbnb features a minimal animation of a girl who drops her ice-cream on the floor. Airbnb have a brand built on their reputation of being personable and friendly, and this 404 page fits that brand perfectly.
Check out the Airbnb 404 page
Hot Dot have applied their 'where design meets technology' tagline and carried it across to their 404 page, it features the three numbers made up of lots of tiny dots which move and change direction based on the users mouse movements.
Check out the Hot Dot Productions 404 page
The online platform for videos and memes, uses a very on-brand GIF for their 404 page offering a link to direct users to their app.
Check out the 9GAG 404 page
The casual copywriting language reflects the brand feel, and the link back to the homepage helps the user to get to where they want to be.
Check out the Flywheel 404 page
Hiya, I'm Mike - Web designer at Shape. My articles usually consist of design related stuff.
