An exercise in economy of design. There's almost no visual 'ink' used to create this combination of tabs & search form, and the effect is very nice indeed. I expect this style to copied all over the web, and to become a standard convention.

Why it's good:

• Very subtle use of gradients helps to make the controls feel soft and appealing.
• Positive mouseover effect (however, the mouseover colour is a bit too close to the top banner background colour).
• Simple tab shape looks fine with resizable text.
• The light blue colour works both as a bar to differentiate the top colour from the body (with very subtle 3D), and as a background colour to set the search box apart from the rest of the page.

I've loved the labelling on this product for a long time, and have meant to add it to the design diary.

Why it's good:

• Focus. Your eye knows exactly where to look. There are two areas of highest contrast: the logotype and the shadow on the stones. These 2 things tell you everything you need to know.
• Economy of visual elements. There is nothing on this label that isn't doing a job. The designer used the minimum number of elements to achieve an excellent overall effect, which is a sign of great design.
• Feel. The 'soft information' works very well. The choice of using rounded river stones speaks of water. There are wavy white lines in the stones (not visible on this photo, go buy a bottle), which support the watery theme. The soft lighting and lilting main typeface all create the right feel for this type of product for me.

CSS allows designers to add background images to all kinds of elements. One application where this can add value (i.e. make stuff clearer) is in hyperlinks.

The first example applies a small icon as the background to any links to PDF documents. Useful information.

It has a bunch of small benefits:

• The image is clearly part of the link - doesn't matter where you put the mouse pointer
• Easier to manage the design from one place using stylesheet
• Naturally lines up with other links
• If text is copied/pasted, the image is excluded
• Less HTML than writing images in all over the place

The second example is from this site, where I add a background image to the top right of any anchor of class "new_win", to indicate that the link will open in a new window.

This one also uses a different (red) version of the graphic for mouseovers, to make it absolutely clear that the graphic is fully part of the link.

Note: You need to repeat the background-position property, becuase it's all part of the overall background property.

a.new_win {
	background:url(images/new_win.gif) no-repeat top right;
	padding-right:12px;
}
a.new_win:hover {
	background:url(images/new_win_on.gif) no-repeat top right;
}

• What can rhetorical questions do for your business?
• Why do we care?
• Who are we?
• What's it all about?

Rhetorical questions are those leading questions for which there's already an implicit answer. They're asked for effect, rather than to gather information.

They're also used far too often on web pages!

A web experience is very different from a face-to-face sales, marketing or networking experience. In person, you can ask someone a question, and use their response intelligently. However, online you're almost certainly unable to respond.

With me, the effect of this is nearly always to leave a nagging question, "Why are you asking *me*?!"

People! Online, you only have a few moments to put your message across. Don't ask airy questions. Inform, and inform quick! You're the one with the knowledge, that's why they're on your site.

I initially appreciated the pretty bullet images on this long bulleted list from the recent survey on earning for UX professionals.

But, as I read my, I noticed eye was being drawn away from the content by the busyness of the bullet icons. This is counter-productive. The job of bullets is simply to mark out a list of items from 'other content', and to identify each discrete item. To do that, they should be iconic (recognisable and conventional), and I think simple.

The simplest bullet shape (least visual data, while still doing the job) has to be the dot, followed by other solid shapes (square and diamond), then circle.

This ad from UK mobile network Orange really caught my eye as a great example of effective online promotion.

Why it's good:

• High contrast
• A little movmement: requests your attention but doesn't grab it
• Uses text to communicate: when you have a simple message, text is best because it's clear and full of information. Imagery is better for rich or esoteric messages.

Earlier today, I found a site with ONE input field, supported by a 'Submit' button, and a 'Clear' button! Looking at another 'Clear' button later in the day, I found myself thinking, "Why would I ever click one of these?" (I never have) Why would someone enter data into a form, and then think, "No, actually that data's all wrong, I'll clear it all" ???

Aside from the sheer uselessness of the control, you have the small risk of clicking or activating the button by accident (balancing probable-usefulness against probable-pain doesn't look good), as well as the extra cognitive overhead of working out which button's which, when you *do* get it right.

I've been thinking about the subtle-alternating tones / colours for making alternate rows clearer on tables and forms.

The great benefit of alternating the rows visually has always been to make it easier to scan across a wide table, keeping your eye on the same row. It raises a few design questions:

• Does alternating visual look slightly suggest that rows are somehow qualitatively different? Might this raise some small anxiety, especially when there are only a couple of rows?
• Is two alternating tones ideal? Maybe 3 is clearer?
• If you have a highlight effect on mouseover or on focus, what colour or tone should that use? (e.g. cre8asite has alternating white/light-grey rows, but all rows highlight white on mouseover, which doesn't *quite* work).

I'm currently favouring rows with a gradient (provided by a background-image in CSS). Backgrounds have to be background-align:bottom, and the image sized for the typical height of the rows.

Since deciding that mouseovers are such a good thing, I'm also favouring the 'ruler' effect, where a row changes colour either when the mouse goes over a row (we like feeling around with our mice; see side example on Mouseovers), or when the current row is selected / has focus.

I'm using the left angle quote («) and right angle quote (») special characters more and more often these days.

Originally a type of quotation mark, they're really handy little icons that can neatly reinforce some common navigation ideas.

HTML markup is: « and »

« has a neat 'back' meaning, while » reinforces a forward/outbound link to a different page or site.

Using diagonal lines is an easy way to suggest dynamism.

This has been quite a popular technique on those 3D-type interfaces on tech-style sites.

It's hard to know when to stop, and they can quickly get muddled.

I see diagonal lines going out of fashion.

A cheap and effective technique: you've got some photographic or illustrative content, over which you overlay a part-transparent lighter or darker box, often in a grid pattern, letting the background show through.

I think it's a very effective way of giving depth to content imagery, and takes no time at all.

This effect fits well with the modern, grid-box layouts, which are so hot right now.

Examples, in order, from www.stopdesign.com, www.pegasusluxury.co.uk, www.technophobia.co.uk.

Please no, for pity's sake.
Don't make me ever see another one of these.

This example from www.geeksoncall.com, since removed (well done)

A nice, simple effect that was copied to death last year on thousands of logos. Avoid.

These logos (from Mozilla Firefox and riospa.com) show great combinations of at least 3 bold colours.

The areas of consistent hue provide strong boundaries, and the overall effect is bright and positive. I'm noticing a lot more logos and icons going down this route.

(Icons from firewheel design)

One of the reasons I find O'Reilly.com and Apple.com consistently appealing is their use of negative space to define elements and groups.

I think that many mature web designers have had enough of building and maintaining complicated layouts, which takes more time, carries risks, and doesn't actually improve experiences.

The industry is reaping the benefits of simple page designs: flexibility, speed (profit), robustness, ease of maintenance etc. etc.

In place of defunct jelly colour effects (below), I'm convinced designers will continue to find depths to explore in photorealistic surfaces.

For light page & background imagery, designers will use more soft multi-layered combinations of subtle lighting effects, to create a rich 'blush' effect. There are lots of variations on this theme, including light-on-plastic and brushed metal effects.

One interesting candidate for foreground imagery on certain sites might be this anodized metal variation, typified by colourful specular highlights.

The lovely glassy surface effect, popularised by Apple, has spread through the web like wildfire since about 2002.

It has seen its best times, and is so commonplace now that it's bound to become used less by pro designers.

I think that this effect has had such a mainstream impact, and is so attractive, that it has earned a place in the designer's permanent toolkit. Expect to see it used much more more thoughtfully, subtly, and less gratuitously.

It still looks nice, and there are a lot of tutorials about, so expect this one to tail off very slowly.