If you're starting a blog or website, don't forget the all-important 404 page – a standard response code in HTTP telling the user, in effect, that they've clicked on a broken link.
It's traditionally been an immense source of frustration. But in recent years, creatives have taken up the challenge of designing bespoke 404 pages that use humour, great UX or beautiful design to at least sweeten the pill of finding out that 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 create your own.
Some people can take things just a little too much to heart. Pixar's 404 page, featuring Sadness from 2015's 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. Fox Movies
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 random cult movie clip, 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.
03. 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 sound useful, they're not exactly fun, which we guess is why the company has had so much fun with 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. We appreciate the way it keeps its jokes topical, using a data-driven map of reported crimes in Atlanta to illustrate the fact that you're way off the map. "Why? Because it’s a crime you haven’t hired us yet!" is its cheesy punchline. Ah, these whacky data analysts.
05. The Australian
Australian national newspaper The Australian, owned by Rupert Murdoch's News Corp Australia, has redesigned its 404 error page. And what a corker it is. 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.
Hosting company Kualo has been in business for over 15 years – an eternity in internet time – and its 404 page reflects its venerable status, treating you 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 to enhance visitors time on our site and specifically their interaction with our error page."
07. The Useless Web Index
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: video of meerkats, doing meerkat peering and stuff for your amusement.
09. 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.
10. Dan Woodger
Some 404 pages are technical masterpieces, and some – specifically Dan Woodger's, which features a drawing of a cheeseburger on roller skates – are not. But while it might not push any technical boundaries, it does give you a clear idea of Dan's style, and encourages you to click through to the rest of his work.
Even though we have a copy of Adobe Illustrator 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, in which the big 404 is rendered in vectors that you can reshape to your heart's content.
12. 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 in response to mouse movements. Seriously cool.
This 404 page from couch-surfing behemoth Airbnb features a delightful animation that holds lessons for us all about the inadvisability of dropping ice cream. It also brings to mind stories about people who have rented out their homes on Airbnb, only to come back to a disaster area. Look, if you drop ice cream on the floor, clean it up, right?
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 proves that you don't need a lot of technical-sounding text to get your error message across.
15. Falvey Memorial Library
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).
Coding website GitHub is the home of geeks, and what better way to appeal to geeks than through a simple Star Wars parody with parallax effect when you move your mouse? GitHub also has a nice 500 page for when the server breaks.
17. CSS Ninjas
The web design world loves ninjas. Falling in with the trend (and, we guess, its name), the 404 page for CSS Ninjas features a clean, simple illustration that reflects the site's general approach to design.
The designers at ultra-hip email newsletter service MailChimp have morphed the company's well-known monkey into a Hulk-type character – complete with animated smoke – to signify a broken link. The style of the 404 page fits the rest of the site design nicely, reflecting the same lighthearted approach that turns an otherwise boring task into something fun and endearing.
When you're an international airline known for chic styling and expectations of high quality, you don't want a sub-par 404 page. Luckily for Emirates, its page ties in beautifully with the rest of its website, nailing its brand voice to a tee and providing ample opportunities to get back on track with ease.
Tomas Panek at Emirates tells us: "We felt like our 404 shouldn’t be left behind. So we redesigned the page trying to keep our 404 on brand. That’s why we wrote copy around our aviation terminology and on top of that, 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." Great UX; great customer service.
20. Repair Pal
Proving that 404 error pages don't have to be funny to be well done, US auto repair company Repair Pal uses beautiful imagery to brilliant effect. Like the Emirates error page, it also provides large buttons and a search box to help users to find the content they needed nice and quickly – much more user-friendly than the bog standard home page button offered by most.
"Stumbling on a 404 page can be a frustrating experience, so we wanted to take a lighter tone from the start," the design team tells us. "The team landed on the nighttime van photograph as a no-brainer to relating back to the automotive nature of the site. We went through a few variations on the text, but our team ultimately went with 'Off The Grid,' as it's easily understood and relates to being out in the wilderness of our website. It also still serves a functional purpose as it provides a few, quick links back to our most popular pages."
Next page: More brilliant 404 pages…
Everipedia is a wiki site that has a vision to become "a pillar of the Internet, by connecting people to information about anything and everything," its executive editor Romi Ezzo tells us. With its information-sharing purpose in mind, "We thought we could give people a much more relevant user experience by helping people learn about 404 errors if they ever came across one on our site," says Ezzo, who sent us this GIF to illustrate the 404 error page in action. Telling you everything you need to know about 404 pages, it's pretty meta, and totally in keeping with the site's aims.
The free ringtone-making service's 404 page features a beautifully rendered illustration of London, including the obligatory red bus and telephone box, as well as Big Ben's Tower, Sherlock Holmes and a hint of Tower Bridge. The site's worth a visit just for the brilliant artwork.
23. Bret Victor
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?
Duoh is the collaborative partnership between illustrator Veerle Pieters and partner Geert Leyseele. Their business is based on strong design principles, so you'd expect a well-realised 404 page – and they don't disappoint. In characteristic bright colours and negative space, this page looks and feels in keeping with the rest of the site.
Link shortening service Bit.ly needs a special URL for its 404 page as bit.ly.com/404 has already been used as a shortened link. The page itself features a cute little creature bobbing up and down in an interactive sea, and responds to your mouse movements.
This letting agent website’s 404 page features a strange interior shot with a sheep sitting on the lavatory. Creative and wacky at the same time, it’s a great (if abstract) example of how to do it well.
Replacing the Escher-esque impossible box that adorned its 404 page for years, DropBox has gone for a similarly quirky illustration to represent things all going wrong – the wheels coming off, if you like. It's a nice, simple hand-drawn illustration that gets the message across well, with plenty of helpful navigation links for usibility.
The last thing you want to find when you're looking for love is that it can't be found, but 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.
29. Walk with You
This simple illustrative design for a site promoting life coaching uses existing assets from the overall site design, including a waterfall, to convey the 404 message. Bold typography makes this page work well.
One of the best examples of a newspaper metaphor, Dave Barton’s personal site manages to inject a little humour into its error message.
Starbucks, like Heinz, makes good use of its primary product to illustrate the 404 message. In this instance, the tell-tales signs of a missing coffee cup are used to tell the story.
32. Blizzard Entertainment
Video game developer Blizzard takes an original approach to its 404 page that fits in with its general style, using broken glass as a metaphor for the broken link. What makes this example stand out is the clean design aesthetic beneath the glass.
The US’s National Public Radio website’s 404 page presents an amusing wiki-style list of missing people or things, from Amelia Earhart to your luggage.
The superb tips, tutorials and advice blog CSS-Tricks is loved by all in the web design community because despite its dry subject matter, it manages to exude enthusiasm, humour and personality. And this cheeky 404 page is an excellent example of that.
Magnt enables you to create a business card-themed web page in minutes. Its clever 404 page demonstrates the company's keen sense of wit with its Venn diagram showing the two main reasons why you've landed on the site’s error page: “we broke something” and “you can’t type.”. At the same time it also provides a clear call to action to take you where you need to go.
- 11 web design tools you can't live without
- 20 web designers to follow on Behance
- The pro's guide to UI design