Small touches for great designs

This first article isn’t just about pretty things but also about how to use them to improve user experience.
These listed below are top notch websites of course, but I’d like to dwell on some small touches that make the difference.
In these examples the form and the function come together beautifully.

Not just a link…

Citizens Theatre

Technically speaking it’s just a link treatment , is the way it’s used that improve the general look and feel and also permit to know at glance what the link is about.

 

The finesse here is that the colour of the link speaks about the nature of the content: red for Youtube videos, pink for Flickr images, cyan for Twitter statuses and so on.

Visit Phily

Not just a mega drop-down menu, but an immediate preview of every section complete with images, weather forecast, news titles and so on. The visitor has high chances to reach what she’s looking for with just one click.

 

 

 

 

 

 

 

 

 

 

To say nothing how this mega drop-down menu is beautifully crafted in visual terms.

Engaging forms

Analog

The contact form is apparently just on one row. What we’d expect is a scrollbar appears while we are writing . Well this doesn’t happen, the textarea grows while we are writing the text.

 

 

 

 

 

 

 

 

 

 

We saw this behavior so many times on Facebook, but it’s really pleasant to see it on a website.

Information Highwayman

Here we have another contact form beautifully crafted.
The cue is a conversational and informal approach supported by a great copywriting. The result is truly engaging and to fill the form is a funny task

Future of Web Design

The newsletter text field uses the rgba color property to obtain a transparent background that fits better with the website until you don’t focus on it. In that moment the text field gets a solid background to help the visitor to fill the form properly.

Wonderful scrolling

Fresh01

There are 2 fixed blue bubbles on both sides of the text.

 

 

 

 

 

 

 

 

 

While you scroll the page, the background of the bubbles scrolls highlighting the date on the left and an icon indicating the kind of content on the right.

Tick Talk

While scrolling down the page you’ll see the sand in the hourglass flows through the narrow tube into the bottom bulb. This gives you an idea of how much content remains to read in the page.

The hourglass here has a double purpose: enhance the concept and drive the visitor.

14

11 Responses

  1. John Hyde
    March 11, 2010
  2. Caterina
    March 11, 2010
  3. Pingback: uberVU - social comments March 11, 2010
  4. Simon Foster
    March 21, 2010
  5. Michela
    March 21, 2010
  6. angel
    May 4, 2010
  7. Herbug
    September 4, 2010
  8. Prakash
    December 10, 2010
  9. nitGreen
    January 3, 2011
  10. SEO Jim
    May 13, 2011
  11. SEARCH ENGINE OPTRIMISATION
    September 30, 2011
  12. magento Expert
    December 25, 2011

Write a response