Download - How to prototype like a pro
Prototype
Like a Pro
Original iPod Prototype
How to
A prototype is worth a thousand pictures
A picture is worth a thousand
words
What's a prototype?
Early versionof an idea
Testable
Early versionof an idea
This is nota prototype
This is nota prototype
This is
Why Prototype?
To answer questions
and generate new ones
Validate yourassumptions
compare alternatives
Fail early
and cheapl
y
To Visualize your ideas
and share them with others
To Visualize your ideas
Teaminvestors clients
users
and share them with others
To Visualize your ideas
So youFake it
till youmake it
What makes a good
Prototype?
QuickYou can create multiple
versions fastand iterate even faster!
CheapYou wouldn't mind
throwing it away and starting all over again
MinimalContains onlycore features
Pictures ChatFavorites Check-in
TestableYou can put it in front of
people and have them try it out(instead of just telling them about it)
MeasurableYou can get the
numbers behind what's working and what's not.
And hopefully fun to create and use
How to create
a great
Prototype?
1Plan
Define stories, and identify tasks
Create a user flow diagram
Sketch rough interface screens
Photo courtesy of StevenVanwel on Flickr
2BuildPhoto courtesy of Mr. T in DC on Flickr
Design main screens
Login screen
Main screen
Create UI states
Profile pop-up
Update Status
highlight update
Add user interaction
3Test
Test several prototypesTo get objective feedback
Decide what to measureTo get accurate feedback
Choose the right usersTo get relevant feedback
Ask them to think aloudTo get constant feedback
Interview them at the end
To get even more feedback
4Refine
Discuss results with your team
Integrate findings
Test againwith users
5Share
Have your team play with the prototype, instead of writing long specification documents
Enter Keynote
Design tool
without feature creep
SlowLow fidelity High fidelity
Fastclickable
Prototypes
BasicshapesThe ones you need, without the
distraction of the ones you don't need
AlignmentandSnapping
Visualstyles
K L
K L
Copy Style
Quickly share styles across shapes
Master slides
- Less copy/paste
- Update multiple pages with a single change
HyperlinksAdd user interaction without writing code
Slide Transitions
Export
Hyperlinks are preserved!
Test on DeviceWithout doing any extra work
Works with Adobe suite
CopyPaste
And it costs less than $25
The whole iWork suite costs less than most mock-up and prototyping tools
Keynotopia
Largest user interface library for Keynote
and Powerpoint!
To design interfaces and test prototypes
in hours instead of days
Fast
low fidelity
Slow
high fidelityFinally!
Papersketches
MockupsWireframes
CompsHTML /JS /
Flash
Hundreds of UI building blocks for...
iPad
iPhone
Web/Desktop
Android
BlackBerry
Windows Phone 7
and Facebook
Thousands of companies use it!
And everyone loves it!
Because it saves time and money!
I love Keynotopia prototyping templates. Used them to rapidly develop a fitness app as part of Phoenix Startup Weekend, and ended up winning the peoples choice and best presentation!
-Matt Clower, iOS developer
I work for a major corporation and my prototype consisted of over 150 slides. Keynotopia turned 60 days worth of work to 20. The executives loved the presentation and are contemplating implementing the app.
-Shawn Smith, UX Designer
Get it at Keynotopia
$9 save you 9 hours