Post on 27-Jan-2015
description
Google DevFest 2012
Designing for Tablets & TVs
Presented by DANI STORLIEANDY FITZGERALD
Design Process
Color Theory
Visual Hierarchy
Overview
Design Process
- Jonathan Ive. 2012
“The design process is about designing and prototyping and making. When you separate
those, I think the final result suffers”
Idea
Market Research
Sketch
Design
Prototype
Have an idea
Have an idea
Find a unique problem
Consider the form factor
Know your platform
Market Research
Market ResearchWho is this for?
What else is out there?
What can you do better?
Sketch it Out
Sketch it OutInformation on the screen
Navigating through application
How do elements fit on the screen
Visual Design
Visual DesignColor
Visual Hierarchy
Layout
Prototype
PrototypeBuild you application
Test it with users
Iterate till you perfect
Celebrate!
Visual Design
Visual Design
Designing for 10ft
10ft
Designing up close
Color Theory
Color Wheel
Monochromatic
shade
Color Wheel
Primary
Secondary
Secondary
Tertiary
Tertiary
Complimentary
Analogous
Warm/Cool
Google +
DropBox
Evernote
Google Play
Hierarchy
Hierarchy
Size
Color
Contrast
Alignment
Repetition
Proximity
Hierarchy
Size
Size & Alignment
Color
Contrast
Repetition & Proximity
TextLine of text
TextLine of text
TextLine of text
TextLine of text
TextLine of text
TextLine of text
Visual Information Seeking
Overview
Zoom
Filter
Details on Demand
Visual Informa.on Seeking Mantra, Ben Schneiderman (1996)
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Knowledge in the WorldInterpretation substitutes for learning
High ease of use on first encounter
Efficiency slowed by the need of interpretation
Knowledge in the HeadRequires learning
Low ease of use on first encounter
High efficiency
User Knowledge
Adapted from The Design of Everyday Things, Donald Norman (1988)
Identifying Priorities& Translating Value
“Mobile users’ priorities change, but their intents don’t.”
- Emily WengertBeyond Channels (IAS 2012)
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Value in Context
Clearly Identify:The value proposition
The target user
The target context
Leverage Context Specific Assets
Accommodate Context Specific Limitations
Purge Unnecessary Features & Content
Value in Context Heuristics
Q&A.
@DANISTORLIE@ANDYBYWIRE
Thank you.