Mobile Design that Doesn't Suck

8,220
-1

Published on

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.

1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,220
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
405
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×