Compromising Web Design

E3825343634f5b24d73bfb8acd55877f?s=47 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.

E3825343634f5b24d73bfb8acd55877f?s=128

Westley Knight

November 24, 2014
Tweet

Transcript

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

    Design
  2. User Experience ART Direction RESPONSIVE WEB Design

  3. user experience

  4. UX

  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
  6. Art Direction

  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
  8. Responsive Web Design

  9. RWD

  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
  11. User Experience ART Direction RESPONSIVE WEB Design

  12. WEB DESIGN

  13. There is no perfect design

  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
  15. Design is about constraints

  16. Good design is full of compromises

  17. User Experience ART Direction RESPONSIVE WEB Design

  18. RWD

  19. I RWD

  20. None
  21. We are getting the hang of it

  22. MULTIPLE Devices PIXEL DENSITIES BREAK POINTS MOBILE FIRST CONTEXT FLUID

    GRIDS FLEXIBLE MEDIA MEDIA QUERIES TOUCH PERFORMANCE ERGONOMICS CONTENT STRATEGY FEATURE DETECTION
  23. What are we doing about creating solutions?

  24. Quite a bit actually

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

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

  27. STYLE GUIDES

  28. STYLE GUIDES

  29. STYLE GUIDES

  30. Are they a hELP OR HINDERANCE?

  31. “The road to hell is paved with good intentions.” ~

    Saint Bernard of Clairvaux Circa 1150
  32. Emphasis on Performance

  33. Assuming conventions

  34. _ _ _

  35. Overzealous Abstraction

  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.
  37. User Experience ART Direction RESPONSIVE WEB Design

  38. Art Direction

  39. Is this still a thing?

  40. None
  41. None
  42. None
  43. None
  44. This shouldn’t be a trend

  45. None
  46. Thankfully, it’s not a trend

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  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/
  55. The pendulum swings both ways

  56. None
  57. 2003 2011 93.7kb 679kb

  58. 7x

  59. 1600kb

  60. 1mb

  61. None
  62. None
  63. 1mb

  64. The pendulum swings both ways

  65. ART Direction RESPONSIVE WEB Design

  66. ART Direction RESPONSIVE WEB Design

  67. ART Direction RESPONSIVE WEB Design

  68. User Experience ART Direction RESPONSIVE WEB Design

  69. How do we strike this balance?

  70. Good design is full of compromises

  71. user experience

  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
  73. conflictS between RWD and ART DIRECTION

  74. Performance vs Visual Experience

  75. Performance vs Visual Experience Pre-processing

  76. Performance vs Visual Experience Responsive images Pre-processing

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

  78. Maintainability vs Bespoke Design

  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.
  80. Maintainability vs Bespoke Design High level abstraction

  81. Maintainability vs Bespoke Design Working closely High level abstraction

  82. Maintainability vs Bespoke Design Working closely High level abstraction Build

    the tools you need
  83. Efficiency vs Labour of love

  84. Efficiency vs Labour of love Forced towards efficiency

  85. Efficiency vs Labour of love Take your chance when you

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

    get it Forced towards efficiency Be aware of limitations
  87. Good design is full of compromises

  88. Compromising Web Design

  89. There is no perfect design Design is about constraints Good

    design is full of compromises
  90. Thank you

  91. @westleyknight