Rapid Prototyping Tools & Best Practices

Joe Robinson

Lesson 10

Rapid prototyping can mean the difference between quickly finding your path to a successful product and toiling away at a pipe-dream for months. Putting together a prototype will force you to think through the details and user experience of your product ideas. Once you have a prototype, you'll be able to show it to people and collect detailed feedback.

This lesson is intended to help you get started with rapid prototyping. We'll start with an overview of prototyping, learn from some inspiring examples, and explore some popular tools.

Aardvark was a social search engine that Google acquired in 2010. Before deciding on social search, they explored several different products until they found one that took off. Here's the thing, though: they didn't actually build the products - they faked them. Using "Wizard of Oz" prototyping, they would do things like manually routing search queries to people who could answer them.

Read about Aardvark and think about how you could be testing your own startup ideas with prototypes.

Rapid prototyping can happen in code (not recommended unless you're an experienced front-end developer). Jumping straight in to HTML can help you focus on content and data rather than aesthetics, and nothing beats a prototype you can play around with on the device you'll be building for in the end.

Learn how 42Floors.com puts HTML prototyping to work in their product development process.

Pencil & Paper: sketch your ideas! It's easy, and you should already be familiar with how to use this tool, so no learning curve!

Balsamiq: a personal favorite. Easy to use, preloaded with lots of common UI controls, and linkable for interactive prototypes. Note that the quirky design is intentional: it's meant to keep you from thinking too much about the aesthetic.

WebZap: an awesome plugin for Photoshop. Check out their videos to see how quickly you can create common layouts.

Bootstrap: if you want to prototype in code, Bootstrap is a great way to skip a lot of the basics of implementing a simple UI. Only recommended for experienced developers.

Give the Balsamiq web demo a try. It's a great tool that is easy to get started with.

Instructor

Joe Robinson

I'm a product designer & builder currently working on the discovery team at Square. We focus on helping buyers discover sellers and providing useful analytics to both. I also run Designers + Geeks, a fun community of artists, designers and technologists in San Francisco, New York, and Los Angeles. You can find me on Twitter.