– What is a “Prototype”? – Why it's good to prototype early and often – Overview of the panorama of prototyping tools

1. Feb 1st, 2017, New York
Francesco Bertocci
UX/UI Designer & Entrepreneur – Founder of Free&Willing
@fbmore / FNW.me/m/fbmore
“From Idea to Prototype”
Prototyping User Experiences Meetup
Meetup.com/Prototyping-User-Experiences-NYC-Meetup

2. – What is a “Prototype”?
– Why it's good to prototype early and often
– Overview the panorama of prototyping tools

3. What is a “Prototype”?

4. Anything that can
convey an idea or
product so that people
can interact with it…

5. The goal is to gather feedback
directly: from the user
indirectly: analyzing user behaviors
– or both

6. In general, a prototype is "visual"
and "clickable" or “tappable”…
but it could be something you
give voice commands to, in order
to do something…

7. Virtual reality headsets where interactions
can be as simple as rotating your head
in a different direction.

8. You send a text message to…
Reacts to your position…
Or your body temperature…

9. Built to learn

10. hence production
shortcuts are not only
acceptable,
are encouraged.

11. A prototype is…
– anything I can interact with
– that is built as quickly and cheaply
– where the main goal is to learn
…and iterate

12. Don’t fall
in love –
with an
idea.

13. “The easier it is to make
a prototype, the
less attached I am to it, making
it that much easier to
discard if I realize it isn’t the
best approach.”
https://medium.com/swlh/introducing-silver-lightweight-mobile-prototyping-in-sketch-3-cee46d267f1f#.i0ynou553
From “Introducing Silver: Lightweight Mobile Prototyping in Sketch 3”

14. Iterate :)

15. As new technologies and
ways to interact are
invented, the practical
definition of a prototype
will evolve.

16. What are your biggest
workflow issues…
internally or with your
clients?

17. …Communications?
…Not enough time?
…Budget?
…Productivity?

18. Usually a prototype
can help.

19. Prototype
early and often

20. Examples

21. https://www.youtube.com/watch?v=GrV2SZuRPv0 https://www.youtube.com/watch?v=CyPo9qqfA58&feature=youtu.be
Paper prototypes

22. A prototype must be
perceived as real

23. What’s THE
right tool?

24. It depends!
bit.ly/FWPrototypingTools

25. What are we
trying to learn?

26. What’s THE
right tool? :)
cooper.com/prototyping-tools

27. My favorites… at the moment ;)
InVision
Super fast click-throughs
easy to share
Principle for Mac
mobile + micro interactions
+ animations

28. Using with
Principle for Mac
https://www.youtube.com/watch?v=vFrivX021-A
Advanced prototypes (mobile)

29. Download Sketch Toolbox
sketchtoolbox.com
Download Sketch Trial
SketchApp.com
Download Craft
labs.invisionapp.com/craft

30. Get inVision (3 months free)
bit.ly/FWinVision
Download Principle for Mac
PrincipleforMac.com

31. Learn more about Sketch
80% Off Student Discount
designcode.io/freewilling

32. Sprint: How to Solve Big
Problems and Test New Ideas
in Just Five Days
Lean UX: Applying Lean
Principles to Improve User
Experience
Hooked: How to
Build Habit-
Forming Products

33. Feb 1st, 2017, New York
Francesco Bertocci
UX/UI Designer & Entrepreneur – Founder of Free&Willing
@fbmore / FNW.me/m/fbmore
“From Idea to Prototype”
Prototyping User Experiences Meetup
Meetup.com/Prototyping-User-Experiences-NYC-Meetup