Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Sorry About This: 40 Examples of 404 Pages

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Best Photography Portfolio Themes for WordPress
Current Web Design Trends: Full-on Full Screen Home Pages

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. 

Uxpin 404

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. 

Airbnb

A similar minimalistic yet creative approach by Dropbox. dropbox.com/404

Dropbox 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.

Hover over this owl built with HTML and CSS..

Amazon created this awesome theme, Meet the dogs of Amazon and displays this link to their blog on the 404 page, amazon.com/404. Each time you land on the 404 page it's a different dog featured. 

Amazon 404

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.

Bloomberg-404

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. 

Pixar 404

Staying true to brand identity, The New Yorker Never fails. newyorker.com/404 

The New Yorker 404

Pleasing Aesthetics

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.

Sincere Apologies

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

Lego 404

Starbucks says sorry and provides a reason as to what went wrong and what you can do let. starbucks.com/404

Starbucks 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.

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. 

IMDb 404

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.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.