Mobile Design Process Workshop

Original workshop given at ConvergeSE 2012

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.
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
32. Form Follows Function “design without purpose is barbarous”
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
40. MOBILE DESIGN PROCESS Overall: Know what you’re building what is your app, your site, your brand idea
42. MOBILE DESIGN PROCESS 1. Know Your User business owners, brand consultants 2. Know Your Users’ Use reading, purchasing
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
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?
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...
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
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
70. APP DESIGN PROCESS 5. Visual Design experience + interface consistency is key
72. CONSIDER AN APP STYLE GUIDE
73. http://notebook.squaredeye.com/post/8296438548/working-the-product-align-your-design
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