404 error pages are a great opportunity to show off a website’s personality, whilst offering help to potentially confused users. If you’ve launched a website without having considered error pages, you should address that right away.
This is a rapid fire, fun look at 404 pages from around the web–and we’re going to categorise them as follows:
- Offering Assistance
- The Art of Distraction
- Providing Amusement
- Pleasing Aesthetics
- Sincere Apologies
- A Touch of Personality
To learn more about how to serve custom error pages, take a look at .htaccess Files for the Rest of Us by Dan Wellman. For WordPress specifically, try How To Create A Simple 404 Error Page For WordPress Themes.
Perfectly functional, exactly what you want from www.gov.uk/404.
Crystal clear message from www.designernews.co/404.
Functional from Foursquare foursquare.com/404.
Netflix, showing that they don’t need to bother with extraneous bells and whistles www.netflix.com/404.
To be brutally honest; I would have expected uxpin.com/404 to offer some route to continue onwards. They provide a way for users to report broken links, which is great, but the flow is still interrupted by a lack of search input or home link.
Invision arguably do a more thorough job of the same approach, including a way forward at the very least www.invisionapp.com/404.
Airbnb's 404 page offers all the links you need on the left with a simple and minimalistic animation on the right. Clean, clear and simple enough to help navigate the user back to the website.
A similar minimalistic yet creative approach by Dropbox. dropbox.com/404
The Art of Distraction
Oh no, I was hoping to find–wait, are those bézier handles?! www.figma.com/404.
There’s really only one reason you’d be visiting the 1403 Vintage Mono Pro website anyway, so why not test out the typeface if you come unstuck? 1403.slantedhall.com/404.
Hover over this owl built with HTML and CSS..
Vincent Vega’s having trouble finding where he’s supposed to be on 9gag.com/404.
Great animation from marvelapp.com/404.
If you’re a fan of the I.T. Crowd (you are, right?) I won’t need to tell you what’s going on in this GIF. Check out www.larkef.com/404 for the original.
Zombie shows a nice, animated, rotting hand. Very atmospheric.
Swearing elephants on gradle.com/404.
Some amusing copy from email newsletter platform www.getrevue.co/404.
Teehan+Lax are no longer active as an agency, but happily their 404 lives on. T+L loved injecting humour into their personal products; this error page is no exception, taking inspiration from “awkward family photos” www.teehanlax.com/404/.
Now tell me this pixar.com/404 message didn't make you smile.
Staying true to brand identity, The New Yorker Never fails. newyorker.com/404
Calming and attractive, from Tubik Studio.
Slack point out that this delightful scrolling scene probably isn’t the place we were after. Though with its gambolling rabbits and cheerful flora I don’t really have a problem being there slack.com/404.
GIF magic and Pacman from Arthur MB.
The Emerald 404 pages collection comprises 24 variants, all of which are straight forward and get to the point.
RPZ is a collection of two page designs, each with four colour alternatives. Simple and clean.
Apologies from the team at castle.io/404.
Likewise from Litmus litmus.com/404.
An apology with the practical reason from Lego lego.com/404
Starbucks says sorry and provides a reason as to what went wrong and what you can do let. starbucks.com/404
A Touch of Personality
Fork CMS, taking advantage of a classic brand/pun combination www.fork-cms.com/404.
Recognize these footprints? foundation.zurb.com/404
This highly stylized flight ticket “lost in the clouds” is a great way of presenting a 404 error.
Great sentiment from Adidas–what else would you expect from one of the world’s biggest motivators? www.adidas.co.uk/404.
MailChimp, those masters of adding personality to products, use their mascot Frederick von Chimpenheimer IV in the event of a missing email campaign us1.campaign-archive1.com/404.
I think we know whose 404 this is, right? www.facebook.com/404.
IMDb.com/404 turned some well knowns movie quotes to website quotes. There are a few there so each time you land on the 404 it's a different quote.
These examples should inspire you to get creative with your own 404 error pages. Remember:
- Offer assistance–ideally a way forward, such as suggested links or a search input.
- Use distraction if you feel it’s appropriate (your users may well be frustrated at having reached a 404 error).
- Provide amusement (again, if it’s appropriate) and keep the language human.
- Offer a touch of personality.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post