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
The goal is to arrange various
elements on screen to maximise the user's chance of using the site
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
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:
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.
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 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.
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
See our recent design of the INGO
Accountability Charter site for an example of creating
dynamism through diagonal lines and strong shapes alone.
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
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