12 examples of mind-blowing websites

Web designers struggle every day to create impressive and usable websites, but what makes the difference between a good and functional product and a mind-blowing one? Is a good looking and easy to use site enough to surprise and delight both clients and users?

I definitely think it is not. Users need to be given more, need to put in front of something fun, extremely beautiful, and what counts most, totally unexpected.

As Donald Normal said: “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives”.

How can a simple website accomplish and fulfill such ambitious aims?

Before getting to the possible answers we need a better understanding of the matter. Here is where Noriaky Kano’s model of customer satisfaction comes to help us. Most of the sites we come across today are able to satisfy users’ basic and performance needs, but just a small number of them can meet the excitement needs.

A basic need is something which is taken for granted by the user, like for example the fact that a site should not have broken links. A performance need is something that people expect, like the use of secure protocols for the online payments. An excitement need is way more than that, it’s something pleasantly unexpected, like for example the free wifi in a hotel.

Over time, things that were exciting yesterday will be expected tomorrow and things that are exciting today will be taken for granted tomorrow. That’s why we need to continue to innovate in order to make websites not just easy to use, but delightful to use.

Creatives and designers must fulfill excitements needs by adding those small things that people won’t notice, but if they do, they’ll surely tell their friends!

That’s what Paul Annett from Clearleft focused on during his smart presentation entitled “Oooh, that’s Clever! (Unnatural Experiments in Web Design)“. Paul’s presentation was absolutely fantastic, one of the most wonderful talks of SXSW 09.

In his talk, Paul presents few examples of clever websites. Here you can find the most interesting ones. Most of them are done with a smart use of transparencies, flash apps and animated GIFs. Check them out! It’ll be fun…

Resize the browser and you’ll get a nice 3D effect with the leaves and clouds in the background. That’s done using PNGs as background images:

Silverback

Silverback

Twequency

Twequency

In the below sample you can see and browse the site in the different stages of the design process, from the wireframes to the final design:

dConstruct.org

dConstruct

Click on the small warm at the bottom of the page…

Kyanmedia

Kyanmedia

Scroll down the page and keep an eye on the logo. That’s done again using PNGs for the logo images:

Fatuus

Fatuus

Able

Able

Econsultancy

Econsultancy

The torch switches on as you run down the page. That’s done setting the torch image behind a semi-transparent blue gradient layer:

CSS Zen Ocean

Ocean

Run down the page and you’ll see the paint drops creating gorgeous effects:

Webleeddesign

Webleeddesign

Change colours of your website using a one pixel animated GIF:

David Emery

David Emery

A slick advertisement for WII and really clever ideas to break things using Flash:

Wii Experience

Wii Experience

Hema

Hema

Leave a Comment

Legolin’s Weblog » Blog Archive » Oooh, that’s Clever! said

[...] has just posted an article about this on CSSglance, listing the most entertaining and clever examples presented by Paul Annett in his presentation, so [...]

wrote on April 26, 2009 @ 8:52 pm

kovshenin said

Those are some clever ideas. Thanks for the pick – most of them ARE mind-blowing!

wrote on April 27, 2009 @ 12:29 pm

Css Web Gallery said

Find Here top 80 sites for Css Web Gallery.

wrote on January 4, 2010 @ 9:51 am

MBT Imara said

Feel listening to good

wrote on May 17, 2011 @ 6:43 pm

MBT kafala said

In his talk, Paul presents few examples of clever websites. Here you can find the most interesting ones. Most of them are done with a smart use of transparencies, flash apps and animated GIFs. Check them out! It’ll be fun…

wrote on May 17, 2011 @ 6:44 pm



News and Articles

@media 2009 London

One day to go! What is considered one of the most intriguing and awe-inspiring web events around, will take place in London on Tue 25th and Fri 26th.

12 examples of mind-blowing websites

Web designers struggle every day to create impressive and usable websites, but what makes the difference between a good and functional product and a mind-blowing one?

News and articles archives

Recommended Books

Bulletproof Web Design

Bulletproof Web DesignStandards-based strategies for building designs that provide flexibility, readability, and user control--key components.

Web Standards Creativity

Web Standards Creativity10 web design lessons from 10 of the worlds best web designers: cutting-edge XHTML, CSS, and DOM scripting techniques.

Recommended books archives