Words by Megan HowellApril 26, 2019
A paper prototype is a paper tool we use before building prototypes digitally. We have created our own paper prototype, that is made up of all of the blocks that correspond to features and sections on our websites. We print this paper prototype out and cut it up, before workshops and collaboration sessions with our clients to help communicate our ideas.
When we use paper prototypes with our clients, in our meetings and collaboration sessions, we always account for the fact that not everyone has the same imagination and vision for the project. This means that some may not be able to fully visualise the outcome as clear as others can, so we need to be mindful how we are using the paper prototype to gauge how much detail we need to go into when explaining features and sections.
There are lots of advantages to using a paper prototype before making a digital prototype, some of them are:
Here is an example of how we used our paper prototype for a project we have recently completed for Spike Island.
On the left, you see all of the blocks and headings we thought we would need for the homepage, and on the right is how it actually turned out.
As you can see the paper prototype looks different to how the finished website looks for Spike Island, however, all of the blocks that are used in the paper prototype correspond to what is on the current homepage now.
For example, we didn’t know what we wanted the page title to be but we knew we wanted it at the top of the page under the hero image, so in its place, we put a H1 heading.
We also use our paper prototype with our clients, during workshops to pull ideas together and begin putting together some key pages and templates using the blocks. From this, we can evaluate if these blocks and the set up of the pages fit our findings from the workshop and rearrange things if needed in a fast way.
We will often take a few features from our paper prototypes that need further explaining and make them interactive. Once we have chosen those features, we use video to show how we think these features should be interacted with and how they should perform.
For this example, I am showing you an image gallery.
To begin we draw a storyboard of how we see the interactions happening, this is so we know how many screens to replicate with the paper prototype.
Shown below are 6 steps that I had mapped out, the steps were:
From this, you can begin to make each stage of the storyboard using the paper prototype. Once you have done this you can film short clips of you interacting and clicking on parts of the prototype.
Here is the video I made of the image gallery:
And here is another, where I showed how an accordion would open and close:
Hopefully, you can see how valuable we find using our paper prototype. If you see this being a tool you can use within your teams and during your website projects, please download a copy.
Please let us know in the comments below