Transcript Document

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
• the same web page, with better proximity:


• note the extra spacing on the menu
• it is now immediately clear which items the
menu headings apply to
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