$30 off During Our Annual Pro Sale. View Details »

Designing For Utility

Ben Peck
October 13, 2015

Designing For Utility

Is design art? Is art design? What makes “Interaction Design” different than just “Design”? One of the differences is what we call wire-framing. People do this in a myriad of different ways. Some sketch, some digitize it but no matter which way its done its a step the process that sets Interaction Design apart from Design or Art. The purpose of wire-framing is…come and find out. I’ll walk through what I’ve learned.

Ben Peck

October 13, 2015
Tweet

More Decks by Ben Peck

Other Decks in Design

Transcript

  1. #DesignForUtility
    @ B E N P E C K • @ F R O N T • @ P D A U TA H

    View Slide

  2. S T U D E N T S F I G H T I N G F O R U X
    uxd.byu.edu • @byuuxd

    View Slide

  3. S O F T WA R E T H AT M A K E S P E O P L E S M A RT E R
    www.instructure.com • @instructure

    View Slide

  4. T H E C O N F E R E N C E F O R U X + P M
    www.frontutah.com • @frontutah

    View Slide

  5. # D E S I G N F O R U T I L I T Y
    1. Art
    2. Design
    3. Interaction Design
    Investigate
    Involve
    Imagine
    Iterate
    Illustrate
    Interface
    Interact
    Implement
    8I

    View Slide

  6. # D E S I G N F O R U T I L I T Y
    1. Art
    2. Design
    3. Interaction Design
    Imagine
    Iterate
    Illustrate
    3I

    View Slide

  7. A RT
    ART: (noun) the expression or application of human
    creative skill and imagination, typically in a visual form
    such as painting or sculpture, producing works to be
    appreciated primarily for their beauty or emotional power.

    View Slide

  8. View Slide

  9. “Creativity is allowing yourself to make mistakes. Art is
    knowing which ones to keep.”
    - Paul Rand

    View Slide

  10. D E S I G N
    DESIGN: (noun) a specification of an object, manifested by
    some agent, intended to accomplish goals, in a particular
    environment, using a set of primitive components, satisfying
    a set of requirements, subject to some constraints.

    View Slide

  11. View Slide

  12. “Design is the method of putting form and content together.
    Design, just as art, has multiple definitions; there is no single
    definition. Design can be art. Design can be aesthetics.
    Design is so simple, that's why it is so complicated.”
    - Paul Rand

    View Slide

  13. I N T E R A C T I O N D E S I G N
    The practice of designing interactive digital products,
    environments, systems, and services with the main focus
    being on behavior.

    View Slide

  14. U T I L I T Y
    The state of being useful, profitable, or beneficial. 

    To the user and creators.

    View Slide

  15. Investigate
    Involve
    Imagine
    Iterate
    Illustrate
    Interface
    Interact
    Implement
    8I

    View Slide

  16. Imagine
    Iterate
    Illustrate
    3I

    View Slide

  17. I M A G I N E
    ( M A P )
    Imagine
    Iterate
    Illustrate
    3I

    View Slide

  18. W H Y S I T E M A P ?

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. I T E R AT E
    ( D R A W )
    h t t p : / / w w w. s m a s h i n g m a g a z i n e . c o m / 2 0 1 1 / 1 2 / t h e - m e s s y - a r t - o f - u x - s k e t c h i n g /
    Imagine
    Iterate
    Illustrate
    3I

    View Slide

  23. W H Y ? S K E T C H

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. I L L U S T R AT E
    ( W I R E )
    Imagine
    Iterate
    Illustrate
    3I

    View Slide

  34. W H Y W I R E F R A M E ?

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. T O O L S
    +

    View Slide

  42. “Design is not just what it looks like and feels like.
    Design is how it works.”
    - Steve Jobs

    View Slide

  43. “[Interaction] Design is not just what it looks like and feels like.
    [Interaction] Design is how it works.”
    - Steve Jobs

    View Slide

  44. T H A N K S
    @ B E N P E C K • @ F R O N T • @ P D A U TA H

    View Slide