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.
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.
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.
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.
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.
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.