Lecture 13

Visual design
THE “LOOK” OF YOUR INTERFACE
Graphic Design

 A comprehensible mental image

 Appropriate organization of data, functions, tasks
and roles
 High-quality appearances
 The “look”
 Effective interaction sequencing
 The “feel”
Graphic Design

 Involves knowledge of:

 Sequencing
 Organization
 Layout
 Imagery
 Color
 Typography
Graphic Design Principles

Clarity

Consistency

Alignment

Proximity

Contrast
Clarity

 Every element in an interface should have a reason

for being there
 Make that reason clear too!

 White/open space
 Leads the eye
 Provides symmetry and balance
 Strengthens impact of message
 Used to promote simplicity, elegance
Example

Clear, clean
appearance
Example

Does this convey

different
impressions?
Alignment

 Western world
 Start from top left
 Grids
 (Hidden) horizontal and vertical lines to help locate
window components
 Align related things
 Group items logically
Grids – use them
Layout Grids
Three Column Layout Grids
Symmetry vs. Asymmetry
Proximity

 Items close together appear to have a relationship

 Distance implies no relationship

Time

Time:
Example

Name Name
Name
Addr1
Addr1 Addr1
Addr2 Addr2 Addr2
City City City
State State
State

Phone Phone
Phone
Fax
Fax Fax
 Slide from
Saul Greenberg

Two-level Hierarchy
•indentation
Logic of organizational
•contrast
flow

Alignment connects Grouping

visual elements in a by white
sequence space
Haphazard layout
from mullet & sano
Repairing a
Haphazard layout
from mullet &
sano
Economy of visual elements

 Minimize number of controls

 Include only those that are necessary

 eliminate, or relegate others to secondary windows
 (but don’t want too many extra windows!)

 Minimize clutter
 so information is not hidden
 Contrast
 Pulls you in – set off most important item
 Guides your eyes around the interface
 Supports skimming
 Add focus
Example
Color

 Use for a purpose

 Draw attention, communicate organization, to
indicate status, to establish relationships
 Be consistent with color associations from
cultures
How many small ovals?
Now how many small ovals?
Color Meanings: Contextually
Specific
 Red  Yellow
 aggression, love – happy, caution, joy
 hot, warning, stop, radiation
 Brown
 Pink – warm, fall, dirt, earth
 female, cute, cotton candy
 Green
 Orange
– go, on, safe, envy, lush,
 warm, autumn, Halloween
pastoral
 Blue  Purple
 cold, off
– royal, sophisticated, Barney
Color Meanings: Culturally Specific

http://www.ricklineback.com/culture2.htm
Legibility and readability
 Characters, symbols, graphical elements should be easily
noticeable and distinguishable

Text set in TEXT SET IN

Helvetica CAPITALS

Text set in Text set in

Times Roman Braggadocio
Legibility and readability
 Proper use of typography
 1-2 typefaces (3 max)
 normal, italics, bold
 1-3 sizes max
Large Large
Medium Medium
Small Small

Readable Unreadable
Design components to be Design components to be
inviting and attractive inviting and attractive
Design components to be Design components to be
inviting and attractive inviting and attractive
visual design principles

 Three Principles

1. Hierarchy: Helping learners organize information

2. Figure/Ground: Helping learners select important information
3. Gestalt: Helping learners integrate information
 Hierarchy: The perception principle that communicates the relative
importance of elements in a display
 Figure/Ground: The perception principle that
describes how the mind seeks figure and ground
distinctions
 Figure: Information that stands out
 Ground: Information that recedes or supports
Figure

Ground
 Gestalt:The whole (a total learning
environment) is greater than the sum of its
parts (successful design and integration of
all visual/instructional elements)
Color Contrast and Legibility
 Contrast

CONtrast
END