Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
make it better
Describing Designs
Traditional Design Specifications vs. Prototyping
make it better
Who’s this guy?
tweet @skotcarruthdescribing designs
prepared for san francisco ux designers
• Web design a...
make it better
When I was a boy…
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
Web Designer
describing designs
make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
•...
make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
•...
make it better
tweet @skotcarruth
prepared for san francisco ux designers
How do you coordinate with
all of these people?
...
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Documentation
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Each role has its deliverables
• User Researcher
• Information Architect
• Interaction Designer
• UI Design...
make it better
User Research
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Information Architecture
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Interaction Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
UI Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Visual Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Traditional specs can work well when:
• There are many specialists on the team
• There is ample time to cre...
make it better
But they also suck.
• TL;DR
• Time-intensive
• Hard to keep up-to-date
• What about testing?
tweet @skotcar...
make it better
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs
make it better
The Prototype
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
It’s about mindset
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
descri...
make it better
tweet @skotcarruth
What you make depends on
what you want to learn.
prepared for san francisco ux designers...
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wirefr...
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wirefr...
make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Func...
make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Func...
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
InVision
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Prototypes are more powerful…
• A picture’s worth 1000 words
• Easier to test with
• Easier than ever to cr...
make it better
tweet @skotcarruth
But don’t forget:
there’s no magic bullet.
prepared for san francisco ux designers
descr...
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs
make it better
Questions?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
skot@philosophie.is
Nächste SlideShare
Wird geladen in …5
×

Describing Design

1.331 Aufrufe

Veröffentlicht am

A comparison of traditional UX design documentation vs using prototypes to communicate and test design. Given at the San Francisco UX Designers meetup in January 2016.

Veröffentlicht in: Design

Describing Design

  1. 1. make it better Describing Designs Traditional Design Specifications vs. Prototyping
  2. 2. make it better Who’s this guy? tweet @skotcarruthdescribing designs prepared for san francisco ux designers • Web design and development since 1996 • Founded Philosophie in 2008 • Worked on 200+ web/mobile projects • UXD Instructor, UXDi Curriculum Fellow @ GA • New to San Francisco!
  3. 3. make it better When I was a boy… tweet @skotcarruth prepared for san francisco ux designers describing designs
  4. 4. make it better tweet @skotcarruth prepared for san francisco ux designers Web Designer describing designs
  5. 5. make it better Now we have specialization • User Researcher • Information Architect • Interaction Designer • UI Designer • Visual/Graphic Designer • Motion Designer tweet @skotcarruth prepared for san francisco ux designers describing designs
  6. 6. make it better Now we have specialization • User Researcher • Information Architect • Interaction Designer • UI Designer • Visual/Graphic Designer • Motion Designer tweet @skotcarruth prepared for san francisco ux designers • Content Strategist • Business Analyst • Product Manager • Front-end Developer • Back-end Developer • DevOps describing designs
  7. 7. make it better tweet @skotcarruth prepared for san francisco ux designers How do you coordinate with all of these people? describing designs
  8. 8. make it better The Spec tweet @skotcarruth prepared for san francisco ux designers describing designs
  9. 9. make it better Documentation tweet @skotcarruth prepared for san francisco ux designers describing designs
  10. 10. make it better Each role has its deliverables • User Researcher • Information Architect • Interaction Designer • UI Designer • Visual/Graphic Designer • Motion Designer tweet @skotcarruth prepared for san francisco ux designers describing designs
  11. 11. make it better User Research tweet @skotcarruth prepared for san francisco ux designers describing designs
  12. 12. make it better Information Architecture tweet @skotcarruth prepared for san francisco ux designers describing designs
  13. 13. make it better Interaction Design tweet @skotcarruth prepared for san francisco ux designers describing designs
  14. 14. make it better UI Design tweet @skotcarruth prepared for san francisco ux designers describing designs
  15. 15. make it better Visual Design tweet @skotcarruth prepared for san francisco ux designers describing designs
  16. 16. make it better Motion Design tweet @skotcarruth prepared for san francisco ux designers describing designs
  17. 17. make it better Motion Design tweet @skotcarruth prepared for san francisco ux designers describing designs
  18. 18. make it better The Spec tweet @skotcarruth prepared for san francisco ux designers describing designs
  19. 19. make it better The Spec tweet @skotcarruth prepared for san francisco ux designers describing designs
  20. 20. make it better The Spec tweet @skotcarruth prepared for san francisco ux designers describing designs
  21. 21. make it better The Spec tweet @skotcarruth prepared for san francisco ux designers describing designs
  22. 22. make it better Traditional specs can work well when: • There are many specialists on the team • There is ample time to create them • They are done well • Development is outsourced or remote • Work is done in a waterfall fashion • The scope doesn’t change much tweet @skotcarruth prepared for san francisco ux designers describing designs
  23. 23. make it better But they also suck. • TL;DR • Time-intensive • Hard to keep up-to-date • What about testing? tweet @skotcarruth prepared for san francisco ux designers describing designs
  24. 24. make it better tweet @skotcarruth prepared for san francisco ux designers describing designs
  25. 25. make it better tweet @skotcarruth prepared for san francisco ux designers 1) Communicate describing designs
  26. 26. make it better tweet @skotcarruth prepared for san francisco ux designers 1) Communicate 2) Test describing designs
  27. 27. make it better The Prototype tweet @skotcarruth prepared for san francisco ux designers describing designs
  28. 28. make it better It’s about mindset tweet @skotcarruth prepared for san francisco ux designers 1) Communicate 2) Test describing designs
  29. 29. make it better tweet @skotcarruth What you make depends on what you want to learn. prepared for san francisco ux designers describing designs
  30. 30. make it better tweet @skotcarruth prepared for san francisco ux designers http://www.cennydd.com/writing/why-i-dont-wireframe-much describing designs
  31. 31. make it better tweet @skotcarruth prepared for san francisco ux designers http://www.cennydd.com/writing/why-i-dont-wireframe-much describing designs
  32. 32. make it better Types of Prototypes tweet @skotcarruth prepared for san francisco ux designers Low Visual Fidelity Low Functional Fidelity High Functional Fidelity High Visual Fidelity Paper Prototypes Wireframes Comps Proof of concept Working Software Static front-end describing designs
  33. 33. make it better Types of Prototypes tweet @skotcarruth prepared for san francisco ux designers Low Visual Fidelity Low Functional Fidelity High Functional Fidelity High Visual Fidelity Paper Prototypes Wireframes Comps Proof of concept Static front-end Working Software describing designs
  34. 34. make it better Prototype on Paper (POP) tweet @skotcarruth prepared for san francisco ux designers describing designs
  35. 35. make it better Prototype on Paper (POP) tweet @skotcarruth prepared for san francisco ux designers describing designs
  36. 36. make it better InVision tweet @skotcarruth prepared for san francisco ux designers describing designs
  37. 37. make it better Framer.js tweet @skotcarruth prepared for san francisco ux designers describing designs
  38. 38. make it better Framer.js tweet @skotcarruth prepared for san francisco ux designers describing designs
  39. 39. make it better Prototypes are more powerful… • A picture’s worth 1000 words • Easier to test with • Easier than ever to create • More fun tweet @skotcarruth prepared for san francisco ux designers describing designs
  40. 40. make it better tweet @skotcarruth But don’t forget: there’s no magic bullet. prepared for san francisco ux designers describing designs
  41. 41. make it better tweet @skotcarruth prepared for san francisco ux designers 1) Communicate 2) Test describing designs
  42. 42. make it better Questions? tweet @skotcarruth prepared for san francisco ux designers describing designs skot@philosophie.is

×