Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design Process Workshop

Mobile Design Process Workshop

Original workshop given at ConvergeSE 2012

Jason VanLue

April 30, 2012
Tweet

More Decks by Jason VanLue

Other Decks in Design

Transcript

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

    View full-size slide

  2. @jasonvanlue

    View full-size slide

  3. WEB DESIGN
    where have we come?
    1. Context-Specific Design
    desktop sites, native mobile apps
    2. Universal Design

    View full-size slide

  4. THE UNIVERSAL WEB
    "The primary design principle
    underlying the Web's usefulness and
    growth is universality.”
    (TIM BERNERS-LEE)

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  7. MOBILE DESIGN
    what in the world is it?

    View full-size slide

  8. THERE IS NO
    MOBILE WEB

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. MOBILE DESIGN
    what in the world is it?
    1. Native App Design
    platform-specific
    2. Mobile Web Design

    View full-size slide

  13. SO WHAT IS
    MOBILE WEB DESIGN?

    View full-size slide

  14. MOBILE WEB DESIGN
    =
    WEB DESIGN

    View full-size slide

  15. IT’S A SHIFT
    IN OUR THINKING
    ABOUT DESIGN.
    it’s how we should have been thinking all along.

    View full-size slide

  16. THE BIGGEST SHIFT
    IS IN CREATING
    UNIVERSAL DESIGN.

    View full-size slide

  17. DOES IT
    MATTER?

    View full-size slide

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

    View full-size slide

  19. PEOPLE ACTUALLY CARE
    ABOUT EXPERIENCE.

    View full-size slide

  20. SO THE QUESTION IS:
    Are you part of the 10%?
    Or part of the 90%?

    View full-size slide

  21. 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.

    View full-size slide

  22. MOBILE DESIGN
    what are we doing today?
    1. Mobile Web Design Process
    2. Native App Design Process

    View full-size slide

  23. Frederick Law Olmstead

    View full-size slide

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

    View full-size slide

  25. Respect the
    “Genius of a Place”

    View full-size slide

  26. Details Are Less than the Whole

    View full-size slide

  27. The Art is to Conceal Art

    View full-size slide

  28. Aim for the Unconscious

    View full-size slide

  29. Avoid Fashion
    for Fashon’s Sake

    View full-size slide

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

    View full-size slide

  31. SIMPLIFY
    “never too much, hardly enough”

    View full-size slide

  32. Embrace the fluidity of the web. Design
    layouts and systems that can cope to
    whatever environment they may find
    themselves in.
    (MARK BOULTON)

    View full-size slide

  33. Start designing from the content out,
    rather than from the canvas in.
    (MARK BOULTON)

    View full-size slide

  34. HOW DO WE DO THIS?

    View full-size slide

  35. 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

    View full-size slide

  36. MOBILE DESIGN PROCESS
    Overall: Know what you’re building
    what is your app, your site, your brand idea

    View full-size slide

  37. MOBILE DESIGN PROCESS
    1. Know Your User
    business owners, brand consultants
    2. Know Your Users’ Use
    reading, purchasing

    View full-size slide

  38. MOBILE DESIGN PROCESS
    3. Think Through the Context(s)
    what device? in what environment?

    View full-size slide

  39. ADAPTIVE DESIGN
    Design for controlled adaptation
    designing to meet a specific context

    View full-size slide

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

    View full-size slide

  41. Start designing from the content out,
    rather than from the canvas in.
    (MARK BOULTON)
    yes, but helpful to know the playing field

    View full-size slide

  42. ENVIRONMENTS
    •We can know the device
    •Difficult to know the environment
    how would your design change if you knew?

    View full-size slide

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

    View full-size slide

  44. MOBILE DESIGN PROCESS
    4. Develop Your Content
    ain’t nothing like the real thing...

    View full-size slide

  45. 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

    View full-size slide

  46. APP DESIGN PROCESS
    Native App Design Considerations:
    1. Visual Dimension
    2. Tactile Dimension
    Gestures

    View full-size slide

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

    View full-size slide

  48. 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

    View full-size slide

  49. 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)

    View full-size slide

  50. MOBILE DESIGN PROCESS
    5. Visual Design
    use the workflow that works for you

    View full-size slide

  51. LARGE DISPLAY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. APP DESIGN PROCESS
    5. Visual Design
    experience + interface
    consistency is key

    View full-size slide

  55. CONSIDER AN
    APP STYLE GUIDE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. MOBILE DESIGN PROCESS
    6. Integration & Build
    get in the browser

    View full-size slide

  59. MEDIA QUERIES
    Default Styles = Most Targeted Context
    OR
    Default Styles = Most Complex Context

    View full-size slide

  60. MEDIA QUERIES
    Responsive Design:
    Content Defines Break Points
    where does your design break down?

    View full-size slide

  61. MEDIA QUERIES
    1. Build your default styles first
    2. Then set your break points

    View full-size slide

  62. MEDIA QUERIES
    /* < 655px */
    @media screen and (max-width: 655px) {
    }

    View full-size slide

  63. MEDIA QUERIES
    /* > 1445px */
    @media screen and (min-width: 1445px) {
    }
    }

    View full-size slide

  64. MEDIA QUERIES
    /* < 750px */
    @media screen and (max-width: 750px) {
    }

    View full-size slide

  65. MEDIA QUERIES
    /* < 500px */
    @media screen and (max-width: 500px) {
    }
    }

    View full-size slide

  66. RETINA IMAGES
    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    /* Styles */
    }

    View full-size slide

  67. MOBILE DESIGN PROCESS
    7. Be Flexible
    you can’t really predict user behavior

    View full-size slide

  68. Avoid Fashion
    for Fashon’s Sake

    View full-size slide

  69. SIMPLIFY
    “never too much, hardly enough”

    View full-size slide

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

    View full-size slide