Prototypes are a mock-up of a web page or service, either on paper or in code. Code prototypes can look and behave like a live website and are good for testing realistic user interactions.

In this article Mark Golland, a lead software developer with 20 years’ experience, explains why he thinks it’s important for content designers and interaction designers to be able to create code prototypes.

Communicating requirements is hard

During my years as a software developer I’ve seen every kind of requirement document imaginable, from detailed 50-page tomes to vague thoughts scribbled on a Post-it note.

The conclusion I’ve come to? Communicating requirements is really, really hard.

There will always be gaps in knowledge

The problem is the gap between what you know before you start building software and what you know from seeing users interact with it. No matter how much you try to account for everything, there will always be something you miss.

And even when you have a good understanding of how something should work, explaining it in words can be difficult.

Examples of things going wrong

Here are just three examples where I’ve seen things can go wrong:

The design has a ‘hero’ area above the fold that contains a heading that is 3 words long. The developer codes it, it looks great and the website goes live. Later the heading needs to change to 6 words. It no longer fits in the area and looks awful.
A button on a static design is described as a link to help information. Once it goes live the product owner asks why the popup dialog doesn’t appear when they click the button.
A design has a table containing basic data. Once built, it turns out the live data is more complicated and doesn’t fit in the space allocated breaking into multiple rows and making columns too narrow.

The prototype acts as a filter

There will always be edge cases that you can’t predict, but an early working design prototype will likely pick up a lot of the common and straightforward issues, as well as more complex ones that hadn’t come to mind earlier.

The prototype acts as a filter that the design and content are put through to remove issues. When combined with real users this iterative cycle of testing and filtering results in a tighter, better defined and more understandable set of requirements for development.

If you’re not already: get prototyping

Thankfully design prototyping is much more common now than when I started as a developer. It’s standard practice for most.

But if you’re a content or interaction designer and you aren’t prototyping, don’t take my word for it. Get prototyping and reap the benefits.

Find out about our prototyping course:

Prototyping in the browser for content designers

Learn more

Get prototyping and reap the benefits: a developer’s perspective