Designing for Tablets & Smart TVs

6,399 views
5,527 views

Published on

A talk on UX and visual design for Android tablets & Google TV given by visual designer Dani Storlie and me at Google DevFest in September 2012.

Published in: Design
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
6,399
On SlideShare
0
From Embeds
0
Number of Embeds
1,320
Actions
Shares
0
Downloads
67
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Designing for Tablets & Smart TVs

  1. Designing forTablets & TVsGoogle DevFest 2012Presented byDANI STORLIEANDY FITZGERALD
  2. Overview Design Process Color Theory Visual Hierarchy
  3. Design Process
  4. “The design process is about designing andprototyping and making. When you separate those, I think the final result suffers” - Jonathan Ive. 2012
  5. IdeaMarket ResearchSketchDesignPrototype
  6. Have an idea
  7. Have an ideaFind a unique problemConsider the form factorKnow your platform
  8. Market Research
  9. Market ResearchWho is this for?What else is out there?What can you do better?
  10. Sketch it Out
  11. Sketch it OutInformation on the screenNavigating through applicationHow do elements fit on the screen
  12. Visual Design
  13. Visual DesignColorVisual HierarchyLayout
  14. Prototype
  15. PrototypeBuild you applicationTest it with usersIterate till you perfect
  16. Celebrate!
  17. Visual Design
  18. Visual Design
  19. Designing for 10ft 10ft
  20. Designing up close
  21. Color Theory
  22. Color Wheel
  23. Monochromatic shade
  24. Color Wheel
  25. Primary
  26. Secondary
  27. Secondary
  28. Tertiary
  29. Tertiary
  30. Complimentary
  31. Analogous
  32. Warm/Cool
  33. Google +
  34. DropBox
  35. Evernote
  36. Google Play
  37. Hierarchy
  38. Hierarchy Size Color Contrast Alignment Repetition Proximity
  39. Hierarchy
  40. Size
  41. Size & Alignment
  42. Color
  43. Contrast
  44. Repetition & Proximity Text Text Text Line of text Line of text Line of text Text Text Text Line of text Line of text Line of text
  45. Visual InformationSeeking
  46. Visual Information Seeking Overview Zoom Filter Details on Demand Visual  Informa.on  Seeking  Mantra,   Ben  Schneiderman  (1996)
  47. Visual Information Seeking
  48. Visual Information Seeking
  49. Visual Information Seeking
  50. Visual Information Seeking
  51. Visual Information Seeking
  52. Visual Information Seeking
  53. User Knowledge Knowledge in the World Interpretation substitutes for learning High ease of use on first encounter Efficiency slowed by the need of interpretation Knowledge in the Head Requires learning Low ease of use on first encounter High efficiency Adapted  from  The  Design  of  Everyday  Things,   Donald  Norman    (1988)
  54. Identifying Priorities& Translating Value
  55. “Mobile users’ priorities change, but their intents don’t.” - Emily Wengert Beyond Channels (IAS 2012)
  56. Value in Context
  57. Value in Context
  58. Value in Context
  59. Value in Context
  60. Value in Context
  61. Value in Context
  62. Value in Context
  63. Value in Context
  64. Value in Context
  65. Value in Context
  66. Value in Context
  67. Value in Context
  68. Value in Context Heuristics Clearly Identify: The value proposition The target user The target context Leverage Context Specific Assets Accommodate Context Specific Limitations Purge Unnecessary Features & Content
  69. Q&A.
  70. Thank you.@DANISTORLIE@ANDYBYWIRE

×