Sketch Before You Etch Workshop given at General Assembly on 12/10/14.

1. Sketch before you Etch:
How to Prototype like a Boss

2. Hello.
@playfulpixel

3. Let’s get down to business.

4. Who is prototyping at their job
today?

5. Agenda.
• Part One: Sketching
• Part Two: Feedback
• Part Three: Iterate
• Tools & Frameworks
• Manager Buy In

7. Part One: Sketching.

8. What happened?

9. Part Two: Getting Feedback.

10. A few tips:
• Don’t give a guided tour
• Shut up
• Ask open ended questions
• Follow up
• Let the user fail
• Observe the user

11. Part Two [ish]: Writing the
questions.

12. Part Not Quite Three: Asking
the questions.

13. What happened?

14. Improvising & the value of
failing fast.

15. Part Three: Iterating.

16. Part [still] Three: Working
together.

17. Some things to remember:
• Don’t forget to include the business!
• Observe as much as you possibly can.
• Some ideas just don’t work [that’s okay!].

18. Paper is great and all, but…

19. Medium-fidelity prototypes.

21. Medium-fidelity [web].
• Mockingbird
• Balsamiq
• Power Mockup
• InvisionApp

22. Medium-fidelity [desktop].
• Axure
• Visio
• Omnigraffle
• Flinto
• Keynote
• Sketch 3

23. High-fidelity prototypes.

24. Frameworks
• Twitter Bootstrap
• DivShot
• JetStrap
• Zurb Foundation
• Unsemantic
• jQueryUI

25. Incorporating prototypes into
your project.

26. When is it appropriate?
• Whenever you have a new feature you aren’t
100% sure about
• When you’re demonstrating a new process
• When you have vague requirements
• When the day ends in y

27. Manager buy in.

28. The arguments.
• “It will take too much time away from
development, pushing our deadline back.”
• “We need documentation!”

29. What else?

30. Thanks.

31. Resources
• Fabulous photos provided by:
• https://www.flickr.com/photos/butterflyworks/6802243939/sizes/l
• https://www.flickr.com/photos/124994351@N06/14358820280/sizes/l
• https://www.flickr.com/photos/34791101@N07/4091425531/sizes/l
• https://www.flickr.com/photos/21218849@N03/15129547690/sizes/l
• https://www.flickr.com/photos/92977429@N05/10235686725/sizes/l
• https://www.flickr.com/photos/arthaey/2386095170/sizes/l
• http://payload.cargocollective.com/1/2/83401/1849470/
healthy_beauty_TOC_v05_A_905.jpg