236: ii'nmi principles of visual design. form and function good design has good form and good...

236: II'nMI

Principles of Visual Design

Form and Function

Good design has good form and good function.• Good form: Looks good, pleasing, inviting.• Good function: Works well, robust, capable.

Chunking and Visual Gestalt Principles

Chunking • Chunking is a memory strategy that involves taking

individual units of information and grouping them into larger units.– 3002200210020002– The 7 +/- 2 Principle applies to chunks.

• Chunking happens in the visual domain also. – Visual Gestalt Principles– Gestalt.pdf

• Let's have a look-see ...

• Chunking kinda sorta happens in maps too ... ->

Chunking andBertin’s Visual Variables

Jacques Bertin• Cartographer• Mark – basic visual unit(/atom), able

to show relationships between data– point, line, area, surface, volume

• Semiology of Graphics (1983)• Graphical presentations use marks

to encode information via their positional (1d/2d/3d), temporal (animation), and visual variables (next page).

Size

Value

Hue

Orientation

Texture

Shape

Position

Bertin’s Visual Variables

Bertin’s Visual Variables

Five attributes of visual variables:• Associativity: a visual variable is said to be associative if it

can be used to group marks together (chunk them)

• Selectivity: a visual variable is said to be selective if it can be used to separate marks (make one stand out from others)

• Orderedness: a visual variable is said to be ordered if changes will be interpreted as more or less

• Quantitativeness: a visual variable is said to be quantitative if the relationship between two marks differing in this variable can be interpreted numerically

• Length: the length of a visual variable is the number of changes that can be made to the variable before it fails at its intended function

Visual Variable Attributes

Visual Variables + Attributes

Size Value Hue Orientation Texture Shape Position

Ass

ocia

tive

Sel

ectiv

e

Ord

ered

Qua

ntita

tive

Leng

th

How Did We Do?

Bertin chart comparing variables and attributes

Andy Rutledge tests your design knowledge with 6 Qs

http://www.andyrutledge.com

1. In which of these examples is the logo larger?

1. In which of these examples is the logo larger?

2. Which of the two compositions evokes visual discomfort? Why?

3. Which of these two line examples better communicates excitement?

4. What function(s) is/are served by the structural elements in figure A?

A B

5. Which arrangement requires less eye movement to take in an article?

A B

6. Which grid is “quieter”?

A B

Design Principles: CRAP

Contrast• Differentiation

Repetition• Consistency

Alignment• Placement

Proximity• Grouping

Contrast

If items are not identical, make them dramatically different.

Why?• To excite the eye.• To make text more likely to be

read, images more likely to be viewed.

• To help organize visual information, the logical flow from item to item.

Contrast

How to get it:• Font faces, sizes, weights• Line thicknesses• Colors, shapes, sizes• Empty space

What to avoid:• Overkill

– Eye-straining/illegible color combinations– Too much empty space

• Wimping out ... – Be bold!

• Stage makeup effect

Repetition

Repeat aspects of the design throughout the entire space.Why?

• To unify and add visual interest.

How to get it:• Be consistent.• Strengthen existing repetitions.• Add elements for new repetition.

What to avoid:• Repeating an element so much it

becomes annoying/overwhelming.• So much repetition that it

undermines the contrast.

Alignment

Don't place anything arbitrarily on the page; align (visually connect) it with something else.Why?

• To unify and organize the page.

How to get it:• Be aware where you put elements.• Align with other elements on page.• Use (real/imagined) grid.

What to avoid:• Using too many different text

alignments.• Too much center alignment (tends

to be dull and look amateurish).

Proximity

Group related items together.

Why?• See next slide ...

Be aware of the path that the eye takes.

• Where does it go first?• Next?• Next? • Etc.• Where does it end up?

Proximity

Why?• To organize elements to optimize visibility, understandability.

How to get it:• Squint your eyes slightly and count the number of visual elements

on the page by counting the number of times your eye stops.• If there are more than 3-5 items, see which can be grouped together.

What to avoid• Too many separate elements on a page.• Don’t leave equal amounts of white space between elements unless

each group is part of a subgroup.• Avoid confusion over a headline, caption - create a relationship.• Don’t create relationships with elements that don’t belong together.

Game Show Time

Okay everyone,

Game Show Time

Okay everyone, let's plaaaaaaaaaaaay:

Game Show Time

Okay everyone, let's plaaaaaaaaaaaay:

Spotthe

CRAP!

Spot the CRAP!

Spot the CRAP!

Spot the CRAP!

Spot the CRAP!

Spot the CRAP!

Fonts

Concordant• One font, or one family of fonts, or 2+ similar families• Calm and formal

Discordant• 2+ contrasting fonts• Energized and informal

Contrast• Italic, size, etc.• Color

– Warm colors come forward (reds, orange)– Cool colors recede (blue, green, pastels)– Larger areas of cool color, just a little of warm

Font Types

Serif FontsSans serif fonts - no serifs

Monospace fonts - all characters are the same width

Display fonts - not for lots of text

EVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL CAPS IS HARD ON THE EYES!

Design Tips

Establish a visual hierarchy.• People first see the graphics, then the text.• Balance, organization, and visual contrast are vital.

Direct the reader’s eye.• People scan text left to right, top to bottom.• Only the top four inches may be visible.• Use pastel shades for backgrounds or minor elements.

Beware of distractions.• Garish illustrations and (especially) animated graphics or blinking

text pull the user’s eyes away from the content.• If everything is emphasized, nothing is emphasized.

Be consistent.• Don’t have things scattered all over your page.• Let your style “evolve” as you improve the page.

Design Tips

Don't be afraid to ...

• Use plenty of blank space.

•Be asymmetrical.

•Make words very large or very small.

• Make graphics very bold or very subtle as long as it complements or reinforces your design.

Movie Time!

Visual Design• Elements of Design (9)

Color• Color Theory (6)

– From Apple

• Color in Motion (~10)– Created by former RIT student, Maria Claudio Cortes.