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): http://nicemohawk.com/talks/prototypes/how-to-build-a-prototype-ben-lachman.pdf

##Session Notes

###Wire Frames

OmniGraffle/OmniGraffle Pro ($100/$200 MAS; $50 iPad)
Good multi purpose tool for wireframing, flow charting, etc.
http://www.omnigroup.com/omnigraffle

Additional Resources for OmniGraffle:
http://konigi.com/tools/omnigraffle-wireframe-stencils (Stencils)

Keynote ($20 MAS; $10 iPad)
Apple’s Presentation app that has become popular for wire framing.
http://apple.com/iwork/keynote

Additional Resources for Keynote:
http://keynotekungfu.com (Stencils)
http://keynotopia.com/keynote-mockups-templates (Templates)

###Mockups

Teehan+Lax Mockup templates (Free)
Great mockup elements. Best for iOS. Some Android.
http://www.teehanlax.com/downloads

Jonatan Castro (Free)
Mac OS X Lion PSDs
http://dribbble.com/shots/233227-Lion-Ui-Kit-Preview

Joshua Geiger (Free)
Mac OS X Lion PSDs
http://dribbble.com/shots/234655-OSX-Lion-GUI-Download

Taylor Ling (Free)
Android UI Design Kit 4.3 (PSD/GIMP) http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3-free-download/

Android Design Elements (Free)
Official Android UI elements. Not quite as useful as a full PSD template, but good nonetheless.
http://developer.android.com/design/downloads

LiveView (Free)
Great tool for viewing mockups, icons and artwork on device at scale.
http://zambetti.com/projects/liveview

###Prototyping

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

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

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

###Contact Info

Ben Lachman
Nice Mohawk Limited
http://nicemohawk.com
ben@nicemohawk.com
@blach