The document discusses essential principles of mobile design, highlighting common mistakes such as lack of understanding of user needs and neglecting mobile technology constraints. It emphasizes the importance of creating user-friendly interfaces that cater to various environments and tasks while leveraging existing design standards and optimizing for mobile devices. Key design elements include layout, typography, and color usage to enhance functionality and user experience.

1. Mobile Design that Doesn’t SuckPaul Traniptrani@adobe.comwww.paultrani.com @paultrani

2. Paul TraniWorkRideLiveLovePlayAdobe Flash Platform Evangelist

3. Lynda.com and Layers Magazine author

4. Adobe Certified Instructor

5. Art school graduateWhy Should I Care?

6. Don’t Get Caught…“Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Many Will Wonder What Just Happened.”Barbera Ballard, author Designing Mobile User Experience

7. Mobile UsageU.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+ReportCase Study: Adidas

10. Because Ugly Doesn’t Sell

11. Most Common Mobile Design Mistakes1 of5

12. Most Common Mobile Design MistakesNo Mobile SiteNot Understanding the UserLack of ContextLack of Understanding Mobile TechnologyLack of Design Fundamentals

13. No Mobile Site1 of5

14. Don’t Make Me Work

15. Create, Don’t Convert

16. Not Understanding the User2 of5

17. The UserWho are the users?Anyone who interacts with content on their phone. (What phones?)Men and women between 16-35.

18. The UserWhere are they?Design for all environments and account for screen glare.DevelopmentInsideOutside(partly cloudy)Outside(sunny)

19. The UserWhen will they interact?During idle periods of time.

20. Design for 1 minute tasks.

21. Make navigation shallow and easy.The UserHow are they holding it?Design fro portrait and landscape.???

22. The UserWhy will they use your app?Valuable, appropriate content.

23. Content

24. Content(But have a link to the full site)

25. Lack of Context3 of5

26. Lack of Context

27. Proper Context

28. Neglecting Mobile Technology4 of5

29. Mobile Device Constraints=Processing power of a computer 8 years ago

30. Screen 1/3 the sizeMobile Device Constraints

31. Optimization Use bitmaps over vectors

32. Avoid, if possible:

33. Filters

34. Transparency

35. Blend modes

36. Perspective distortionAdditional Capabilities

37. Using CapabilitiesClick for more info?

38. Swipe for additional items?

39. Pinch to zoom?

40. GPS for nearby stores?Lack of Proper Design5 of5

42. Elements of Successful Design

43. Use Existing Design Standards

44. Use Existing Design Standards

45. Leverage Real World MetaphorsThe UK’s Most Popular Handheld

46. Leverage Real World Metaphors

47. Elements of Successful DesignIt’s about leading the eye

48. Elements of Successful DesignLayoutGrid, Golden Ratio, Space, Balance, Hierarchy, DirectionTypographySerif vs. SansColorColor Wheel, Color Choices, Meaning

49. Elements of Successful DesignLayoutGrid, Golden Ratio, Space, Balance, Hierarchy, DirectionTypographySerif vs. SansColorColor Wheel, Color Choices, Meaning

50. GRIDStart with a

51. Grid StructureDivide the page into a gridThe eye naturally follows an “F” shape

52. One Column? Two?

53. PLACEMENT

54. 44PlacementCopyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

55. Native Keyboard Placement

56. SIZE MATTERSMake it large, then make it larger.

57. Size Matters“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”Barbara BallardMobilize, don’t miniaturizeDesign for real hand sizes

58. Design for Real Hand Sizes45x45px15x15pxThe average fingertip is 3x larger than the hand cursorMake your buttons 3x largerThen make them even larger

59. SPACEImplies importance, elegance, and professionalism.

60. Space“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” Antoine de Saint-ExuperyDon’t try to be great, try to be invisible

61. SpaceWalMartTarget

64. Elements of Successful DesignLayoutGrid, Golden Ratio, Space, Balance, Hierarchy, DirectionTypographySerif vs. SansColorColor Wheel, Color Choices, Meaning

65. Typography“Typography has one plain duty before it and that’s to convey information in writing.” Emil Ruder, Founder of Basel School of DesignChoose a font that fits the subjectDon’t use more than three@font-faceFlash

66. Choosing a FontSan-serif lack Serifs and are considered modernUnderstand type anatomyUnderstand type measurements

67. Focus on ClarityContrastSizeHierarchy

69. Elements of Successful DesignLayoutGrid, Golden Ratio, Space, Balance, Hierarchy, DirectionTypographySerif vs. SansColorColor Wheel, Color Choices, Meaning

70. “Use color to emphasize importance, not decorate a page.” Alexander WhiteUse color to create hierarchy, dominance, and balanceConsistent use of a few colors makes a more cohesive designColor

71. ColorChoose colors using The Color WheelWarm colors bring elements forwardCool colors move elements back Find contemporary colors using Kuler

73. Flash Player 10.1

74. Additional CapabilitiesIn the BrowserBeyond the Browser

75. planningWe want to sell you stuff you don’t need.

77. Resourceswww.adobetv.com

78. www.bytearray.org

79. http://www.RIAgora.com

80. http://www.flashmobileblog.com

81. http://www.gotoandlearn.com