Visual Design The good kind of VD

Colin Stewart

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

Graphic Design Rubric

Although you will not receive this rubric after a project is completed, you should understand that these are

the general criteria that will be used. It is always important to be sure that your message is clear and that

you are addressing basic design principles. If your work is in color or includes type, then those criteria

matter as well. Craftsmanship has to do with how well you handle the software.

Advanced Proficient Basic Below Basic Far Below

Basic

Clarity of message

Message is bold, compelling and possibly multi-layered. It goes beyond the obvious.

Message is clear and compelling. It may not be as subtle as it could be.

Message is clear but fails to go beyond something simple or obvious.

Message is slightly confusing.

Message is absent or contradictory.

Design principle: Contrast

Use of light and dark elements creates depth and subtlety. White space is used strategically.

Use of light/dark gives prominence where appropriate. White space, if used, is used well.

Contrast and white space are both evident in the work.

Use of contrast and/or white space could be improved.

Lack of contrast dramatically weakens the work overall.

Design principle: Repetition

Repeated use of key elements helps to create unity. Repetition is often subtle.

Repeated use of elements helps to create unity.

Repetition is evident though not a strong component of the work.

Repeated elements may not be evident, or repetition may be overdone.

Work overall is disjointed because of a lack of common elements.

Design principle: Alignment

At least one bold line helps to organize the work, clearly guiding reader through the message.

Elements are effectively lined up so that the overall look represents order.

Elements are generally lined up appropriately centered, left or right.

An absence of clear alignment creates a cluttered overall look.

Work lacks clear entry point and sight-lines and as a result has a chaotic look.

Design principle: Proximity

Placement of elements is precise so that reader can clearly perceive what is important and what is connected.

Text and graphics are strategically spaced so that related elements are close together. It is clear what is connected.

Text and graphics are spaced so that related elements are close together.

Problems with proximity create confusion as to what is and isnt connected.

Elements are not put together or separated in any organized fashion, creating a chaotic look.

Color if applicable

Color palette enhances the meaning of the work.

Colors are used appropriately and do not clash with one another or clutter the work.

Colors are mostly effective although there may be minor clashing.

Color choices clash at times and/or clutter the work.

Color choices weaken the work in dramatic ways.

Typography if applicable

Fonts and effects help to create a strong verbal-visual connection within the work. All font sizes are appropriate.

Typography choices are appropriate without an excessive number of fonts or effects.

Typography is generally effective, although font choice, size and effects may create minor distractions.

Font choices and/or effects create distractions.

Typography choices weaken the work in dramatic ways.

Craftsmanship

Work has no evident imperfections. Work is clean and neat.

Work may have slight imperfections, but they are not immediately obvious.

Work has imperfections that create minor distractions.

Imperfections in the work are noticeable and distracting.

Imperfections are highly distracting and take away from the overall effectiveness.