My prototypes run the spectrum from conceptual mockups through sketches to interactive code that can go in to final production. Each type has benefits and costs based on available resources and stage of development. I believe firmly in discovering problems as early as possible in projects as the later an issue is found the more costly & disruptive it is to fix it.

Animated Prototypes

This stop-motion method has it’s roots in film making and can be a powerful tool for communicating interactivity without using annotations.

This nice thing about stop-motion is that you can use your existing tools whether that’s software in the video above or pencil & paper in the next example.

Paper Sketching

Pencil to paper is the quickest and most ubiquitous design tool I use. It’s rare that I don’t start with a rough sketch. In this video I’ve taken a refined itteration of an earlier sketch and then used a combination of physical cutting & virtual copy & paste to create a walk through of a design.

Lofi prototyping

This is where the concept rubber meets the development road. Each and every project is different, I tailor my output in this design bucket to meet the specific needs of the project – just enough to communicate the design intent of various proposals and allow the team to go deep on suitable candidate solutions.

Click the image above to launch a prototype for Follow The Money, an open source project I run.

Hifi prototyping

It’s my belief that hifi prototypes (ones which are only used for presentation, not production) are not the best use of a designers time. I prefer to communicate the design intent using quicker methods. On the other hand if the prototype is to be used for production, having the designer write the code increases the risk of quality issues. With that all said, I have produced html mockups of designs, this one was used to communicate the solution to this workflow to a remote team.