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

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