Once you have defined what your web site's content should be, arranged it into a likely information architecture, and worked out where your content elements will sit on the page, you're ready to design the display layer.
The goal is to arrange various elements on the web page to maximise the web user's chance of using the site successfully.
There is a set of simple designer's tools available to help you help the user.
The root factor of effective visual design is creating relationships to show:
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.)
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 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 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 suggest movement.
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:
These elements need to stand out most.
Other design elements may have softer purposes, but can still be important, such as:
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.
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy. Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
