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

Dan Rubin - Design for User Experience

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
Tweet

More Decks by UX London

Other Decks in Design

Transcript

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

    View full-size slide

  2. What we do is
    not unique.

    View full-size slide

  3. Physical product
    design = virtual
    product design.

    View full-size slide

  4. Assume
    similarities,
    not differences.

    View full-size slide

  5. We can learn from
    problems that
    have been solved
    elsewhere.

    View full-size slide

  6. Example
    Responsive
    Web Design

    View full-size slide

  7. Responsive
    Architecture

    View full-size slide

  8. It is easier to
    relate to existing
    concepts.

    View full-size slide

  9. 3 hours ≠
    Enough Time

    View full-size slide

  10. Richard
    Branson Me

    View full-size slide

  11. Work differently
    in the context
    of design.

    View full-size slide

  12. What are some
    of the distinct
    challenges you
    face today?

    View full-size slide

  13. Academic vs.
    Practical

    View full-size slide

  14. UX is often
    treated as
    an academic
    discipline.

    View full-size slide

  15. Designers are
    often more
    practical.

    View full-size slide

  16. Let’s resolve
    that dissonance.

    View full-size slide

  17. Part I
    Think Like a
    Product
    Designer

    View full-size slide

  18. What is
    your role?

    View full-size slide

  19. For the next
    few hours, you
    are a Product
    Designer.

    View full-size slide

  20. ...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

    View full-size slide

  21. Photo: Luiz Fernando Pilz (http:/
    /www.sxc.hu/photo/249448)

    View full-size slide

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

    View full-size slide

  23. If your interface
    requires
    instructions, it
    needs to be
    redesigned.

    View full-size slide

  24. Fit and Finish

    View full-size slide

  25. Pixels,
    alignment,
    balance.

    View full-size slide

  26. aka
    Build Quality

    View full-size slide

  27. Exercise
    Thinking
    about the
    problem.

    View full-size slide

  28. Step 1
    Think in
    Features

    View full-size slide

  29. Step 2
    Usage and
    Experience

    View full-size slide

  30. Step 3
    Design How
    It Feels

    View full-size slide

  31. Part II
    Practical
    Application

    View full-size slide

  32. Understanding
    Designers

    View full-size slide

  33. Designers
    see this:

    View full-size slide

  34. http://www.flickr.com/photos/mckaysavage/2566331277/

    View full-size slide

  35. And want to
    turn it into this:

    View full-size slide

  36. http://www.flickr.com/photos/nicholas_t/281820290/

    View full-size slide

  37. Margins
    and
    Spacing

    View full-size slide

  38. Give your design
    breathing room.

    View full-size slide

  39. Define
    reusable
    patterns.

    View full-size slide

  40. (old) CNN.com
    margins,
    padding,
    borders:
    6, 12, 18px

    View full-size slide

  41. CNN’s article
    text size was
    12px

    View full-size slide

  42. Hierarchy
    communicates
    importance.

    View full-size slide

  43. Big type
    stands out
    more than little type.

    View full-size slide

  44. Large content
    areas are easier
    to see.

    View full-size slide

  45. Size explains
    hierarchy.

    View full-size slide

  46. Why low-res
    wireframes
    help designers.

    View full-size slide

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

    View full-size slide

  48. As nature
    abhors a
    vacuum...

    View full-size slide

  49. ...an ugly
    wireframe is
    the designer’s
    vacuum.

    View full-size slide

  50. Thank you!
    @danrubin / danrubin.is
    webgraph.com

    View full-size slide