{"id":26640,"date":"2017-05-24T12:22:32","date_gmt":"2017-05-24T19:22:32","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/05\/36-brilliantly-designed-404-error-pages\/"},"modified":"2017-05-24T12:22:32","modified_gmt":"2017-05-24T19:22:32","slug":"36-brilliantly-designed-404-error-pages","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/05\/36-brilliantly-designed-404-error-pages\/","title":{"rendered":"36 brilliantly designed 404 error pages"},"content":{"rendered":"

If you’re starting a blog<\/a> or website, don’t forget the all-important 404 page \u2013 a standard response code in HTTP telling the user, in effect, that they’ve clicked on a broken link.<\/p>\n

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 at least sweeten the pill of finding you’re in the wrong place.<\/p>\n

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 36 we present here have achieved all this and more, so take a look and be inspired to create your own bespoke 404 pages.<\/p>\n

01. Kualo<\/a><\/h3>\n
\n

<\/p>

Prefer a bit of Pac-Man? Read on<\/figcaption><\/figure>\n

Hosting company Kualo has been in business for over 15 years \u2013 an eternity in internet time \u2013 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.<\/p>\n

02. The Useless Web Index<\/a><\/h3>\n
\n

<\/p>

This meerkat-based 404 page is incomparable<\/figcaption><\/figure>\n

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: meerkats, doing meerkat stuff for your amusement.<\/p>\n

03. Waaark<\/a><\/h3>\n
\n

<\/p>

Very NSFW; put your headphones on first<\/figcaption><\/figure>\n

French studio Waaark’s 404 page is nice enough to look at, but it’s better to listen to \u2013 although maybe not at work. Inspired by Stephen Hawking, the Hitchhiker’s Guide to the Galaxy and Portal, it uses a JavaScript text-to-speech tool called meSpeak to subject you to a sweary robotic tirade.<\/p>\n

04. Steve Lambert<\/a><\/h3>\n
\n

<\/p>

Yep, this is definitely awkward<\/figcaption><\/figure>\n

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 without any part of your body clenching.<\/p>\n

05. Dan Woodger<\/a><\/h3>\n
\n

<\/p>

Guys, it’s a cheeseburger on skates. What’s not to love?<\/figcaption><\/figure>\n

Some 404 pages are technical masterpieces, and some \u2013 specifically Dan Woodger’s, which features a drawing of a cheeseburger on roller skates \u2013 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.<\/p>\n

06. Figma<\/a><\/h3>\n
\n

<\/p>

Messing with vectors is so much fun when it’s not actual work<\/figcaption><\/figure>\n

Even though we have a copy of Adobe Illustrator<\/a> right here, and could play with anchor points and B\u00e9zier 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.<\/p>\n

07. South West Trains<\/a><\/h3>\n
\n

<\/p>

The regularity of this service is a little incongruous, to be honest<\/figcaption><\/figure>\n

It’s hard to resist \u00a0South West Trains’ railway-themed 404 page. The numerals are visualised in train tracks and a dinky little train comes rolling along every few seconds. All aboard!<\/p>\n

08. Bloomberg<\/a><\/h3>\n
\n

<\/p>

This one is absolutely bonkers<\/figcaption><\/figure>\n

Bloomberg’s 404 page initially looks pretty ordinary, until it suddenly pans out from the 404 error into a bizarre animation involving an off-the-shelf 3D model of a businessman smashing his broken PC into bits.\u00a0<\/p>\n

09. Bluegg<\/a><\/h3>\n
\n

\"404<\/p>

This noisy chap provides a hilarious notification that you’re in the wrong place<\/figcaption><\/figure>\n

The 404 page of creative and digital design agency Bluegg is simple, but so effective. Upon loading you’re greeted by a goat, which lets out an almighty high-pitched scream, alerting you that the page doesn’t exist. Warning: our inner child emerged. We must admit to playing this repeatedly while crying with laughter. Bravo, guys.<\/p>\n

10. Hot Dot Production<\/a><\/h3>\n
\n

\"404<\/p>

Hot Dog’s 404 page is seriously addictive<\/figcaption><\/figure>\n

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.<\/p>\n

11. Airbnb<\/a><\/h3>\n
\n

\"404<\/p>

If you drop ice cream on the floor, clean it up, right?<\/figcaption><\/figure>\n

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?<\/p>\n

12. Lego<\/a><\/h3>\n
\n

\"404<\/p>

Lego can do no wrong in our eyes \u2013 we love this cute little tableau for its website’s 404 page<\/figcaption><\/figure>\n

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.<\/p>\n

13. Magnt<\/a><\/h3>\n
\n

\"404<\/p>

Magnt’s clever 404 page demonstrates a keen sense of wit and a clear call to action<\/figcaption><\/figure>\n

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, while also providing a clear call to action to take you where you need to go.<\/p>\n

14. GitHub<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

What better way to appeal to geeks than through a simple Star Wars parody with parallax effect?<\/figcaption><\/figure>\n

<\/a><\/p>\n

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<\/a> for when the server breaks.<\/p>\n

15. Blue Fountain Media<\/a><\/h3>\n
\n

\"404<\/p>

Wanna play doubles, mate?<\/figcaption><\/figure>\n

It’s hard to get over the inevitable disappointment of coming up against a 404 page, but Blue Fountain Media has something that might just cheer you up \u2013 in the form of Pac-Man played out in a 404-shaped maze. We’ll be honest, the 404 shape doesn’t work that well (although it’s no worse than Google’s Pac-Man doodle<\/a>), but it didn’t stop us from giving this a thorough researching.<\/p>\n

16. CSS Ninjas<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

CSS Ninjas is another example of the web design world’s love of ninjas<\/figcaption><\/figure>\n

<\/a><\/p>\n

The web design world loves ninjas. Falling in with the trend, this 404 page features a nice, simple illustration that reflects the site’s general approach to design.<\/p>\n

17. Daniel Karcher Film Design Studios<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

This 404 page employs a beautifully rendered subway station complete with empty train that rolls in<\/figcaption><\/figure>\n

<\/a><\/p>\n

This site makes excellent use of animation and sound, and its 404 page employs a beautifully rendered subway station complete with an empty train that rolls in. As with many of the examples here, the page diverges from the overall site aesthetic to great effect.<\/p>\n

18. MailChimp<\/a><\/h3>\n
\n

\"404<\/p>

Don’t make the monkey angry…<\/figcaption><\/figure>\n

The designers at ultra-hip email newsletter service MailChimp have morphed the company’s well-known monkey into a Hulk-type character \u2013 complete with animated smoke \u2013 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 makes an otherwise boring task into something fun and endearing.<\/p>\n

Next page: More brilliant 404 pages…<\/strong><\/p>\n

19. Hakim El Hattab<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

These creepy eyes follow your cursor around the page<\/figcaption><\/figure>\n

<\/a><\/p>\n

A 404 page designed for net magazine by Hakin El Hattab<\/a>, this HTML5<\/a> experiment features creepy eyes that follow your cursor around the page with occasional blinking and narrowing of the iris. It’s brilliantly executed and nicely interactive.<\/p>\n

20. Tin Sanity<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

This dancing cup and straw screams its way across the page around the text<\/figcaption><\/figure>\n

<\/a><\/p>\n

Tin Sanity features an incredible animation of a dancing cup and straw that screams its way across the page around the text: “You just got 404’d”. The screaming is accentuated with a drumroll and funky bass soundtrack, all of which leaves an excellent impression.<\/p>\n

21. Audiko<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

This 404 page is worth a visit just for the artwork<\/figcaption><\/figure>\n

<\/a><\/p>\n

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.<\/p>\n

22. Bret Victor<\/a><\/h3>\n
\n

\"404<\/p>

This is not a page. It’s a picture of something that’s not a page. Or is it?<\/figcaption><\/figure>\n

Bret Victor’s 404 page, inspired of course by Ren\u00e9 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?<\/p>\n

23. Home Star Runner<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

This 404 page features amusing characters and shouts “404’d” at you<\/figcaption><\/figure>\n

<\/a><\/p>\n

Audio can be very effective when used in a 404 capacity. This error page for Home Star Runner, which features amusing characters, downloads and games, shouts “404’d” at you when you first arrive on the page. The hand-drawn illustration fits the rest of the site well in terms of style and theme.<\/p>\n

24. Duoh!<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Duoh uses bright colours and negative space in its 404<\/figcaption><\/figure>\n

<\/a><\/p>\n

Duoh is the collaborative partnership between illustrator Veerle Pieters<\/a> and partner Geert Leyseele<\/a>. Their business is based on strong design principles, \u00a0so you’d expect a well-realised 404 page \u2013 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.<\/p>\n

25. Bit.ly<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Bit.ly’s cute creature responds to your mouse movements<\/figcaption><\/figure>\n

<\/a><\/p>\n

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.<\/p>\n

26. ApartmentHomeLiving<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Why is a sheep sitting on the lavatory in this 404 error page?<\/figcaption><\/figure>\n

<\/a><\/p>\n

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.<\/p>\n

27. DropBox<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

DropBox has a very simple but effective 404 page featuring an Escher-esque impossible box<\/figcaption><\/figure>\n

<\/a><\/p>\n

DropBox has a very simple but effective 404 page featuring an Escher-esque impossible box. You can take this at face value, or see it as signifying the inside-out nature of having navigated to a non-existent page. It’s a nice, simple hand-drawn illustration that gets the message across well.<\/p>\n

28. Wufoo<\/a><\/h3>\n
\n

\"404<\/p>

Wufoo’s 404 page is a simple, static affair that uses the branding effectively to convey the message<\/figcaption><\/figure>\n

Form-building tool Wufoo’s 404 page is a simple, static affair that uses the branding effectively to convey the message. It’s a good example of a clean approach to handling errors.<\/p>\n

29. Mike Kus<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Mike Kus’s 404 page uses Space Invaders characters as a motif for his 404 page<\/figcaption><\/figure>\n

<\/a><\/p>\n

Leading designer and illustrator Mike Kus<\/a>‘s 404 page uses the classic Space Invaders characters as a motif for his 404 page. He has previously adopted a similarly retro animated GIF as the background graphic.<\/p>\n

30. eHarmony<\/a><\/h3>\n
\n

\"404<\/p>

Is eHarmony’s 404 suggesting you should just get plastered?<\/figcaption><\/figure>\n

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 this adorable image and a suggestion that you sign up for its dating service. Or maybe it’s suggesting that you should just get plastered? That works for us, too.<\/p>\n

31. Walk with You<\/a><\/h3>\n
\n

\"404<\/p>

Bold typography makes this 404 page come alive<\/figcaption><\/figure>\n

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.<\/p>\n

32. LimpFish<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

No time-wasters, please<\/figcaption><\/figure>\n

<\/a><\/p>\n

One of the best examples of a newspaper metaphor, Dave Barton’s personal site manages to inject a little humour into its error message.<\/p>\n

33. Starbucks<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Careful, that might stain<\/figcaption><\/figure>\n

<\/a><\/p>\n

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.<\/p>\n

34. Blizzard Entertainment<\/a><\/h3>\n

<\/p>\n

\n

\"404<\/p>

Blizzard’s 404 page is just smashing<\/figcaption><\/figure>\n

<\/a><\/p>\n

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.<\/p>\n

35. NPR<\/a><\/h3>\n
\n

<\/p>

Actually, we think you’ll find he’s called Wally<\/figcaption><\/figure>\n

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.<\/p>\n

36. CSS-Tricks<\/a><\/h3>\n
\n

<\/p>

Don’t worry. You can’t really rip a hole in the fabric of the internet<\/figcaption><\/figure>\n

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.<\/p>\n

Related articles:<\/strong><\/p>\n