Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles
Designing for Clarity

Once you have your content, arranged it into a likely architecture, and worked out where it will sit on the page, you're ready to design the display layer.

The goal is to arrange various elements on screen to maximise the user's chance of using the site successfully.

There is a set of simple designer's tools available to help you help the user.

Clarity is all about the relationships between elements

The root factor of effective visual design is creating relationships to show:

  • what is part of what
  • what is different from what
  • how different elements relate to each other

One fundamental principle for clarity is economy: Don't use more techniques than necessary to differentiate. (For example, if you use bold text to differentiate one piece of text from another, ask if you really need to use a colon as well.)

Tools for designing the display layer

In conjunction with the layout tools already described (grouping, alignment etc.), these are further devices that have an impact over a design's attractiveness and ease of use.

This part of the course looks at each of the tools in turn, and discusses how we can use each one to further our design purposes.

The primary design tools include:

  • Contrast
  • Colour
  • Richness
  • Dynamism

Contrast

Contrast is the primary tool of eye control. Contrast attracts the eye, and it's the easiest surface mechanism to employ. In order to work, contrast needs to be balanced against areas of low contrast.

Colour

Colour can attract the eye. Use colour sensitively to make a page attractive and easy on the eye, and also to pick out items for special attention. Colours must balance with other colours and areas of low colour.

Richness

Richness can be created through use of colour, pattern, layering, and 3D effects such as gradients, shadows and highlights. The eye can linger on richer areas, so use specific areas of rich detail in key areas.

Dynamism

Movement is another factor that attracts the eye. This doesn't mean that an element must actually be animated - some shapes (such as diagonals) and busy patterns can suggest movement.

Approach

Before you design the actual visual interface, get clear on the relative priorities of the elements on screen. (If you've made an attention map, this is where it comes in really useful.)

Usually, the most important elements will be those that:

  • Identify the site/page (answer "Am I in the right place?")
  • Link on (many pages are stepping stones to others, rather than ends in themselves)
  • Provide content or feedback

These elements need to stand out most.

Other design elements may have softer purposes, but can still be important, such as:

  • Branding which creates a certain feel or personality
  • Subtle guides to help a user use a form or navigation interface effectively

Clearly, all these objectives are important. The trick to successful visual design is finding a balance that achieves as many of these (sometimes conflicting) objectives as possible.

Top ^ Next topic »
Comments
good article

thank you
- 07:11 on 05 Jun 2005
I think if you used a lighter color of black for your text the page will appear more smooth.  Right now it's good but you can make it better.  Try out a lighter black, because white and black just contrast too much.

Just a tip from a fellow web designer.
Sam - 11:00 on 05 Jun 2005
Thanks Sam. I've switched the body color to #444 instead of #000 on this page only, so we can all compare the difference.

My own feeling is that the slightly lighter grey is a little easier on the eye, which is fine when you're looking *at* the web page.

However, in normal circumstances of use, i.e. when you're speed-reading/scanning, black on white is going to be less tiring to read. Also, maxxing the contrast brings accessiblity benefits (for anyone with less-then-perfect vision).

What do other people think on this subject?
Ben Hunt - 08:16 on 06 Jun 2005
I'm reading all your articles, the whole day.
This slight difference is actually helpful.

Thank you so much!
joe - 06:59 on 15 Jun 2005
The grey looks more designed. The black is easier for aging eyes.

Just a wonderful site!
Joan Vinall-Cox - 01:36 on 27 Jul 2005