You are here:

  1. Manual
  2. Development
  3. Design

Design

The design of a site is the translation of the aim into a visual solution. In the assessment of a design, it is not so much about ‘beautiful or ugly’, but rather about the extent to which the design fulfils the aim.

Why is a good design important?

A good design has a positive impact on an organisation’s image and contributes to user recognition.

The design clearly presents the identity of the company and/or service. Visitors immediately know whose site they are on. The site is distinguished visually from those of other, similar companies and/or services. The manner in which the corporate identity is presented ('branding'), expresses a positive promise to the visitor. Branding is endorsed if and when the design conveys particular values, such as reliability, experience, specialist knowledge, customer-orientation, et cetera.

A good design is user-friendly.

A good desing contributes to the functionality of the site, and caters for the visitors’ needs. Legibility is determined, for example, by the designer’s choices regarding colour, font and font size. Likewise, the location of elements (the layout of the site) is an important factor in how users experience the clarity of the site.

In a good design, visual elements and function are balanced.

A good design is usually 'the best solution within the existing limitations'. When using high-quality images, for example, the consideration is always whether the page load time is acceptable to users.

The design process

During the 'brainstorming' phase, the designer will investigate 'moods', metaphors and themes that fit the concept.

An example of 'moods'

The concept for a garden centre site is 'the four seasons'. The moods - particular emotions/atmospheres - are associated with the seasons; combinations like 'spring-fresh', 'summer-happy', 'autumn-melancholy' and 'winter-still' evoke certain images (falling leaves, green shoots, a blanket of snow, et cetera).

So called 'studies' of the seperate components are often carried out during the brainstorming phase:

  • Layout
  • Colour
  • Typography
  • Image

Combining and concretising these layout, colour, typography and image studies into a single entity sometimes takes place with the execution of the design.

From abstract to concrete

'Thumbnails and Roughs'

Site composition will often constitute the framework within which the other visual elements are integrated. Thumbnails are reduced sketches of the various possible page layouts. They are made at great speed. The best are recreated as slightly larger, more detailed in the form of roughs. The main colour and typographic elements are often added at the roughs stage.

Following a critical review, the roughs are translated into a Look-and-Feel (also known as a comp(osite) or mock-up. The term Look-and-Feel is common in the web world). The Look-and-Feel is more detailed than the studies, but still focuses on mood and design on the basis of the expected content. All other design elements are tested against the Look-and-Feel.

Where is design located within the web development process?

The design always followes the concept, and precedes the actual production of the site. The (consistent) execution of the design during the production phase is tested against the concept and the Look-and-Feel.

Recommended reading

  • Siegel, David. Secrets of Successful Web Sites.
  • Berryman, Gregg. Notes on Graphic Design.


Web Guidelines version 1.3, November 2007.