Prototypes are an important starting point of every project no matter the size. They help to distill the project down to just a few sketches. In fact, you may already be prototyping with your current projects. That little doodle in your notebook? Well, that right there is prototyping in its simplest form.

Using Prototypes

When it comes to using prototypes it is best to use them at the start of the project before any design, development or copywriting work truly begins. The main reason for this is because of the quick nature of prototyping. Your team can quickly get an idea of a user journey down within 30 seconds. From there you will be able to add and remove steps that you didn’t see at the start. This is much more convenient than appending pre-existing code that may need to be reverted back if it’s not an ideal solution.

Coding Prototypes

Coding prototypes can be very beneficial when it comes to presenting a potential solution to individuals who may not be used to seeing hand rendered prototypes. Having a library of pre-coded prototyping elements with a few links can get a hand rendered sketch look pretty presentable and functional.

A recommendation is to use black and greys. From experience, as soon as someone, outside of the loop, sees a hint of colour they may just focused on that and not see the overall solution.

Another recommendation, if possible, is to have your pre-coded elements responsive if you’re producing a web application. This way you will be able to see how the prototype may work across an array of devices, which may help with some design decisions.

Downloadable Templates

Here are a number of templates that we like to use at the start of a project. We have a stockpile of these around the office so anyone can just pick one up and get sketching.

Prototyping templates:


When it does come to the start of any project, whether it being a fully fledged web application or even just a single page website, prototyping is important. It helps get the team and client engaged with the process. It also helps to tackle hurdles, that may have just presented themselves, very quickly.

A good reminder when doing your own prototyping is to not be too precious about it. The whole point of the process is that in needs to be fast to get the idea across.

First published: April 11, 2019