Rapid prototyping resources

Here are the promised resources from my talk at the 2012 Future of Web Design conference in NYC. This is by no means a comprehensive list, but should be a good start. And here are my slides if you’re interested.

Choosing a tool:

Rapid Prototyping Tools — Adaptive Path’s article on choosing a tool, with a spreadsheet overview of them

What are the best tools for rapidly prototyping a web app? — nice Quora thread

What are the prototyping tools for mobile apps? — another Quora thread, for mobile apps

Protomoto — huge grid of available tools

Paper prototyping:

Pretty Sketchy — the importance of sketchbooks

The Messy Art of UX Sketching — overview of techniques

Sketchboarding: Discover Better, Faster UX Solutions — very cool ideas

Sketching tools:

Adaptive Path’s Favorite Tools for Sketching — great details on the pens and markers that are most useful. I also like a highlighter.

Tools for Sketching User Experience — more tips on tools and sketchboarding

Pixel Pads — notepads in iPad or iPhone shape

Printable Paper — all kinds of graph paper you can print yourself

UI Stencils — rulers and metal stencils

Smashing Magazine’s Wireframing Templates — lots more templates

Digital prototyping:

Time to Dump Wireframes — great overview of articles on the end of wireframes

Designing Better and Faster with Rapid Prototyping — instructive article discussing process and types

Digital tools:

OmniGraffle — great for site maps, wireframes and prototypes

Balsamiq — simple sketchy wireframes, with symbol libraries

iOS source file — by Teehan + Lax, many others there too

Proto.io — web tool for making iOS prototypes

Keynote — presentation software that can also make high fidelity prototypes

Keynotopia — library of keynote templates

HotGloo — mentioned by Dave Stein at Behance

HTML prototyping:

CSS and Design Frameworks for Rapid Prototyping and Web Applications — good comparison of Bootstrap vs Foundation and others

Dive into responsive prototyping with Foundation — explanation on A List Apart by the founder of Foundation

Spike-driven design — interesting idea from Pivotal Labs

HTML tools:

HTML5 Boilerplate — The standby, built and tested by expert developers

Semantic.gs — My favorite grid system. Keeps grid classes out of your markup

LESS (or SASS + Compass) — Essential tool for modern CSS development. Extends CSS to include variables, nesting, and functions, which all compile into normal CSS.

Codekit — nice compiler for all sorts of preprocessors

Coda — my favorite HTML editor

Coda Clips — library of clips for the above

CSS Tricks — Chris Coyier’s awesome collection of code clips, tutorials, demos, forums…

Emmet — toolkit of CSS-like expressions that can be expanded into HTML/CSS

Wirefy — browser-based responsive wireframe tool

Foundation — front-end framework

Mobile-First Foundation — a mobile-first version of Foundation, on github

Bootstrap — Twitter’s framework for web apps

Punch — “modern web publishing framework” that includes data layers

CodeIgniter — PHP framework

CakePHP and Croogo — simple PHP framework and CMS

99 Lime / HTML Kickstart — a collection of ultra-lean HTML5, CSS, and jQuery building blocks (ht @kevanmacgee)

Lean UX:

Getting Out of the Deliverables Business — Smashing Magazine’s comprehensive overview of a lean UX process

Does Artistic Collaboration Ever Work? — The Atlantic

Inside Agile — Hugh Beyer

Agile Designer-Developer Collaboration with Scrum — Allen Manning

Emerging Best Practices in Agile UX — Agile Product Design

Should I focus on a good user experience or push something out quickly? — Quora thread with feedback from Jason Fried and more

User research tools:

What is remote usability research? — overview

User Testing — watch users on your site, selected by demographic or technical expertise

Verify App — test concepts for recall, personality, and more

Usabilla — run surveys on site visitors, or get videos of them using your site

Qualaroo — surveys that sync with Kissmetrics

The Whicher — simple A/B testing


Agile Experience Design NYC


Paper Prototyping by Carolyn Snyder

Prototyping: A Practitioner’s Guide by Todd Zaki Warfel

Everything by A Book Apart

The Shape of Design by Frank Chimero will make you love your job

People cited:


and a partridge in a pear tree.

comments powered by Disqus