How to prototype like a pro
-
Upload
amir-khella -
Category
Design
-
view
41.649 -
download
2
description
Transcript of How to prototype like a pro
![Page 1: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/1.jpg)
Prototype
Like a Pro
Original iPod Prototype
How to
![Page 2: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/2.jpg)
A prototype is worth a thousand pictures
A picture is worth a thousand
words
![Page 3: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/3.jpg)
What's a prototype?
![Page 4: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/4.jpg)
![Page 5: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/5.jpg)
Early versionof an idea
![Page 6: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/6.jpg)
Testable
Early versionof an idea
![Page 7: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/7.jpg)
This is nota prototype
![Page 8: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/8.jpg)
This is nota prototype
![Page 9: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/9.jpg)
This is
![Page 10: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/10.jpg)
![Page 11: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/11.jpg)
Why Prototype?
![Page 12: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/12.jpg)
To answer questions
and generate new ones
![Page 13: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/13.jpg)
Validate yourassumptions
![Page 14: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/14.jpg)
compare alternatives
![Page 15: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/15.jpg)
Fail early
and cheapl
y
![Page 16: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/16.jpg)
To Visualize your ideas
![Page 17: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/17.jpg)
and share them with others
To Visualize your ideas
![Page 18: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/18.jpg)
Teaminvestors clients
users
and share them with others
To Visualize your ideas
![Page 19: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/19.jpg)
So youFake it
till youmake it
![Page 20: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/20.jpg)
What makes a good
Prototype?
![Page 21: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/21.jpg)
QuickYou can create multiple
versions fastand iterate even faster!
![Page 22: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/22.jpg)
CheapYou wouldn't mind
throwing it away and starting all over again
![Page 23: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/23.jpg)
MinimalContains onlycore features
Pictures ChatFavorites Check-in
![Page 24: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/24.jpg)
TestableYou can put it in front of
people and have them try it out(instead of just telling them about it)
![Page 25: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/25.jpg)
MeasurableYou can get the
numbers behind what's working and what's not.
![Page 26: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/26.jpg)
And hopefully fun to create and use
![Page 27: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/27.jpg)
How to create
a great
Prototype?
![Page 28: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/28.jpg)
1Plan
![Page 29: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/29.jpg)
Define stories, and identify tasks
![Page 30: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/30.jpg)
Create a user flow diagram
![Page 31: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/31.jpg)
Sketch rough interface screens
Photo courtesy of StevenVanwel on Flickr
![Page 32: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/32.jpg)
2BuildPhoto courtesy of Mr. T in DC on Flickr
![Page 33: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/33.jpg)
Design main screens
Login screen
Main screen
![Page 34: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/34.jpg)
Create UI states
Profile pop-up
Update Status
highlight update
![Page 35: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/35.jpg)
Add user interaction
![Page 36: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/36.jpg)
3Test
![Page 37: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/37.jpg)
Test several prototypesTo get objective feedback
![Page 38: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/38.jpg)
Decide what to measureTo get accurate feedback
![Page 39: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/39.jpg)
Choose the right usersTo get relevant feedback
![Page 40: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/40.jpg)
Ask them to think aloudTo get constant feedback
![Page 41: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/41.jpg)
Interview them at the end
To get even more feedback
![Page 42: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/42.jpg)
4Refine
![Page 43: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/43.jpg)
Discuss results with your team
![Page 44: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/44.jpg)
Integrate findings
![Page 45: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/45.jpg)
Test againwith users
![Page 46: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/46.jpg)
5Share
![Page 47: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/47.jpg)
Have your team play with the prototype, instead of writing long specification documents
![Page 48: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/48.jpg)
Enter Keynote
![Page 49: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/49.jpg)
Design tool
without feature creep
![Page 50: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/50.jpg)
SlowLow fidelity High fidelity
Fastclickable
Prototypes
![Page 51: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/51.jpg)
BasicshapesThe ones you need, without the
distraction of the ones you don't need
![Page 52: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/52.jpg)
AlignmentandSnapping
![Page 53: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/53.jpg)
Visualstyles
K L
K L
Copy Style
Quickly share styles across shapes
![Page 54: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/54.jpg)
Master slides
- Less copy/paste
- Update multiple pages with a single change
![Page 55: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/55.jpg)
HyperlinksAdd user interaction without writing code
![Page 56: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/56.jpg)
Slide Transitions
![Page 57: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/57.jpg)
Export
Hyperlinks are preserved!
![Page 58: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/58.jpg)
Test on DeviceWithout doing any extra work
![Page 59: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/59.jpg)
![Page 60: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/60.jpg)
Works with Adobe suite
CopyPaste
![Page 61: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/61.jpg)
And it costs less than $25
The whole iWork suite costs less than most mock-up and prototyping tools
![Page 62: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/62.jpg)
Keynotopia
Largest user interface library for Keynote
and Powerpoint!
![Page 63: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/63.jpg)
To design interfaces and test prototypes
in hours instead of days
![Page 64: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/64.jpg)
Fast
low fidelity
Slow
high fidelityFinally!
Papersketches
MockupsWireframes
CompsHTML /JS /
Flash
![Page 65: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/65.jpg)
Hundreds of UI building blocks for...
![Page 66: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/66.jpg)
iPad
![Page 67: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/67.jpg)
iPhone
![Page 68: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/68.jpg)
Web/Desktop
![Page 69: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/69.jpg)
Android
![Page 70: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/70.jpg)
BlackBerry
![Page 71: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/71.jpg)
Windows Phone 7
![Page 72: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/72.jpg)
and Facebook
![Page 73: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/73.jpg)
Thousands of companies use it!
![Page 74: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/74.jpg)
And everyone loves it!
![Page 75: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/75.jpg)
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
![Page 76: How to prototype like a pro](https://reader034.fdocuments.net/reader034/viewer/2022051512/53f0e2088d7f72e94b8b46cb/html5/thumbnails/76.jpg)
Get it at Keynotopia
$9 save you 9 hours