From MozillaWiki
Jump to: navigation, search

Back to Labs.

How to Prototype

This page is currently just a brainstorm, but it will (hopefully) eventually evolve into a full guide on how to build prototypes and mock-ups for use in the Labs Concept Series and other Labs projects.

Philosophy and Guidelines

  • The goal is to demonstrate software's look and feel with the least amount of work possible. Fakery, magic tricks, and hacks are all encouraged here.
  • Use paper storyboards if possible; as Mike Beltzner has said, presenting something that looks messy and unfinished will make the audience feel more comfortable in providing constructive criticism, as they're not destroying someone's hard work. It's also trivial for people to make their own paper storyboards, so it allows the process to be more participatory.


  • Use the technologies of the open web! This is what many of Aza's mock-ups use and people often mistake them for Flash or even a custom desktop application, yet they're very agile tools and are also extremely easy to distribute.
  • Consider using Ubiquity, which was designed with rapid prototyping in mind.
  • For screencasts on OS X, Aza recommends using ScreenFlow by Vara Software ($99) in conjunction with Apple Keynote.