designing for tablets & smart tvs

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.