Prototyping is a technique for cheaply creating relatable representations (or ‘mockups’) of your ideas to reduce misinterpretation, encourage development, and enable effective user testing.

By using a common visual language to show rather than tell what your finished product will look like, it can make it easier for a team to work on something collaboratively. Prototypes allow for interactivity, so that you can use your ‘mockups’ in user testing before it’s too late to make fundamental changes.

I presented a brief overview of prototyping, and demonstrated one tool we’ve found useful in the past, Balsamiq, at the March Web Publishing Community session – the slides are available on the WPC wiki.

• University Web Publishing Community Wiki (EASE login required)

How much detail?

Prototypes only need to be as detailed as you require to communicate the idea and function of what you are attempting to represent. Many prototypes are purposefully ‘sketchy’ to encourage feedback, so that your testers concentrate on the function of your ideas, rather than the visual design; and so that less time is spent developing ideas that are proven to be unworkable.

It took less than a minute to import a screenshot of this University page, transformed using Balsamiq’s ‘sketch it’ mode, which could then be used as a starting point for a prototype:

University templates

Balsamiq’s intuitive drag-and-drop interface enables rapid production of prototypes from scratch; but we’ve also produced a set of editable templates to provide a starting point:

Balsamiq image import with ‘sketch-it’ mode applied

A mockup template of a University webpage

We are developing a new training course centred on the use of Prototyping – details of these sessions will be advertised soon.

You can freely experiment immediately with the Balsamiq tool on our prototyping wiki sandpit area, or use Balsamiq on your own wiki space now.