Designing for Tablets & Smart TVs
-
Upload
andy-fitzgerald -
Category
Design
-
view
108 -
download
3
description
Transcript of Designing for Tablets & Smart TVs
![Page 1: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/1.jpg)
Google DevFest 2012
Designing for Tablets & TVs
Presented by DANI STORLIEANDY FITZGERALD
![Page 2: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/2.jpg)
![Page 3: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/3.jpg)
![Page 4: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/4.jpg)
![Page 5: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/5.jpg)
Design Process
Color Theory
Visual Hierarchy
Overview
![Page 6: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/6.jpg)
Design Process
![Page 7: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/7.jpg)
- Jonathan Ive. 2012
“The design process is about designing and prototyping and making. When you separate
those, I think the final result suffers”
![Page 8: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/8.jpg)
Idea
Market Research
Sketch
Design
Prototype
![Page 9: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/9.jpg)
Have an idea
![Page 10: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/10.jpg)
Have an idea
Find a unique problem
Consider the form factor
Know your platform
![Page 11: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/11.jpg)
Market Research
![Page 12: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/12.jpg)
Market ResearchWho is this for?
What else is out there?
What can you do better?
![Page 13: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/13.jpg)
Sketch it Out
![Page 14: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/14.jpg)
Sketch it OutInformation on the screen
Navigating through application
How do elements fit on the screen
![Page 15: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/15.jpg)
Visual Design
![Page 16: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/16.jpg)
Visual DesignColor
Visual Hierarchy
Layout
![Page 17: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/17.jpg)
Prototype
![Page 18: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/18.jpg)
PrototypeBuild you application
Test it with users
Iterate till you perfect
![Page 19: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/19.jpg)
Celebrate!
![Page 20: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/20.jpg)
Visual Design
![Page 21: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/21.jpg)
![Page 22: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/22.jpg)
Visual Design
![Page 23: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/23.jpg)
Designing for 10ft
10ft
![Page 24: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/24.jpg)
Designing up close
![Page 25: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/25.jpg)
![Page 26: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/26.jpg)
Color Theory
![Page 27: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/27.jpg)
![Page 28: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/28.jpg)
Color Wheel
![Page 29: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/29.jpg)
Monochromatic
shade
![Page 30: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/30.jpg)
Color Wheel
![Page 31: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/31.jpg)
Primary
![Page 32: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/32.jpg)
Secondary
![Page 33: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/33.jpg)
Secondary
![Page 34: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/34.jpg)
Tertiary
![Page 35: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/35.jpg)
Tertiary
![Page 36: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/36.jpg)
Complimentary
![Page 37: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/37.jpg)
![Page 38: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/38.jpg)
Analogous
![Page 39: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/39.jpg)
Warm/Cool
![Page 40: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/40.jpg)
Google +
![Page 41: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/41.jpg)
DropBox
![Page 42: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/42.jpg)
Evernote
![Page 43: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/43.jpg)
Google Play
![Page 44: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/44.jpg)
Hierarchy
![Page 45: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/45.jpg)
Hierarchy
Size
Color
Contrast
Alignment
Repetition
Proximity
![Page 46: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/46.jpg)
Hierarchy
![Page 47: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/47.jpg)
Size
![Page 48: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/48.jpg)
Size & Alignment
![Page 49: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/49.jpg)
Color
![Page 50: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/50.jpg)
Contrast
![Page 51: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/51.jpg)
Repetition & Proximity
TextLine of text
TextLine of text
TextLine of text
TextLine of text
TextLine of text
TextLine of text
![Page 52: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/52.jpg)
![Page 53: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/53.jpg)
Visual Information Seeking
![Page 54: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/54.jpg)
Overview
Zoom
Filter
Details on Demand
Visual Informa.on Seeking Mantra, Ben Schneiderman (1996)
Visual Information Seeking
![Page 55: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/55.jpg)
Visual Information Seeking
![Page 56: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/56.jpg)
Visual Information Seeking
![Page 57: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/57.jpg)
Visual Information Seeking
![Page 58: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/58.jpg)
Visual Information Seeking
![Page 59: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/59.jpg)
Visual Information Seeking
![Page 60: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/60.jpg)
Visual Information Seeking
![Page 61: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/61.jpg)
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)
![Page 62: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/62.jpg)
Identifying Priorities& Translating Value
![Page 63: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/63.jpg)
“Mobile users’ priorities change, but their intents don’t.”
- Emily WengertBeyond Channels (IAS 2012)
![Page 64: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/64.jpg)
Value in Context
![Page 65: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/65.jpg)
Value in Context
![Page 66: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/66.jpg)
Value in Context
![Page 67: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/67.jpg)
Value in Context
![Page 68: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/68.jpg)
Value in Context
![Page 69: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/69.jpg)
Value in Context
![Page 70: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/70.jpg)
Value in Context
![Page 71: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/71.jpg)
Value in Context
![Page 72: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/72.jpg)
Value in Context
![Page 73: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/73.jpg)
Value in Context
![Page 74: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/74.jpg)
Value in Context
![Page 75: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/75.jpg)
Value in Context
![Page 76: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/76.jpg)
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
![Page 77: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/77.jpg)
Q&A.
![Page 78: Designing for Tablets & Smart TVs](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c766564a79596c548b45a4/html5/thumbnails/78.jpg)
@DANISTORLIE@ANDYBYWIRE
Thank you.