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
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
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?
44. This shouldn’t be a trend
46. Thankfully, it’s not a trend
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
57. 2003 2011 93.7kb 679kb
58. 7x
59. 1600kb
60. 1mb
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