Slides from the first meetup: www.meetup.com/Prototyping-User-Experiences-NYC-Meetup/events/228087266/

1. Prototyping User
Experiences NYC Meetup
Francesco Bertocci
UX/UI Designer and Founder of Free&Willing
Connect at FreeAndWilling.com/m/fbmore
Feb 9th, 2016, New York @theHackerati
theHackerati.com
SPONSOR

2. Today
Part 1: Useful to everyone
- What is a Prototype?
- Why it's good to prototype early and often
- Overview the panorama of prototyping tools
- Share favorite prototyping tools
Part 2: Hands-on
- We’ll create a basic mobile prototype in InVision & Principle

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

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

5. 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…

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

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

8. Built to learn

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

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

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

12. “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”

13. Iterate :)

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

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

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

17. Usually a prototype
can help.

18. Prototype
early and often

19. Examples

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

21. What’s THE
right tool?

22. It depends!
bit.ly/FWPrototypingTools

23. What are we
trying to learn?

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

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

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

27. Now let’s play :)

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

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

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

31. Prototyping User
Experiences NYC Meetup
Francesco Bertocci
UX/UI Designer and Founder of Free&Willing
Connect at FreeAndWilling.com/m/fbmore
Feb 9th, 2016, New York @theHackerati
theHackerati.com
SPONSOR