Paper prototyping HTML layout

TL;DR

Paper prototyping is good. It saves you time. So why not extend the principle to other areas of your build, like your layout, and save more time?

On the last few projects at work we have trialled paper prototyping. For the uninitiated, paper prototyping involves using pencils and paper to sketch out user interface ideas and quickly iterate on those ideas, getting closer to the final UI much earlier in the project. On the whole it has worked very well, and from a developer perspective a lot of UI issues which often only get considered during the build are resolved before a single development key has been stroked.

So on our latest project, I brought the concept of paper prototyping to another area of development which, like UI, can be ambiguous, contentious and time consuming. The HTML structure of a site. This post is a quick how to for paper-prototyping your next HTML layout.

How to paper prototype your HTML

Ingredients

1. Print outs of key pages of the final site design.
2. Tracing paper
   - If speaking to a designer ask for a "layout pad" for added kudos
3. A lightbox (not required). 
4. More than one developer.

Method

1. Place your printed site design on the lightbox.

2. Place a sheet from your layout pad over the top of your site design.

3. Now start sketching and debating your proposed layouts with your fellow devs.

4. Rinse and repeat.

Sounds simple? It is. A fellow developer and I sat over the lightbox, drawing out our ideas, suggesting layouts and annotating them with simple style attributes to remind us of our initial thoughts on CSS when we came to develop the front end, for example, "float this left", "container with fixed width". Some ideas were quickly dismissed, while others were explore. Some even made it in to the final layout. In under half an hour we had a pretty solid layout which would have taken possibly half a day (if not longer) with just one of us sat in Visual Studio. 

Here are some pictures showing the paper prototypes of the layout my colleague and I created as we thought through and discussed the available options for a recent project. 

Attempt 1

Attempt 2

Attempt 3 with design print out beneath.

Ok, but what's in it for me?

This really was just an experiment to see if we could extend the principles of paper prototyping to other areas of the development process to reduce the time spent developing. 

By getting out from behind the keyboard, picking up a pencil and discussing ideas, we got to a solid layout in a comparatively short space of time, collaborating and sharing ideas along the way. 

I would urge other developers to give it a try. Even without the lightbox, just sit around the table and discuss how you would lay a site out. You may even save time and produce a finished site quicker.

A testement to this methods success is that since comitting the initial paper protoptype in to the project's MVC layout, it has only been altered a few times.