How toPrototypeLike a Pro Original iPod Prototype
A pictureis worth a thousand words A prototype is worth a thousand pictures
Early versionof an idea
Test able Early version of an idea
This is nota prototype
This is nota prototype
To answerquestionsand generate new ones
Failearly d an y ea pl ch
To Visualizeyour ideas
To Visualizeyour ideasand share themwith others
To Visualize your ideas and share them with othersTeam users investors clients
So you till youFake it make it
What makes a goodPrototype?
QuickYou can create multiple versions fastand iterate even faster!
Cheap You wouldnt mindthrowing it away andstarting all over again
Favorites Check-in ChatPictures Minimal Contains only core features
Testable You can put it in front ofpeople and have them try it out(instead of just telling them about it)
Measurable You can get thenumbers behind whatsworking and whats not.
And hopefully fun to create and use
How to create a greatPrototype?
Deﬁne stories,and identify tasks
Create a userﬂow diagram
Sketch roughinterface screens Photo courtesy of StevenVanwel on Flickr
2Build Photo courtesy of Mr. T in DC on Flickr
Main screen Login screenDesign main screens
Create UI states Update StatusProfile pop-up highlight update
Add user interaction
Test several prototypesTo get objective feedback
Decide whatto measureTo get accurate feedback
Choose theright usersTo get relevant feedback
Ask them tothink aloudTo get constant feedback
Interview them at the end To get even more feedback
Discuss resultswith your team
Test againwith users
Have yourteam playwith theprototype,instead ofwriting longspeciﬁcationdocuments
E nter Key note
Design toolwithoutfeature creep
clickable Fast SlowLow ﬁdelity High ﬁdelity Proto types
Basic shapes The ones you need, without thedistraction of the ones you dont need
Copy StyleVisual K Lstyles K LQuickly share styles across shapes
Masterslides- Less copy/paste- Update multiple pageswith a single change
HyperlinksAdd user interaction without writing code
ExportHyperlinks are preserved!
Test onDeviceWithout doing any extra work
Works withAdobe suite Copy Paste
And it costsless than $25 The whole iWork suite costs less than most mock-up and prototyping tools
Key not opiaLargest user interface library for Keynote Power point! and
To design interfaces andtest prototypes in hoursinstead of days
Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow ﬁdelity Finally! high ﬁdelity
Hundreds of UI buildingblocks for...
Windows Phone 7
Thousands of companies use it!
And everyone loves it!
I love Keynotopia prototyping templates.Used them to rapidly develop a ﬁtness appas part of Phoenix Startup Weekend, andended up winning the peoples choice andbest 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 Because it saves time and money!
$9 save you 9 hours Get it at Keynotopia