34 brilliantly designed 404 error pages

34 brilliantly designed 404 error pages

Creative Bloq

If you're working on how to start a blog or website, don't forget the all-important 404 page – a standard response code in HTTP telling the user, in effect, that they've clicked on a broken link.

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.

When done really well, they become mini-ambassadors for the website itself, being shared on Twitter and blogs as an example of the site or service's keenness for customer service and unique approach to design. The 34 we present here have achieved all this and more, so take a look and be inspired to create your own bespoke 404 pages!

01. Hillary Clinton

Hillary Clinton's 404 page is just the ticket

In the name of balance we totally checked out Donald Trump's 404 page and it was thoroughly uninspiring, but at least inoffensive. But if the US presidential election was decided on the quality of the candidates' 404 page then Hillary Clinton would win the heck out of it, for the GIF of her having trouble with her train ticket and for the link for getting people to sign up to volunteer.

02. Dan Woodger

Guys, it's a cheeseburger on skates; what's not to love?

Some 404 pages are little technical masterpieces, and some, specifically Dan Woodger's, feature a drawing of a cheeseburger on roller skates. It might push any boundaries but it at least give you an idea of Dan's style, and encourages you to click through to the rest of his work.

03. Figma

Messing with vectors is so much fun when it's not actual work

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

04. South West Trains

The regularity of this service is a little incongruous, to be honest

South West Trains recently launched a new site (which you can read all about in issue 284 of net magazine), and it's hard to resist its railway-themed 404 page, with its 404 spelled out in train tracks and a dinky little train that comes rolling along every few seconds. All aboard!

05. Bloomberg

Absolutely bonkers; Richard Turley, we salute you

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 before flying to bits. It's nice to see Richard Turley's influence rubbing off on the site.

06. Bluegg

404 pages: Bluegg

This noisy chap provides a hilarious notification that you're in the wrong place

The 404 page of creative and digital design agency is simple, but so effective. Upon loading, you're greeted by a goat, who lets out the most almighty high-pitched scream, alerting you that the page doesn't exist. The inner child in us emerged and we must admit to playing this repeatedly, while crying a little with laughter. Bravo, guys.

07. Hot Dot Production

404 pages: Hot Dot Production

Hot Dog's 404 page is seriously addictive

Hot Dot Productions has applied it's '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.

08. Airbnb

404 pages: AirBNB

If you drop ice cream on the floor, clean it up, right?

This 404 page from couch-surfing behemoth Airbnb features a delightful animation that holds lessons for us all about ice cream and the inadvisability of dropping your ice cream. It also brings to mind press stories about people who 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?

09. Lego

404 pages: Lego

Lego can do no wrong in our eyes – we love this cute little tableau for its website's 404 page

In general, Lego can do no wrong in our eyes, and we love this cute little tableau for its website's 404 page, which proves that you don't need a lot of technical-sounding text to get your error message across.

10. Magnt

404 pages: Magnt

Magnt's clever 404 page demonstrates both a keen sense of wit, and a clear call to action

Magnt enables you to create a business card themed web page in minutes. Its clever 404 page demonstrates both a keen sense of wit, and a clear call to action to take you where you need to be.

11. GitHub

404 pages: GitHub

What better way to appeal to geeks than a simple Star Wars parody with parallax effect

Coding website GitHub is the home of geeks, and what better way to appeal to geeks than a simple Star Wars parody with parallax effect when you move your mouse? GitHub also has a nice 500 page for when the server breaks.

12. Blue Fountain Media

404 pages: Blue Fountain Media

Wanna play doubles, mate?

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 in the form of a game 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), but it didn't stop us from giving this a thorough researching.

13. CSS Ninjas

404 pages: CSS Ninjas

CSS Ninjas is another example of the web design world's love of ninjas

Another example of the web design world's love of ninjas, this 404 page features a nice simple illustration that reflects the site's general approach to design.

14. Daniel Karcher Film Design Studios

404 pages: Daniel Karcher

This 404 page employs a beautifully rendered subway station complete with empty train that rolls in

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

15. MailChimp

404 pages

Don't make the monkey angry...

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, reflecting the same lighthearted approach that makes an otherwise boring task into something fun and endearing.

16. Hakim El Hattab

404 pages: Hakim

These creepy eyes follow your cursor around the page

A 404 page designed for .net magazine, this time by Hakin El Hattab, this HTML5 experiment features creepy eyes that follow your cursor around the page with occasional blinking and narrowing of the iris. Brilliantly executed and nicely interactive.

17. Tin Sanity

404 pages: Tin Sanity

This dancing cup and straw screams its way across the page around the text

Tin Sanity features an incredible animation, involving 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 (although the website itself is currently empty).

18. Audiko

404 pages: Audiko

This 404 page is worth a visit just for the artwork!

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 artwork!

19. Bret Victor

404 pages: Bret Victor

This is not a page. It's a picture of something that's not a page. Or is it?

Bret Victor's 404 page, inspired of course by René 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?

20. Home Star Runner

404 pages: Home Star Runner

This 404 page features amusing characters, downloads and shouts "404'd" at you

Audio can be very effective when combined with visuals on a web page, especially as we're still in the early days of reliable audio-in-a-page. 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. And the hand-drawn illustration fits the rest of the site well in terms of style and theme.

Next page: More brilliant 404 pages...

21. Duoh!

404 pages: Duoh!

Duoh! uses bright colours and negative space in its 404

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

22. Bit.ly

404 pages: Bit.ly

Bit.ly's cute creature responds to your mouse movements

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 that responds to your mouse movements.

23. ApartmentHomeLiving

404 pages: Apartment Homeliving

This 404 page features a strange interior shot with a sheep sitting on the lavatory

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.

24. DropBox

Drop Box has a very simple but effective 404 page featuring an Escher-esque impossible box

Drop Box 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. A nice simple hand-drawn illustration that gets the message across well.

25. Wufoo

404 pages: Wufoo

Wufoo's 404 page is a simple static affair that uses the branding effectively to convey the message

Form building tool Wufoo's 404 page is a simple static affair that uses the branding effectively to convey the message. A good example of a clean approach to handling errors.

26. Mike Kus

404 pages: Mike Kus

Mike Kus's 404 page uses the classic Space Invaders as a motif for his 404 page

Leading designer and illustrator Mike Kus's 404 page uses the classic Space Invaders as a motif for his 404 page. He has previously adopted similarly retro TV static for the error page with an animated GIF set as the background graphic.

27. eHarmony

404 pages: eHarmony

Is eHarmony's 404 suggesting that you should just get plastered?

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.

28. Dailymotion Cloud

404 pages: Dailymotion Cloud

This interactive 404 page make a nice play on the name of the site with animated rain and clouds. The effect is simple yet effective, and is one of the better examples of a sign being used as a visual metaphor.

29. Walk with You

404 pages: Walk with You

This simple illustrative design for a site promoting life coaching uses existing assets from the overall site design, including the waterfall, to convey the 404 message. Bold typography makes this page work well.

30. LimpFish

404 pages: Limpfish

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

31. Starbucks

404 pages: Starbucks

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.

32. Blizzard Entertainment

404 pages: Blizzard

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.

33. NPR

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.

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

Have you seen any good examples of 404 pages? Let us know in the comments below!

view Creative Bloq