Sketch before you Etch: How to Prototype like a Boss

Hello.

@playfulpixel

Let’s get down to business.

Who is prototyping at their job today?

Agenda.

• Part One: Sketching

• Part Two: Feedback

• Part Three: Iterate

• Tools & Frameworks

• Manager Buy In

Part One: Sketching.

What happened?

Part Two: Getting Feedback.

A few tips:

• Don’t give a guided tour

• Shut up

• Ask open ended questions

• Follow up

• Let the user fail

• Observe the user

Part Two [ish]: Writing the questions.

Part Not Quite Three: Asking the questions.

What happened?

Improvising & the value of failing fast.

Part Three: Iterating.

Part [still] Three: Working together.

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!].

Paper is great and all, but…

Medium-fidelity prototypes.

Medium-fidelity [web].

• Mockingbird

• Balsamiq

• Power Mockup

• InvisionApp

Medium-fidelity [desktop].

• Axure

• Visio

• Omnigraffle

• Flinto

• Keynote

• Sketch 3

High-fidelity prototypes.

Frameworks

• Twitter Bootstrap

• DivShot

• JetStrap

• Zurb Foundation

• Unsemantic

• jQueryUI

Incorporating prototypes into your project.

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

Manager buy in.

The arguments.

• “It will take too much time away from development, pushing our deadline back.”

• “We need documentation!”

What else?

Thanks.

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