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

Dan Rubin - Design for User Experience

F9ccdb1fd3be748a9cbc4937d5b15465?s=47 UX London
May 01, 2012

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.


UX London

May 01, 2012

More Decks by UX London

Other Decks in Design


  1. Design for User Experience UX London 2012 Dan Rubin /

  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

  8. None
  9. None
  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.

  22. None
  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
  25. None
  26. Photo: Luiz Fernando Pilz (http:/ /www.sxc.hu/photo/249448)

  27. Photo: Ivaylo Georgiev (http:/ /www.sxc.hu/photo/426359)

  28. None
  29. None
  30. None
  31. None
  32. None
  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

  41. None
  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.

  51. None
  52. None
  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.

  63. None
  64. None
  65. Why low-res wireframes help designers.

  66. Visual designers need room to work, to breathe.

  67. None
  68. None
  69. None
  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