Prototyping

The purpose of prototyping is to study, discuss and test concepts and functional designs.
Picking the right prototyping tool is primarily guided by the purpose of the prototype.

Paper prototype: Responsive layout

With Paper prototyping we can quickly test early concepts and ideas using paper & Paper.

In this example we experimented with layout variations on paper so that we could easily try out many solutions with input from several people.

We have also used paper prototyping for quick user testing. I would act like the "computer", presenting the test user with UI components and acting out how the interface would behave as they were "interacting" with the paper interface.

Video prototype: Student gets a room

Video prototyping is a more elaborate way to show a concept. You show an example of what the product will be able to do in a video recording with real people and simple props that depict the product. Tools: simple video editing software like iMovie.

This example shows how video prototyping can be used to quickly "sketch" an idea with video to put it in a real world context. This prototype was made in ~ 8 hours from nothing. It doesn't have to be complicated.

Sometimes a video prototype can even earn the prize of Best Prototype at a Startup Weekend!
Edited with Final Cut Pro X.

Web App prototype: Edit listing

Functional prototypes come in varying levels of fidelity and complexity. They usually offer a way to link screens and elements together. I've worked with many tools to create functional prototypes such as Keynote, Axure, Invision and Balsamiq. I have also programmed prototypes using HTML, CSS and Javascript frameworks for websites and web apps and I have programmed mobile App prototypes; native with the XCode iOS development tools and cross platform with PhoneGap.

Teaser lin edit

An internal tool to edit the content and properties of Yellow Pages listings.

Prototypes [html, css and Javascript]:
 Company features
 Opening times
 Opening times variant with "same as above" function

Interaction Design study: video navigation

Interaction Design and animation prototypes usually focus on certain details of the behavior of the User Interface. They can often be created using the functional prototyping tools but sometimes it is better (or even necessary) to use 2D or 3D visual modeling and animation tools like Apple Motion, Blender or Origami.

This is a study of some video navigation options for touch interfaces. It was created using Apple Motion.