How to Build a Prototype

✍ This talk was recently presented at CocoaConf Chicago by Ben Lachman. Don’t hesitate to ask questions if you have them.

Slides (PDF, 39.6 MB):

##Session Notes

###Wire Frames

OmniGraffle/OmniGraffle Pro ($100/$200 MAS; $50 iPad)
Good multi purpose tool for wireframing, flow charting, etc.

Additional Resources for OmniGraffle: (Stencils)

Keynote ($20 MAS; $10 iPad)
Apple’s Presentation app that has become popular for wire framing.

Additional Resources for Keynote: (Stencils) (Templates)


Teehan+Lax Mockup templates (Free)
Great mockup elements. Best for iOS. Some Android.

Jonatan Castro (Free)
Mac OS X Lion PSDs

Joshua Geiger (Free)
Mac OS X Lion PSDs

Taylor Ling (Free)
Android UI Design Kit 4.3 (PSD/GIMP)

Android Design Elements (Free)
Official Android UI elements. Not quite as useful as a full PSD template, but good nonetheless.

LiveView (Free)
Great tool for viewing mockups, icons and artwork on device at scale.


Prototypes ($40)
Helps with creating clickable/tappable prototypes for iOS. Let’s you distribute them as device targeted websites.

AppCooker ($40)
On iPad prototypes. Has a free iOS player app that can install prototypes created by the app.

Briefs 2 (Mac w/iOS Client, $199) Advanced tool for creating complicated prototypes.

###Contact Info

Ben Lachman
Nice Mohawk Limited