process meets
presentation
VISUAL INTERACTION DESIGN

WHAT IS
?
VISUAL INTERACTION DESIGN
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“
IxD is the discipline
of defining the
behavior of products
and systems that a
user can interact
”
”
with.
—WIKIPEDIA
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“ VID: design of
interactive systems
with an emphasis on
the visual or graphic
”
elements.
PROCESS MEETS PRESENTATION
”
—USABILITYFIRST.COM
CRUSH + LOVELY

PROCESS PRESENTATION
task flows
specs
¢ color
typography
metaphors grid
affordances iconography
PROCESS MEETS PRESENTATION CRUSH + LOVELY

VISUAL DESIGN = THE VOICE OF
INTERACTION DESIGN AND
INFORMATION ARCHITECTURE.
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS
PROCESS MEETS PRESENTATION CRUSH + LOVELY

UNDERSTAND THE GOALS,
MOTIVATIONS, AND EXPECTATIONS
OF YOUR USERS.
PROCESS MEETS PRESENTATION CRUSH + LOVELY

7±2 SHORT TERM MEMORY
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“ The assumed limit to
the amount of items
the immediate
memory can contain.
PROCESS MEETS PRESENTATION
”
”
—GEORGE MILLER
CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

POSITIVE REINFORCEMENT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

DON’T BE MEAN.
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

USING METAPHORS
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

AFFORDANCES
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“ The user knows what
to do just by looking:
no picture, label, or
instruction needed.
PROCESS MEETS PRESENTATION
”
”
—DON NORMAN
CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

CONTEXTUAL DESIGN
PROCESS MEETS PRESENTATION CRUSH + LOVELY

IS IT RELEVANT
?
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

BARRIERS TO ENTRY
PROCESS MEETS PRESENTATION CRUSH + LOVELY

<EXAMPLES>
PROCESS MEETS PRESENTATION CRUSH + LOVELY

<EXAMPLES>
PROCESS MEETS PRESENTATION CRUSH + LOVELY

<EXAMPLES>
PROCESS MEETS PRESENTATION CRUSH + LOVELY

BARRIERS TO EXIT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

DOCUMENTATION
PROCESS MEETS PRESENTATION CRUSH + LOVELY

DESIGN & FUNCTIONAL
SPECIFICATIONS
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TASK FLOW & ANALYSIS
PROCESS MEETS PRESENTATION CRUSH + LOVELY

DOCUMENT FAILURES
PROCESS MEETS PRESENTATION CRUSH + LOVELY

STYLE GUIDES
PROCESS MEETS PRESENTATION CRUSH + LOVELY

KEEP DOCUMENTATION
CURRENT & USEFUL
PROCESS MEETS PRESENTATION CRUSH + LOVELY

ITERATIVE DESIGN
PROCESS MEETS PRESENTATION CRUSH + LOVELY

MAP OUT WHAT IS IDEAL.
THEN PRIORITIZE RELEASES.
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PRESENTATION
PROCESS MEETS PRESENTATION CRUSH + LOVELY

THE ALMIGHTY GRID
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

TYPOGRAPHY
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PHOTOGRAPHY
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

PROCESS MEETS PRESENTATION CRUSH + LOVELY

EFFECTING MOODS
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PINK
delicate, calming, joy,
happiness, child-
likeness, affectionate
PROCESS MEETS PRESENTATION CRUSH + LOVELY

RED:
empowerment,
excitement, strength,
passion, vivid,
energizing
PROCESS MEETS PRESENTATION CRUSH + LOVELY

ORANGE
energy, balance,
stimulates, warmth,
cheerfulness, vibrancy
PROCESS MEETS PRESENTATION CRUSH + LOVELY

YELLOW
optimism, energy,
imagination, joy,
happiness,
encouragement
PROCESS MEETS PRESENTATION CRUSH + LOVELY

GREEN
health, youthfulness,
balance, nature,
calmness, cool
PROCESS MEETS PRESENTATION CRUSH + LOVELY

BLUE
soothes, tranquility,
power, trust, security,
elegance
PROCESS MEETS PRESENTATION CRUSH + LOVELY

PURPLE
royalty, comfort,
spirituality, wisdom,
nobility, stability
PROCESS MEETS PRESENTATION CRUSH + LOVELY

BLACK
individuality, boldness,
cleanliness, strength,
authority, power
PROCESS MEETS PRESENTATION CRUSH + LOVELY

WHITE
purity, cleanliness,
simplicity, innocence,
sterile, peacefullness
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

VOLUME & DEPTH
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

TEXT
PROCESS MEETS PRESENTATION CRUSH + LOVELY

SIMPLIFY
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“ It’s not how the
work looks.
It’s how the
look works.
PROCESS MEETS PRESENTATION
”
”
—ODEN MARKETING & DESIGN
CRUSH + LOVELY

FINDING INSPIRATION
PROCESS MEETS PRESENTATION CRUSH + LOVELY

KEEP WHAT INSPIRES YOU.
- inspiration blog
- screenshot gallery
- scrapbook/journal
PROCESS MEETS PRESENTATION CRUSH + LOVELY

CRITIQUES
PROCESS MEETS PRESENTATION CRUSH + LOVELY

“
“ Every human being
is a designer.
PROCESS MEETS PRESENTATION
”
”
—NORMAN POTTER
CRUSH + LOVELY

CREATIVE COMMONS PHOTOS:
- http://flickr.com/photos/gen4152/445931195
- http://flickr.com/photos/nostri-imago/3001714270
- http://flickr.com/photos/ph0t0s/85398150
- http://flickr.com/photos/nnova/3457507532
- http://flickr.com/photos/vardhana/2851012456
- http://flickr.com/photos/craigmdennis/3534778602
- http://flickr.com/photos/tearsandrain/2868003710
- http://flickr.com/photos/kukkurovaca/3103389693
- http://flickr.com/photos/dalbera/258777300
PROCESS MEETS PRESENTATION CRUSH + LOVELY

THE ART & SCIENCE
OF CSS
by CAMERON ADAMS
JINA BOLTON
DAVID JOHNSON
STEVE SMITH
JONATHAN SNOOK
PROCESS MEETS PRESENTATION CRUSH + LOVELY

QUESTIONS
?
crushlovely.com/downloads/vid
JINA BOLTON
INTERACTION DESIGNER
CRUSHLOVELY.COM
212.431.4652
NEW YORK + SAN FRANCISCO
PROCESS MEETS PRESENTATION