Creative Digital Media

History is recorded moments in life. People’s thoughts, either great among others or just great in their own shadow. Every glimpse of life at that just moment, deserves to be treasured. So just “Keep That Thought”…

30 of the web’s coolest 404 pages

By creativebloq August 09, 2012

Clicking on a broken link is a pain, but a well-designed 404 page at least sweetens the pill. We’ve found 30 of the most original and imaginative designs to inspire you.

The 404 page is 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, designers 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 30 we present here have achieved all this and more, so take a look and be inspired to create your own bespoke 404 pages!

Chris Jennings

 Chris Jennings

Chris Jennings works as director of user experience at Disqus in San Francisco, and the witty 404 page for his own site provides an excellent experience for any visitor that stumbles upon it. Simple and effective, it manages to tell a story and raise a smile.

GitHub

 GitHub

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.

CSS Ninjas

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

Daniel Karcher Film Design Studios

 Daniel Karcher

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.

MailChimp

 MailChimp

The designers at ultra-hip email newsletter service MailChimp have used lateral thinking here and come up with a sausage analogy for 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.

.net magazine

 netmagazine

The current 404 page for our sister title’s website, netmagazine.com, designed by Mike Kus, features a series of colourful flashing blocks with screenprint-inspired illustrations representing different elements of the web. It’s as beautifully realised as you’d expect from the UK’s premier web design publication.

.net magazine (tutorial)

 netmag tutorial

This 404 page created especially for a .net magazine tutorial by Trent Walton, features a never-ending animated text cut-out effect. The 404 text acts as a window through to a montage of previous .net magazine covers. Click through to the tutorial, ‘Create a 404 page with CSS3 animations‘, to find out how to achieve this effect yourself.

Hakim El Hattab

 Hakim

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

Tin Sanity

 Tin Sanity

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

Audiko

 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. The site’s worth a visit just for the artwork!

Blik Wall Decals

 Blik

This 404 page for Blik, the world’s first removable wall graphic company, is slightly disturbing, featuring as it does a baby wielding a blood-soaked chainsaw. But this illustration style does reflect the rest of the site’s aesthetics, so it’s in-keeping even if it is a little creepy.

Home Star Runner

 Home Star Runner

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.

Heinz

 Heinz

The seminal sauce maker makes nice use of its best known product to illustrate the point here. This 404 page is a great example of using existing branding and/or products in a creative way to lighten the tone.

Duoh!

 Duoh!

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.

Robert Sherman

 Robert Sherman

This experiment by graphic design student Robert Sherman pretends to be an interactive bomb-diffusing game, but at the end of it all it makes no difference which wire you choose. A good idea, albeit a little anticlimatic when you get to the punchline.

Bit.ly

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

foradian

 Foradian

This 404 page for Foradian Technologies features an interactive 3D cube rendered in HTML5 and CSS3 that responds to click+drag as well as keyboard input. An excellent example of an interactive toy that demonstrates the studio’s abilities.

ApartmentHomeLiving

 Apartment Homeliving

This letting agent website’s 404 page features a strange interior shot with a fading 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.

DropBox

 DropBox

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.

Wufoo

 Wufoo

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.

Mike Kus

 Mike Kus

Leading designer and illustrator Mike Kus’s 404 page uses a familiar metaphor of TV static in an original way. The effect is achieved with an animated GIF set as the background graphic for the page.

THCNET

 THCNet

Some sites include entire games or stories as part of their 404 page. This interactive adventure game works along the lines of the original Hitchhiker’s Guide To The Galaxy text adventure, and invites you to play by entering instructions at the cursor.

Dailymotion Cloud

 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.

Walk with You

 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.

LimpFish

 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.

Starbucks

 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.

Hugs for Monsters

 Hugs for Monsters

This personal site from a Vimeo designer features a delightful, hand-drawn illustration that reflects the rest of his website. A good example of a 404 page that’s simple but effective.

Huwshimi

 Huwshimi

Some of the nicest 404 pages aren’t interactive at all; they simply feature beautiful illustration that acts as a nice surprise when you’ve arrived at a dead link. This example from Sydney based interface designer Huwshimi features a simple yet effective sketch that tells a story while conveying the 404 message.

BlackMoon Design

 BlackMoon Design

This pixel-art styled 404 page for BlackMoon Design, a games and pixel art studio in Poland, made us smile. A design agency’s 404 page is a window on their world, and something as original and entertaining as this bodes well for prospective clients.

Blizzard Entertainment

 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.

Proteys

Words: Sam Hampton-Smith

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on August 19, 2012 by in Informative, Web Design and tagged , .