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.

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

Balsamiq image import with ‘sketch-it’ mode applied

A mockup template of a University webpage

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.

2 replies to “Prototyping”

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Report this page

To report inappropriate content on this page, please use the form below. Upon receiving your report, we will be in touch as per the Take Down Policy of the service.

Please note that personal data collected through this form is used and stored for the purposes of processing this report and communication with you.

If you are unable to report a concern about content via this form please contact the Service Owner.

Please enter an email address you wish to be contacted on. Please describe the unacceptable content in sufficient detail to allow us to locate it, and why you consider it to be unacceptable.
By submitting this report, you accept that it is accurate and that fraudulent or nuisance complaints may result in action by the University.