Visual Design

The good kind of VD

© Colin Stewart, 2009

Visual Design

• visual design = organizing something's appearance

• applies to anything visual: web page design displaying information (charts, graphs, reports)

maps, brochures, birthday cards

code formatting etc.

Visual Design

• visual design is not just about making something look pretty

• good visual design will: make web pages easier to navigate

make information easier to read and absorb

make your code easier to understand

Visual design principles

• excellent visual design requires some artistic ability, but a reasonably good design can be achieved by following the four principles of visual design: proximity alignment repetition contrast

• you can remember these by the acronym PARC or, if you prefer, CRAP

Proximity

• design principle #1: proximity things that are related should be grouped close together

things that are not related should be separated

Proximity

• an example of bad proximity:

• which heading applies to the items in gray – "Services" or "Resource Centre"? not clear from the spacing

Proximity

• note the extra spacing on the menu

• it is now immediately clear which items the menu headings apply to

• the same web page, with better proximity:

Proximity

• bad proximity: the subheading and the article have a huge space between them they don't look like they're related

Proximity

• the same web page, with better proximity

Proximity

• a page with good proximity:

• see next slide …

Proximity• the areas in red borders contain related content they are separated from other areas

• also, it is clear what each heading applies to

Proximity

• another example of good proximity

Proximity

Proximity – whitespace

• a related concept to proximity is that of whitespace

• whitespace refers to any empty space between visual elements it is not necessarily white, but it will be if the background colour is white

Proximity – whitespace

• an example of bad whitespace (not enough):

• in the menu on the left, there is almost no space between the menu items

Proximity – whitespace

• the same page, with better whitespace:

Alignment

• design principle #2: alignment visual elements should line up in straight lines, horizontal or vertical

• straight lines give a more organized appearance

Alignment

• an example of bad alignment:

• this is not a straight line …

Alignment

• the same web page, with better alignment:

Alignment

• more bad alignment:

Alignment

• the same web page, with better alignment:

Alignment

• a web page with good alignment:

Alignment

Alignment• as a general rule, left and right alignment work best – particularly for paragraphs of text

• center alignment is terrible for paragraphs, but can work for things other than text

• some examples of good center alignment:

Repetition

• design principle #3: repetition visual elements that have the same purpose or level of importance should look the same

• if there are too many different-looking things on a web page, it will not look like everything belongs on the same page it will not look cohesive

Repetition

• an example of bad repetition:

Repetition

• there are two examples of bad repetition on the previous slide: the menu items on the left all have a light yellow background – except for the items under the "Service", which have a gray background•all these items are in the same menu – they should all have the same appearance

… continued …

Repetition

the bullets on the right menu are maple leaves, but the bullets on the menu at the bottom centre are arrows•it would look more cohesive if they looked the same – if they were either all maple leaves or all arrows

Repetition

• the same page, with better repetition:

Repetition

• another example of bad repetition:

• the captions on the left of the two images have a much different font size

Repetition

• the same page, with better repetition:

Repetition

• an example of good repetition:

Repetition• everything with the same purpose/importance looks the same – fonts, colours, icons

Repetition

• another example of good repetition:

• note the weather icons – even though all four icons are different, they are made up of identical parts (clouds, rain drops, lightning)

Repetition

Contrast

• design principle #4: contrast visual elements with a different purpose or level of importance should appear different•this is the opposite of repetition

more important elements should be more prominent (larger, with stronger colours) than less important elements

Contrast

• an example of bad contrast:

• nothing stands out on this page – there is not enough difference in colours and fonts

Contrast

• the same page, with better contrast:

Contrast

• another example of bad contrast:

• the section heading ("What does X-ray light show us") is smaller than the paragraph text, even though it is more important

Contrast

• the same page, with better contrast:

Contrast

• a page with good contrast:

• note the differences in colours (light/medium/ dark) and font sizes/weights

Contrast

• a page with good contrast:

• note the division into three columns – each column has its own colour

Examples

• what does this page do well and badly?

Examples

• what does this page do well and badly?

Examples

• what does this page do well and badly?

Examples

• what does this page do well and badly?

Recap

• good visual design is important when making anything visual it makes web sites easier to navigate and read

• the four principles of visual design are: proximity alignment repetition contrast

Recap

• proximity: visual elements that are related should be close together, and vice versa use whitespace to separate elements

• alignment: visual elements should be lined up in straight lines left- and right-alignment are usually best

center-alignment can work sometimes, but not with paragraphs of text

Recap

• repetition: visual elements that have the same purpose or level of importance should look the same this applies to fonts, colours, icons, etc.

repeated elements on a page will give it a sense of cohesion (unity)

• contrast: visual elements with different purposes or levels of importance should appear different the opposite of repetition