Information Architecture and Design - Visual Design

Last but not least, there's visual design. It's the one design element that everyone knows, i.e. how the site looks. Visual design covers the visual treatment of text, graphics, page elements, and navigation. Most web-design firms will represent a visual design through a series of screenshots, the goal of which is to define contrast and uniformity.

Contrast

The concept of contrast is simple, what is it that you notice first? What stands out most on the page? It is through contrast that we bring information architecture to life. If a wireframe lacks color and depth, through visual design, we can alter the way the information is perceived.

A small heading in white with a bright red background will get more attention than the same heading in black on white. For example, in the screenshot below, the elements that stand out the most are the two blocks at the bottom of the page. Having different background colors draws the eye, very quickly. This site communicates that it's about bringing together volunteers and community groups.

The idea of contrast is to ensure the elements of the page that you want the user to see stand out the most. Contrast is created through three elements:

  • Size

  • Position

  • Color

By altering these three elements, we can create a hierarchy of importance for elements of the page that, if done well, will intuitively communicate the level of importance of each part of the page, if done poorly will leave the user confused.

Uniformity

While contrast is used to create a sense of visual hierarchy, uniformity is used to create a consistency in approach. Uniformity is about a visual language that is used throughout the site that is easy for the user to understand. For example, the main page heading is always a set color and font size, images are always left-aligned, links are always indicated with an arrow, etc.

In the world of graphic design, we are used to comprehensive style guides for corporate branding. The same mindset needs to be applied to websites but is often forgotten.

A Common Mistake

The most common mistake made in visual design is doing a visual design BEFORE having completed the content and information design. Doing the visual design first will force the designer to make a series of assumptions regarding content, navigation, site requirements, and information design. Once a client sees a visual design, they will expect the end result to be the same. It is a huge mistake that can cause untold problems later down the track when the interaction design fails to match the visual design and either changes have to be made to the visual design, which have to be explained to the client, or the interaction design is compromised. If at all possible, visual design should be done later.

However, in commercial reality, we are often asked to present a visual design as a part of a bid to win a project. Saying no (even though it's the right thing to do), can jeopardize chances of winning the project. In this case, all you can do is state as clearly as possible that the design is representative of a style only and is subject to change. Chances are the client will not remember this small but significant point, but at least you will have it as something to fall back on when the inevitable changes to the visual design surface.