Rapid Prototyping Resources

October 21, 2012 at 5:31pm
Home

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.

And here’s the special Riffle invite for FOWD attendees — jump the line. It’s good through this Friday, October 22nd.

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