Compromising Web Design

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

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