Mobile Design Process Workshop

Transcript

1. Mobile Design Process JASON VANLUE http://bit.ly/MobileDesignWorkshop

2. @jasonvanlue

3. WEB DESIGN where have we come? 1. Context-Specific Design desktop

   sites, native mobile apps 2. Universal Design

4. THE UNIVERSAL WEB "The primary design principle underlying the Web's

   usefulness and growth is universality.” (TIM BERNERS-LEE)

5. http://www.alistapart.com/articles/dao/

6. THE DAO OF WEB DESIGN •We should all aim for

   universal access as the default. •Think about what your pages do, not what they look like. •Let form follow function

7. MOBILE DESIGN what in the world is it?

8. THERE IS NO MOBILE WEB

9. Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

10. Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

11. Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

12. MOBILE DESIGN what in the world is it? 1. Native

    App Design platform-specific 2. Mobile Web Design

13. SO WHAT IS MOBILE WEB DESIGN?

14. MOBILE WEB DESIGN = WEB DESIGN

15. IT’S A SHIFT IN OUR THINKING ABOUT DESIGN. it’s how

    we should have been thinking all along.

16. THE BIGGEST SHIFT IS IN CREATING UNIVERSAL DESIGN.

17. DOES IT MATTER?

18. YES. Theodore Sturgeon Sturgeon’s Law: 90% of everything is crap.

19. PEOPLE ACTUALLY CARE ABOUT EXPERIENCE.

20. None

21. SO THE QUESTION IS: Are you part of the 10%?

    Or part of the 90%?

22. HOW MUCH DO YOU CARE ABOUT EXPERIENCE? Clients Managers Direct

    Reports Users Owners Investors It all comes back to you, and how much you care.

23. MOBILE DESIGN what are we doing today? 1. Mobile Web

    Design Process 2. Native App Design Process

24. Frederick Law Olmstead

25. http://37signals.com/svn/posts/2919-ten- design-lessons-from-frederick-law- olmsted-the-father-of-american- landscape-architecture

26. Respect the “Genius of a Place”

27. Details Are Less than the Whole

28. The Art is to Conceal Art

29. Aim for the Unconscious

30. Avoid Fashion for Fashon’s Sake

31. None

32. Form Follows Function “design without purpose is barbarous”

33. None

34. SIMPLIFY “never too much, hardly enough”

35. Embrace the fluidity of the web. Design layouts and systems

    that can cope to whatever environment they may find themselves in. (MARK BOULTON)

36. Start designing from the content out, rather than from the

    canvas in. (MARK BOULTON)

37. HOW DO WE DO THIS?

38. NOT SO MAGIC FORMULA but it’ll suffice 1. Know Your

    User 2. Know How They Use Your Site 3. Determine the Context(s) 4. Develop Your Content 5. Visual Design 6. Integrate & Build
39. None

40. MOBILE DESIGN PROCESS Overall: Know what you’re building what is

    your app, your site, your brand idea
41. None

42. MOBILE DESIGN PROCESS 1. Know Your User business owners, brand

    consultants 2. Know Your Users’ Use reading, purchasing
43. None
44. None

45. MOBILE DESIGN PROCESS 3. Think Through the Context(s) what device?

    in what environment?

46. ADAPTIVE DESIGN Design for controlled adaptation designing to meet a

    specific context

47. RESPONSIVE DESIGN Provides continuity between contexts portable, accessible, universal

48. None

49. Start designing from the content out, rather than from the

    canvas in. (MARK BOULTON) yes, but helpful to know the playing field

50. ENVIRONMENTS •We can know the device •Difficult to know the

    environment how would your design change if you knew?
51. None
52. None

53. http://www.markboulton.co.uk/journal/ comments/a-responsive-experience

54. MOBILE DESIGN PROCESS 4. Develop Your Content ain’t nothing like

    the real thing...
55. None
56. None

57. APP DESIGN PROCESS Traditional App Nav Upcoming Rent Payment ATT

    12:30 PM Radius MountainvieW garden apartments Kitchen Sink Leaking Yesterday by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management Maintenance Community Messages Finances Literal Radius Upcoming Rent Payment Kitchen Sink Leaking Yesterday by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management $850 by Feb 1 Noise Complaint Tuesday, Jan 17 by Management ATT 12:30 PM

58. APP DESIGN PROCESS Native App Design Considerations: 1. Visual Dimension

    2. Tactile Dimension Gestures
59. None

60. http://www.realmacsoftware.com/clear/

61. APP DESIGN PROCESS Upcoming Rent Payment Kitchen Sink Leaking Yesterday

    by Maintenance Parking Lot Closed 2 Days ago by Management Thursday’s Group Run Posted in Runners of Mountainview Noise Complaint Tuesday, Jan 17 by Management $850 by Feb 1 Noise Complaint Tuesday, Jan 17 by Management ATT 12:30 PM Swipe Menu ATT 12:30 PM MAINTENANCE Home Create Ticket Kitchen Sink Leaking Water Heater Broken Create Group Runners of Mountainview Racquetball League View all groups View all tickets COMMUNITY 4 2 Send Message MESSAGES

62. APP DESIGN PROCESS Parking Lot Painting 7 Responses Comment thread:

    Only shows own comments & responses from management Recipients: Only goes to manager Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Manager 3:27pm by Jane Donkey Respond... BBQ SEND Message Title Cancel Message ATT 12:30 PM Send Message 1 Message Content 2 Parking Lot Painting + Send Message 3:27pm by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager ATT 12:30 PM Messages BBQ Yesterday by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Parking Lot Painting « Back to Messages 3:27pm by Manager ATT 12:30 PM View Post Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque Manager 3:27pm by Jane Donkey Respond... Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Parking Lot Painting « Back to Responses 3:27pm by Manager ATT 12:30 PM View Post Pellentesque habitant morbi tristique senectus et netus et Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et John Steve 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et Mark Christianson 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et Kristy Lemon 3:27pm by Jane Donkey Pellentesque habitant morbi tristique senectus et netus et John Steve 3:27pm by Jane Donkey BBQ Parking Lot Painting + Send Message 3:27pm by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager ATT 12:30 PM Messages BBQ Yesterday by Manager Clean up common areas 2 hours ago by Manager Guest Parking Yesterday by Manager « Back to Messages ATT 12:30 PM View Responses SEND Message Title Cancel Message ATT 12:30 PM Send Message 1 Message Content 2 3 3 3 Messages: Shows both mass messages (manager » residents) and individual (resident « manager)

63. MOBILE DESIGN PROCESS 5. Visual Design use the workflow that

    works for you

64. iPAD

65. iPHONE

66. LARGE DISPLAY

67. APP DESIGN PROCESS 5. Visual Design experience + interface

68. http://www.youtube.com/watch?feature=player_embedded&v=sXqXpwyBI1k

69. None

70. APP DESIGN PROCESS 5. Visual Design experience + interface consistency

    is key
71. None

72. CONSIDER AN APP STYLE GUIDE

73. http://notebook.squaredeye.com/post/8296438548/working-the-product-align-your-design

74. None

75. http://www.starbucks.com/static/reference/styleguide/

76. MOBILE DESIGN PROCESS 6. Integration & Build get in the

    browser

77. MEDIA QUERIES Default Styles = Most Targeted Context OR Default

    Styles = Most Complex Context

78. MEDIA QUERIES Responsive Design: Content Defines Break Points where does

    your design break down?

79. MEDIA QUERIES 1. Build your default styles first 2. Then

    set your break points

80. 600px

81. MEDIA QUERIES /* < 655px */ @media screen and (max-width:

    655px) { }

82. MEDIA QUERIES /* > 1445px */ @media screen and (min-width:

    1445px) { } }

83. 700px

84. MEDIA QUERIES /* < 750px */ @media screen and (max-width:

    750px) { }

85. 500px

86. MEDIA QUERIES /* < 500px */ @media screen and (max-width:

    500px) { } }

87. RETINA IMAGES @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen

    and (min-device-pixel-ratio: 1.5) { /* Styles */ }

88. MOBILE DESIGN PROCESS 7. Be Flexible you can’t really predict

    user behavior

89. Avoid Fashion for Fashon’s Sake

90. SIMPLIFY “never too much, hardly enough”

91. THANKS! http://bit.ly/MobileDesignWorkshop