O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Mobile Design <br />that Doesn’t Suck<br />Paul Traniptrani@adobe.comwww.paultrani.com              @paultrani<br />
Paul Trani<br />Work<br />Ride<br />Live<br />Love<br />Play<br /><ul><li>Adobe Flash Platform Evangelist
Lynda.com and Layers Magazine author
Adobe Certified Instructor
Art school graduate</li></li></ul><li>Why Should I Care?<br />
Don’t Get Caught…<br />“Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Man...
Mobile Usage<br /><ul><li>U.S. Mobile Web Usage Grew 110% Last Year
Bigger than desktop browsing in 5 years
http://www.quantcast.com/docs/display/info/Mobile+Report</li></li></ul><li>Case Study: Adidas<br />
Because Ugly Doesn’t Sell<br />
Most Common Mobile Design Mistakes<br />1 <br />of<br />5<br />
Most Common Mobile Design Mistakes<br />No Mobile Site<br />Not Understanding the User<br />Lack of Context<br />Lack of U...
No Mobile Site<br />1 <br />of<br />5<br />
Don’t Make Me Work<br />
Create, Don’t Convert<br />
Not Understanding <br />the User<br />2 <br />of<br />5<br />
The User<br />Who are the users?<br />Anyone who interacts with content on their phone.  (What phones?)<br />Men and women...
The User<br />Where are they?<br />Design for all environments and account for screen glare.<br />Development<br />Inside<...
The User<br />When will they interact?<br /><ul><li>During idle periods of time.
Design for 1 minute tasks.
Make navigation shallow and easy.</li></li></ul><li>The User<br />How are they holding it?<br />Design fro portrait and la...
The User<br />Why will they use your app?<br />Valuable, appropriate content.<br />
Content<br />
Content<br />(But have a link to the full site)<br />
Lack of Context<br />3 <br />of<br />5<br />
Lack of Context<br />
Proper Context<br />
Neglecting Mobile Technology<br />4 <br />of<br />5<br />
Mobile Device Constraints<br />=<br /><ul><li>Processing power of a computer 8 years ago
Screen 1/3 the size</li></li></ul><li>Mobile Device Constraints<br />
Optimization<br /><ul><li> Use bitmaps over vectors
 Avoid, if possible:
 Filters
 Transparency
Blend modes
 Perspective distortion</li></li></ul><li>Additional Capabilities<br />
Using Capabilities<br /><ul><li>Click for more info?
Swipe for additional items?
Pinch to zoom?
GPS for nearby stores?</li></li></ul><li>Lack of Proper Design<br />5 <br />of<br />5<br />
Elements of Successful Design<br />
Use Existing Design Standards<br />
Use Existing Design Standards<br />
Leverage Real World Metaphors<br />The UK’s Most Popular Handheld <br />
Leverage Real World Metaphors<br />
Elements of Successful Design<br />It’s about leading the eye<br />
Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br...
Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br...
GRID<br />Start with a<br />
Grid Structure<br />Divide the page into a grid<br />The eye naturally follows an “F” shape<br />
One Column? Two?<br />
PLACEMENT<br />
44<br />Placement<br />Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential.<br />
Native Keyboard Placement<br />
SIZE MATTERS<br />Make it large, then make it larger.<br />
Size Matters<br />“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”<br ...
Design for Real Hand Sizes<br />45x45px<br />15x15px<br />The average fingertip is 3x larger than the hand cursor<br />Mak...
SPACE<br />Implies importance, elegance, and professionalism. <br />
Space<br />“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” <br...
Space<br />WalMart<br />Target<br />
Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br...
Typography<br />“Typography has one plain duty before it and that’s to convey information in writing.” <br />Emil Ruder, F...
Choosing a Font<br />San-serif lack Serifs and are considered modern<br />Understand type anatomy<br />Understand type mea...
Focus on Clarity<br />Contrast<br />Size<br />Hierarchy <br />
Próximos SlideShares
Carregando em…5
×

Mobile Design that Doesn't Suck

13.315 visualizações

Publicada em

Creating mobile content presents some interesting challenges for the designer and developer alike. From screen size, button size, typeface, and layout decisions to using unique mobile capabilities such as the accelerometer, gestures and geolocation. In this presentation, I provide clear solutions to these questions and show how they can be easily executed.

Mobile Design that Doesn't Suck

  1. Mobile Design <br />that Doesn’t Suck<br />Paul Traniptrani@adobe.comwww.paultrani.com @paultrani<br />
  2. Paul Trani<br />Work<br />Ride<br />Live<br />Love<br />Play<br /><ul><li>Adobe Flash Platform Evangelist
  3. Lynda.com and Layers Magazine author
  4. Adobe Certified Instructor
  5. Art school graduate</li></li></ul><li>Why Should I Care?<br />
  6. Don’t Get Caught…<br />“Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Many Will Wonder What Just Happened.”<br />Barbera Ballard, author Designing Mobile User Experience<br />
  7. Mobile Usage<br /><ul><li>U.S. Mobile Web Usage Grew 110% Last Year
  8. Bigger than desktop browsing in 5 years
  9. http://www.quantcast.com/docs/display/info/Mobile+Report</li></li></ul><li>Case Study: Adidas<br />
  10. Because Ugly Doesn’t Sell<br />
  11. Most Common Mobile Design Mistakes<br />1 <br />of<br />5<br />
  12. Most Common Mobile Design Mistakes<br />No Mobile Site<br />Not Understanding the User<br />Lack of Context<br />Lack of Understanding Mobile Technology<br />Lack of Design Fundamentals<br />
  13. No Mobile Site<br />1 <br />of<br />5<br />
  14. Don’t Make Me Work<br />
  15. Create, Don’t Convert<br />
  16. Not Understanding <br />the User<br />2 <br />of<br />5<br />
  17. The User<br />Who are the users?<br />Anyone who interacts with content on their phone. (What phones?)<br />Men and women between 16-35.<br />
  18. The User<br />Where are they?<br />Design for all environments and account for screen glare.<br />Development<br />Inside<br />Outside<br />(partly cloudy)<br />Outside<br />(sunny)<br />
  19. The User<br />When will they interact?<br /><ul><li>During idle periods of time.
  20. Design for 1 minute tasks.
  21. Make navigation shallow and easy.</li></li></ul><li>The User<br />How are they holding it?<br />Design fro portrait and landscape.<br />?<br />?<br />?<br />
  22. The User<br />Why will they use your app?<br />Valuable, appropriate content.<br />
  23. Content<br />
  24. Content<br />(But have a link to the full site)<br />
  25. Lack of Context<br />3 <br />of<br />5<br />
  26. Lack of Context<br />
  27. Proper Context<br />
  28. Neglecting Mobile Technology<br />4 <br />of<br />5<br />
  29. Mobile Device Constraints<br />=<br /><ul><li>Processing power of a computer 8 years ago
  30. Screen 1/3 the size</li></li></ul><li>Mobile Device Constraints<br />
  31. Optimization<br /><ul><li> Use bitmaps over vectors
  32. Avoid, if possible:
  33. Filters
  34. Transparency
  35. Blend modes
  36. Perspective distortion</li></li></ul><li>Additional Capabilities<br />
  37. Using Capabilities<br /><ul><li>Click for more info?
  38. Swipe for additional items?
  39. Pinch to zoom?
  40. GPS for nearby stores?</li></li></ul><li>Lack of Proper Design<br />5 <br />of<br />5<br />
  41. Elements of Successful Design<br />
  42. Use Existing Design Standards<br />
  43. Use Existing Design Standards<br />
  44. Leverage Real World Metaphors<br />The UK’s Most Popular Handheld <br />
  45. Leverage Real World Metaphors<br />
  46. Elements of Successful Design<br />It’s about leading the eye<br />
  47. Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br />Serif vs. Sans<br />Color<br />Color Wheel, Color Choices, Meaning<br />
  48. Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br />Serif vs. Sans<br />Color<br />Color Wheel, Color Choices, Meaning<br />
  49. GRID<br />Start with a<br />
  50. Grid Structure<br />Divide the page into a grid<br />The eye naturally follows an “F” shape<br />
  51. One Column? Two?<br />
  52. PLACEMENT<br />
  53. 44<br />Placement<br />Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.<br />
  54. Native Keyboard Placement<br />
  55. SIZE MATTERS<br />Make it large, then make it larger.<br />
  56. Size Matters<br />“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”<br />Barbara Ballard<br />Mobilize, don’t miniaturize<br />Design for real hand sizes<br />
  57. Design for Real Hand Sizes<br />45x45px<br />15x15px<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them even larger <br />
  58. SPACE<br />Implies importance, elegance, and professionalism. <br />
  59. Space<br />“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” <br />Antoine de Saint-Exupery<br />Don’t try to be great, try to be invisible<br />
  60. Space<br />WalMart<br />Target<br />
  61. Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br />Serif vs. Sans<br />Color<br />Color Wheel, Color Choices, Meaning<br />
  62. Typography<br />“Typography has one plain duty before it and that’s to convey information in writing.” <br />Emil Ruder, Founder of Basel School of Design<br />Choose a font that fits the subject<br />Don’t use more than three<br />@font-face<br />Flash<br />
  63. Choosing a Font<br />San-serif lack Serifs and are considered modern<br />Understand type anatomy<br />Understand type measurements<br />
  64. Focus on Clarity<br />Contrast<br />Size<br />Hierarchy <br />
  65. Elements of Successful Design<br />Layout<br />Grid, Golden Ratio, Space, Balance, Hierarchy, Direction<br />Typography<br />Serif vs. Sans<br />Color<br />Color Wheel, Color Choices, Meaning<br />
  66. “Use color to emphasize importance, not decorate a page.” <br />Alexander White<br />Use color to create hierarchy, dominance, and balance<br />Consistent use of a few colors makes a more cohesive design<br />Color<br />
  67. Color<br />Choose colors using The Color Wheel<br />Warm colors bring elements forward<br />Cool colors move elements back <br />Find contemporary colors using Kuler<br />
  68. Flash Player 10.1<br />
  69. Additional Capabilities<br />In the Browser<br />Beyond the Browser<br />
  70. planning<br />We want to sell you stuff you don’t need.<br />
  71. Resources<br /><ul><li>www.adobetv.com
  72. www.bytearray.org
  73. http://www.RIAgora.com
  74. http://www.flashmobileblog.com
  75. http://www.gotoandlearn.com</li>

×