Prototyping: what is it, why should you care, common mistakes, and how to choose the right tools.
Presented at IxDA Sydney Meetup: The Prototype Edition - 28 May 2015
2. Overview
● What is prototyping?
● Why should I care?
● Common mistakes
● Choosing the right tool
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 2
3. Prototyping
Prototype noun
a first or preliminary version of a device or
vehicle from which other forms are developed.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 3
4. Prototyping
A prototype is not the final product,
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 4
5. Prototyping
A prototype is not the final product, it’s a
simulation of the final product.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 5
6. Prototyping
A prototype is not the final product, it’s a
simulation of the final product.
(Or a part of the final product)
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 6
7. Why prototype?
● Prototyping is generative
● Prototypes show, not tell
● Prototyping encourages collaboration
● Prototyping creates a rapid feedback loop,
which ultimately reduces risk
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 7
8. Why prototype?
● Prototyping is generative
● Prototypes show, not tell
● Prototyping encourages collaboration
● Prototyping creates a rapid feedback loop,
which ultimately reduces risk
● Prototyping saves time, effort, and money
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 8
10. Sense
“To get to where we are today, we’ve
iterated literally hundreds of times. By being
able to 3D print and laser cut our way out of
almost anything, we’ve settled on a design
that’s beautiful, and also functions perfectly
with the sensors we have inside.”
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 10
12. Common mistakes
● Prototyping too little, or too much
● Prototyping the wrong thing
● Not setting expectations for what the
prototype will be
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 12
13. Common mistakes
● Determine what you need to learn
● Set appropriate expectations
● Determine the right level of fidelity
● Pick the right tool for the job
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 13
14. The right tool
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 14
15. The right tool
● Fidelity
● Familiarity / learning curve
● Time and effort
● Support for multiple devices
● Collaboration / feedback
● Integration with other tools
● Versioning
● Price
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 15
16. The right tool
● Fidelity
● Familiarity / learning curve
● Time and effort
● Support for multiple devices
● Collaboration / feedback
● Integration with other tools
● Versioning
● Price
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 16
17. Fidelity
● Visual fidelity
● Functional fidelity
● Content fidelity
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 17
19. Paper
Paper prototyping is a widely used method in
the user-centered design process, a process
that helps developers to create software that
meets the user's expectations and needs—in
this case, especially for designing and testing
user interfaces.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 19
20.
21. Balsamiq
Balsamiq Mockups is a rapid wireframing tool
that helps you Work Faster & Smarter. It
reproduces the experience of sketching on a
whiteboard, but using a computer.
http://balsamiq.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 21
22. Sketch
Easily create complex shapes with our state-of-
the-art vector boolean operations and take
advantage of our extensive layer styles.
Sketch’s fully vector-based workflow makes it
easy to create beautiful, high-quality artwork
from start to finish.
http://bohemiancoding.com/sketch/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 22
23. InVision
The world's leading prototyping, collaboration &
workflow platform.
http://invisionapp.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 23
24.
25.
26. Proto.io
Create fully-interactive high-fidelity prototypes
that look and work exactly like your app should.
No coding required.
http://proto.io
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 26
27. Atomic
The fastest way to design beautiful interactions.
http://atomic.io/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 27
28. Pixate
Pixate is a next-generation mobile interaction
design service aimed at helping designers
create complex animations and interactions
without writing code.
http://www.pixate.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 28
29. Framer.js / Framer Studio
Invent, design and experiment with interaction.
http://framerjs.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 29
31. HTML/CSS
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 31
32. Summary
● Determine what you need to learn
● Set appropriate expectations
● Determine the right level of fidelity
● Pick the right tool for the job
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 32
34. Resources
● Designing Sense
https://vimeo.com/106241277
● Prototyping: A Practitioner's Guide
http://www.amazon.com/Prototyping-Practitioners-Todd-
Zaki-Warfel/dp/1933820217
● Design Better And Faster With Rapid Prototyping
http://www.smashingmagazine.com/2010/06/16/design-
better-faster-with-rapid-prototyping/
● Top 10 Evaluation Criteria when Selecting a Prototyping
Tool
http://www.savahapp.com/blog/ten-evaluation-criteria-
on-selecting-a-prototyping-tool/
34
35. Resources
● Paper Prototyping: The Fast and Easy Way to Design
and Refine User Interfaces
http://www.amazon.com/Paper-Prototyping-Interfaces-
Interactive-Technologies/dp/1558608702
● Linking Mockups Together (Balsamiq)
http://support.balsamiq.com/customer/portal/articles/111
742
● Transitional Interfaces
https://medium.com/@pasql/transitional-interfaces-
926eb80d64e3
● Designing Twitter Video
http://paulstamatiou.com/twitter-video/
35
Editor's Notes
Simulation of “part” of the final product
Paper prototyping is a technique that allows you to create and test user interfaces quickly and cheaply.
What its good for -
testing an idea quickly and cheaply
Getting people on the same page
Extracting ideas from teams e.g. Des, SME’s etc
Simple flows
Somewhat disposable, you don't get too attached
What its good for -
Simple flows
Simple interactions
testing an idea quickly
Capturing feedback from teams and stakeholders
What its good for -
Low learning curve - compared to photoshop
Lo to Hi Fi
Exports code
Not actually a prototyping tool
What its good for -
using hotspots and slicing
Simple to complex flows
Simple interactions, transitions and gestures
Validating an idea quickly
Can make a prototype from any program e.g. paper to sketch and photoshop
Capturing feedback from teams and stakeholders
This is kinda how inVision feels.
This is how the next few tools look like. They are good for creating high fidelity prototypes with complex interactions and flows.
Creating hi fidelity interactive prototypes
Mobile only
They claim that “High fidelity is now light weight.”
Its really great for creating and refining a single interaction.
This is a really great case study on the process of prototyping twitter video using framer.js