25 great designed 404 error pages

By Focusoncode June 18, 2018

What is a 404 Error?

A 404 error is a standard HTTP error message code that means the website you were trying to reach couldn’t be found on the server. It’s a client-side error, meaning either the webpage was removed or moved and the URL wasn’t changed accordingly, or the person just typed in the URL incorrectly.

Check out 24 of the most creative 404 error pages we’ve seen that are sure to delight anyone who comes across them.

1.Lego

Lego can do no wrong in our eyes. 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.

2. Airbnb

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.

3.Audiko

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.

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

5. LimpFish

One of the best examples of a newspaper metaphor, Dave Barton’s personal site manages to inject a little humor into its error message.

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

7. CSS-Tricks

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, humor and personality. And this cheeky 404 page is an excellent example of that.

8. DropBox

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.

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

 

10.Bit.ly

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.

 

11.MailChimp

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.

 

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.

13.Figma

We’re entranced by Figma’s 404 page, in which the big 404 is rendered in vectors that you can reshape to your heart’s content.

 

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

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

16.Pixar

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.

17.Kualo

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.

18.Cloud Sigma

Check it out: Cloud Sigma’s letting us in on some behind-the-scenes action. Their 404 error page cleverly pretends to be a “junior developer’s homepage” — that junior developer being, well … a cat.

19.Good Old Games (GOG)

For other websites, you unwrap and there’s … the galaxy. That’s actually a clever reference to GOG Galaxy, which is GOG’s native video game client. Thankfully, a little video game character is there to give visitors a place to go report an error if they want.

 

20.Cooklet

Cooklet’s error page is simple and delightful in design and copy. Shoot, I wanted a piece!

21.Hoppermagic

Hoppermagic’s error page is similar to LEGO’s by showing a fictional reason for why the page is broken. This time, it’s rabbits nibbling the cables — a nod to their rabbit logo.

 

22. IconFinder

Don’t you hate it when web pages get lost in space? IconFinder’s error page is simple but delightful. The animated emoji wearing a spacesuit appears to be catapulted further and further into space the longer you stay on the page.

 

23.Behance.net

For any stranger things fan, this page would take them back to the ‘the upside down’, and make them feel like they belong in a community that is quite universal. And everyone loves to ‘belong’ somewhere.

24.Marvel

I know you are thinking of the Avengers, but this Marvel is a prototyping web and mobile app. In last decade we have moved from simple text to GIFs and from simple images to videos, but in terms of communication, one of the most effective methods has got to be animation.

 

Share This

Leave a Comment

Your email address will not be published.