Embed Size (px)
Citation preview
Prototyping
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
Prototyping
Prototype nouna 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
Prototyping
A prototype is not the final product,
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 4
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
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
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
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
Sense
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
Common mistakes
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 11
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
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
The right tool
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 14
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
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
Fidelity
● Visual fidelity● Functional fidelity● Content fidelity
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 17
Tools
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
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
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
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
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
Atomic
The fastest way to design beautiful interactions.
http://atomic.io/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 27
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
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
Designing Twitter Video
30
HTML/CSS
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 31
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
Thanks!@mattdothurley
@ArlenInUX
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 33
Resources
● Designing Sensehttps://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 Prototypinghttp://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
● Top 10 Evaluation Criteria when Selecting a Prototyping Toolhttp://www.savahapp.com/blog/ten-evaluation-criteria-on-selecting-a-prototyping-tool/
34
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/111742
● Transitional Interfaceshttps://medium.com/@pasql/transitional-interfaces-926eb80d64e3
● Designing Twitter Videohttp://paulstamatiou.com/twitter-video/
35
