Mobile Design Process Workshop

Mobile Design Process Workshop

Original workshop given at ConvergeSE 2012

11c84dff30266b907714802088852677?s=128

Jason VanLue

April 30, 2012
Tweet

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