I'll bring you at home

A pixiesque web design blog

Subscribe RSS

Small touches for great designs

11 Mar 2010

11

on:
love & feel
Tweet it!

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 he’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.

Written by Michela

Web designer, standards enthusiast, founder of web is love and Colazione da Michy. Follow her on twitter

11 Comments

  1. Keep ‘em coming, Michela.

    My favourite detail of your own site is the “recipe for this site” in the footer. Playful way to get the message across.

  2. Thanks for the article, I didn’t know most of the website you mentioned, and you pointed out some interesting details… looking forward to reading more articles like this!!
    BTW @John Hyde: My favourite detail in Michela’s site is the white rabbit at the end of page :-)

  3. Beautiful site, I like the mannequin wearing a tiara at the bottom.

  4. Michela

    Hi Simon, thanks for the link in your site too

  5. Nice .. I like this post
    You rite how to improve a design it is very important

Leave a Reply

(won't be public)

Contribute

Trackbacks

  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by battica: RT @webislove Small touches for great designs – http://webislove.com/?p=36...

  2. Small touches for great designs…

    This article isnt just about pretty things but also about how to use them to improve user experience….

  3. [...] Small touches for great designs [...]

  4. [...] her article “Small touches for great designs” on WebIsLove.com, Michela Chiucini shows us the power of high-quality, small details to create [...]

  5. [...] her article “Small touches for great designs” on WebIsLove.com, Michela Chiucini shows us the power of high-quality, small details to create [...]

  6. [...] her article “Small touches for great designs” on WebIsLove.com, Michela Chiucini shows us the power of high-quality, small details to create [...]

Twitter / @webislove

ADS

Post a job at Authentic Jobs and reach web professionals everywhere.
  • Michela: Thanks for the research and the suggestion, just updated the name ;)
  • Tracking Comment Spam like a Cat Hunts Mice: Good Day Friends, I frequently visit a commenter’s website to...
  • inekang: I practiced this tutorial. It’s so useful and easy to learning. the work is lovely and enjoyable....
  • Laser_shark: it was very interesting to read. I want to quote your post in my blog. It can? And you et an account on...
  • Unethical Method User: Wonderful site and theme, would really like to see a bit more content though! Great post all...