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
Four-O What?
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.
Offering Assistance
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.
The Art of Distraction
You know it’s coming, but I guarantee you’ll still punch in the wrong command a few times to hear it nouveller.com/404 (good job @BenjaminReid and @iamkeir–thanks for the suggestion David Darnes).
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.
Kittens. Thank you nclud.com.
Hover over this owl built with HTML and CSS..
Providing Amusement
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.
More GIFs, more violence, from www.bloomberg.com/404. Thanks to Luke Meehan for this suggestion.
Swearing elephants on gradle.com/404.
Self-deprecation from Hillary and Donald www.hillaryclinton.com/404.
Some amusing copy from email newsletter platform www.getrevue.co/404.
This is a nice one from plunkus.com/404 (make sure you have your volume up, or you’ll miss the sound of a defecating cow.)
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/.
Pleasing Aesthetics
Calming and attractive, from Tubik Studio.
Illustrations, like this one from carbonmade.com/404, will always make me forget any frustrations I have.
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.
Built by Tiffany Rayside with Google fonts and a whole bunch of CSS. Nothing else.
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.
Sincere Apologies
Apologies from the team at castle.io/404.
Likewise from Litmus litmus.com/404.
A Touch of Personality
Biased? Perhaps, but I’ve always loved the animated computer terminal seen on our own 404 webdesign.tutsplus.com/404. Nice one Jacob!
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.
This, from fusion.net/404. I’m sure it means something.
Momentary disorientation from www.fuzy.pl/404.
And then there’s Collis.
Wrapping up
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.
