• Chris Berridge
• 28 Mar 2011
• 13 Comments

“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”
— CHARLES EAMES

With the recent developments in web typography, enhanced browser support, emergence of CSS3 standards and the ever-expanding library of jQuery plugins, the toolkit available to the visual designer has never been more powerful.

Designers now have the opportunity to create the sort of micro-designed, art-directed designs that were only a dream as recently as a couple of years ago. However, as the proliferation of unnecessarily rich user interfaces doing the rounds in the design community illustrate, it is important to continue to ask what constitutes an effective, successful visual design.

Put simply, well designed sites leave the customer with an impression of how great the company, product or service is, rather than how great the design is. Successful visual design languages are not the focus. They are unobtrusive. They are quiet.

At cxpartners visual design is utilised to support the customer experience, not to define it, therefore there are a number of principles we consider when creating visual design languages, whether they are to accompany an entirely new brand identity or are an extension of an existing site:

1. All visual design styles and interactions must be team players

Before designing a particularly decorative menu style or applying an advanced CSS3 rotation transition you need to ask yourself whether their inclusion will help the site (or page) achieve what you are setting out to do. If not, then do not include them.

In our recent project for one of the world’s leading price comparison sites we produced a number of versions of the central hero area, used to highlight key promotions. One of these versions utilised bold, vibrant product photography and typography in an almost editorial style, and proved very popular amongst the key stakeholders. In the end, however, this version was rejected in favour of a stripped-back, functional alternative which our testing showed was more instantly understood by customers.

Fig 1. The aesthetic favourite

Fig 2. The most effective

2. Legible typography must be legible first, unique second

Consistency and legibility is key, especially in light of the rapidly-growing prevalence of smartphone usage.

The recent emergence of reasonably priced on-demand @font-face font services (such as Typekit) has resulted in a swathe of sites with distinctive typography that look lovely on Macs but are illegible on the world’s most popular OS, Windows.

The use of non-system fonts needs to be justified from a brand and functionality perspective before being considered, with QA procedures being even more rigorously followed than usual to ensure cross-browser support (with progressive enhancement) wherever possible.

Fig 1. Ensure your type is legible - if in doubt, stick to system fonts

3. Whitespace must be utilised constructively

Clever use of the space between elements is a great way of creating an orderly page, ensure legibility of type and visually prioritise key messages without resorting to crude graphical devices that may add clutter.

Fig 1. Passive whitespace is used between elements to aid legibility and create an impression of order.

Fig 2. Active whitespace is used to break the harmony of the passive whitespace to highlight a particular element

4. Colour must be used functionally

In order to create balanced, harmonious visual design colour must be used as both a tool to reinforce brand identity and a method of grouping or categorising information. Text-heavy sites that appear overwhelming and confusing when monochrome can be intuitive and straightforward when a well-considered colour scheme has been applied.

Additionally, it is worth considering limiting the number of colours used on your site – too many distinct colours can result in a confusing interface and make it much more difficult to visually prioritise important information.

“Having small touches of colour makes it more colourful than having the whole thing in colour.”
— DIETER RAMS

5. Commonly-used modules must be consistently presented

When designing the more functional elements of a site it is important to prioritise instant, instinctive usability – once the customer has used an element of the site it should be transparently obvious how to use the others. A consistent, orderly design scheme plays a great part in making this happen – this is not the place for the more adventurous design treatments.

Fig 1. Consistent presentation of modules

6. Creativity must be given a context

Visually define the areas in which interactive content appears and customers will feel comfortable immersing themselves in it – the majority of sites that are celebrated for their creativity define strict boundaries for where rich interactivity begins and ends.

Fig 1. Creativity with context - the Times iPad app

7. Real-life metaphors must be used sparingly

A proliferation of real-life metaphors in the same space will make the customer think too much, for too long, even if based on a specific theme. Stick to one key analogy if absolutely necessary, and keep it simple.

Fig 1. Subtle metaphors can be used to reinforce brand values

8. Composition must be both balanced and appropriate

One of the key requirements of effective visual design is the development of an appropriate composition. Whilst a dense, direct and busy composition may be appropriate for a direct marketing mailout, a high-end fashion label’s website (for example) will require a sparser, more spacious approach.

A well-considered composition can communicate a thousand values in an instant, leaving the viewer to focus on the key stories being told within it.

Fig 1. An appropriate composition for Charles Tyrwhitt

Fig 2. An appropriate composition for Topman

The common thread that flows through all of the quiet design principles is the concept that visual design (in a business context) is an enabler – it is a crucial part of the greater project process that, when done well, lets the content and brand shine.

It is as important as ever that visual designers keep a sense of perspective (and purpose) amid the endless opportunities provided by ever-improving modern browsers. Your customers (and indeed your customer’s customers) will thank you for it.