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.
-
Design Better And Faster With Rapid Prototyping
Let's start with the basics. What is prototyping? Why do it? How to get started? Read through this overview to get a sense of what prototyping is all about.
-
The Aardvark Theory of Product: Fake It Till You Make It
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. -
Creating Interactive Prototypes With Keynote
Keynote and PowerPoint can be great tools for creating simple prototypes. You probably already have one of them, and there are many UI kits available for each.
Read this article to learn some of the best practices for prototyping in Keynote. -
Fake It. Trash It. Build It.
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. -
Rapid Prototyping Tools
There are TONS of prototyping tools. These are some of my favorites.
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.
Joe Robinson
Organizer, Designers + Geeks
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.
