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.
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.
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 :-)
Beautiful site, I like the mannequin wearing a tiara at the bottom.
Hi Simon, thanks for the link in your site too
Nice .. I like this post
You rite how to improve a design it is very important