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

Compromising Web Design

Westley Knight
November 24, 2014

Compromising Web Design

A talk on responsive web design, art direction, and how finding a happy medium can create a better user experience.

Westley Knight

November 24, 2014
Tweet

More Decks by Westley Knight

Other Decks in Design

Transcript

  1. User Experience, ART DIRECTION
    AND
    RESPONSIVE WEB Design
    Compromising
    Web Design

    View Slide

  2. User
    Experience
    ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  3. user experience

    View Slide

  4. UX

    View Slide

  5. The overall experience of a person using
    a product such as a website or computer
    application, especially in terms of how
    easy or pleasing it is to use.
    A definition of ux

    View Slide

  6. Art Direction

    View Slide

  7. Art direction is about bringing emotion,
    vision, and clarity to design. When it'
    supervise and unify a vision, how it
    communicates visually, stimulates moods,
    contrast features, and psychologically
    appeals to a target audiences.
    A definition of art direction

    View Slide

  8. Responsive Web
    Design

    View Slide

  9. RWD

    View Slide

  10. A web design approach aimed at crafting
    sites to provide an optimal viewing
    experience — easy reading and navigation
    with a minimum of resizing, panning, and
    scrolling — across a wide range of devices.
    A definition of RWD

    View Slide

  11. User
    Experience
    ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  12. WEB DESIGN

    View Slide

  13. There is no perfect design

    View Slide

  14. “Perfection in design is not possible. You can never
    simultaneously satisfy all of the possible objectives
    for any created thing. For example, a ballpoint pen
    is an excellent tool for writing, until you need to
    erase.”
    ~ Scott Berkun
    The myth of perfect design

    View Slide

  15. Design is about constraints

    View Slide

  16. Good design is full of compromises

    View Slide

  17. User
    Experience
    ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  18. RWD

    View Slide

  19. I
    RWD

    View Slide

  20. View Slide

  21. We are getting
    the hang of it

    View Slide

  22. MULTIPLE
    Devices
    PIXEL
    DENSITIES
    BREAK
    POINTS
    MOBILE
    FIRST
    CONTEXT
    FLUID
    GRIDS
    FLEXIBLE
    MEDIA
    MEDIA
    QUERIES
    TOUCH
    PERFORMANCE
    ERGONOMICS
    CONTENT
    STRATEGY
    FEATURE
    DETECTION

    View Slide

  23. What are we doing about
    creating solutions?

    View Slide

  24. Quite a bit actually

    View Slide

  25. ATOMIC DESIGN
    http://bradfrostweb.com/blog/post/atomic-web-design/

    View Slide

  26. Pattern Lab
    http://demo.patternlab.io

    View Slide

  27. STYLE GUIDES

    View Slide

  28. STYLE GUIDES

    View Slide

  29. STYLE GUIDES

    View Slide

  30. Are they a hELP OR
    HINDERANCE?

    View Slide

  31. “The road to hell is paved with
    good intentions.”
    ~ Saint Bernard of Clairvaux
    Circa 1150

    View Slide

  32. Emphasis on
    Performance

    View Slide

  33. Assuming
    conventions

    View Slide

  34. _
    _
    _

    View Slide

  35. Overzealous
    Abstraction

    View Slide

  36. OPTION 1 OPTION 2 OPTION 3 OPTION 4
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.

    View Slide

  37. User
    Experience
    ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  38. Art Direction

    View Slide

  39. Is this still a thing?

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. This shouldn’t be a trend

    View Slide

  45. View Slide

  46. Thankfully, it’s not a trend

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. “Art direction is about bringing emotion, vision,
    and clarity to design. When it’s combined with user
    interface and user experience, it’s a
    dangerous weapon.”
    ~ Jason Farell
    Art Direction and User Experience - Use All Five
    http://useallfive.com/thoughts/user-experience-and-art-direction/

    View Slide

  55. The pendulum swings
    both ways

    View Slide

  56. View Slide

  57. 2003 2011
    93.7kb 679kb

    View Slide

  58. 7x

    View Slide

  59. 1600kb

    View Slide

  60. 1mb

    View Slide

  61. View Slide

  62. View Slide

  63. 1mb

    View Slide

  64. The pendulum swings
    both ways

    View Slide

  65. ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  66. ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  67. ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  68. User
    Experience
    ART
    Direction
    RESPONSIVE
    WEB Design

    View Slide

  69. How do we strike this
    balance?

    View Slide

  70. Good design is full of compromises

    View Slide

  71. user experience

    View Slide

  72. User experience lies at
    the crossroads of art
    and science and
    requires both
    extremely acute
    analytical thinking
    and creativity.
    User experience lies at
    the crossroads of art
    and science

    View Slide

  73. conflictS between RWD and
    ART DIRECTION

    View Slide

  74. Performance
    vs
    Visual Experience

    View Slide

  75. Performance vs Visual Experience
    Pre-processing

    View Slide

  76. Performance vs Visual Experience
    Responsive images
    Pre-processing

    View Slide

  77. Responsive images
    Pre-processing
    Progressive loading
    Performance vs Visual Experience

    View Slide

  78. Maintainability
    vs
    Bespoke Design

    View Slide

  79. OPTION 1 OPTION 2 OPTION 3 OPTION 4
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Integer
    pulvinar bibendum venenatis. Integer
    consequat leo feugiat erat euismod
    ornare. Donec commodo euismod
    urna eu dapibus.

    View Slide

  80. Maintainability vs Bespoke Design
    High level abstraction

    View Slide

  81. Maintainability vs Bespoke Design
    Working closely
    High level abstraction

    View Slide

  82. Maintainability vs Bespoke Design
    Working closely
    High level abstraction
    Build the tools you need

    View Slide

  83. Efficiency
    vs
    Labour of love

    View Slide

  84. Efficiency vs Labour of love
    Forced towards efficiency

    View Slide

  85. Efficiency vs Labour of love
    Take your chance when you get it
    Forced towards efficiency

    View Slide

  86. Efficiency vs Labour of love
    Take your chance when you get it
    Forced towards efficiency
    Be aware of limitations

    View Slide

  87. Good design is full of compromises

    View Slide

  88. Compromising
    Web Design

    View Slide

  89. There is no perfect design
    Design is about constraints
    Good design is full of compromises

    View Slide

  90. Thank you

    View Slide

  91. @westleyknight

    View Slide