Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Describing Design

1 355 vues

Publié le

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.

Publié dans : 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

×