Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Designing forTablets & TVsGoogle DevFest 2012Presented byDANI STORLIEANDY FITZGERALD
Overview  Design Process  Color Theory  Visual Hierarchy
Design Process
“The design process is about designing andprototyping and making. When you separate    those, I think the final result suff...
IdeaMarket ResearchSketchDesignPrototype
Have an idea
Have an ideaFind a unique problemConsider the form factorKnow 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 screenNavigating through applicationHow do elements fit on the screen
Visual Design
Visual DesignColorVisual HierarchyLayout
Prototype
PrototypeBuild you applicationTest it with usersIterate 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        Text           Text           Text        Line of text   Line of text   Line of text        ...
Visual InformationSeeking
Visual Information Seeking   Overview   Zoom   Filter   Details on Demand                             Visual	  Informa.on	...
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
Visual Information Seeking
User Knowledge  Knowledge in the World    Interpretation substitutes for learning    High ease of use on first encounter   ...
Identifying Priorities& Translating Value
“Mobile users’ priorities change,   but their intents don’t.”                               - Emily Wengert               ...
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
Value in Context Heuristics    Clearly Identify:       The value proposition       The target user       The target contex...
Q&A.
Thank you.@DANISTORLIE@ANDYBYWIRE
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Designing for Tablets & Smart TVs
Próxima SlideShare
Cargando en…5
×

Designing for Tablets & Smart TVs

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.

  • Inicia sesión para ver los comentarios

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

×