Dan Rubin - Design for User Experience

It's clear now more than ever that building for the web, mobile, and other devices is akin to product design, not graphic design: Everyone involved is a member of a design team; our roles are design-centric regardless of our title.

Transcript

1. Design for User Experience UX London 2012 Dan Rubin / @danrubin
2. What we do is not unique.
3. Physical product design = virtual product design.
4. Assume similarities, not differences.
5. We can learn from problems that have been solved elsewhere.
6. Example Responsive Web Design
7. Responsive Architecture
10. It is easier to relate to existing concepts.
11. 3 hours ≠ Enough Time
12. Richard Branson Me
13. Work differently in the context of design.
14. What are some of the distinct challenges you face today?
15. Academic vs. Practical
16. UX is often treated as an academic discipline.
17. Designers are often more practical.
18. Let’s resolve that dissonance.
19. Part I Think Like a Product Designer
20. What is your role?
21. For the next few hours, you are a Product Designer.
23. Affordance
24. ...the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. Don Norman
26. Photo: Luiz Fernando Pilz (http:/ /www.sxc.hu/photo/249448)
27. Photo: Ivaylo Georgiev (http:/ /www.sxc.hu/photo/426359)
33. If your interface requires instructions, it needs to be redesigned.
34. Fit and Finish
35. Pixels, alignment, balance.
36. aka Build Quality
37. Exercise Thinking about the problem.
38. Step 1 Think in Features
39. Step 2 Usage and Experience
40. Step 3 Design How It Feels
42. Part II Practical Application
43. Understanding Designers
44. Designers see this:
45. http://www.flickr.com/photos/mckaysavage/2566331277/
46. And want to turn it into this:
47. http://www.flickr.com/photos/nicholas_t/281820290/
48. Margins and Spacing
49. Give your design breathing room.
50. Define reusable patterns.
53. (old) CNN.com margins, padding, borders: 6, 12, 18px
54. 12px
55. 12px 12px
56. 6px 6px
57. 18px
58. CNN’s article text size was 12px
59. Hierarchy communicates importance.
60. Big type stands out more than little type.
61. Large content areas are easier to see.
62. Size explains hierarchy.
65. Why low-res wireframes help designers.
66. Visual designers need room to work, to breathe.
70. As nature abhors a vacuum...
71. ...an ugly wireframe is the designer’s vacuum.
72. Discussion
73. Thank you! @danrubin / danrubin.is webgraph.com