Responsive design with paper

Tags

A few months ago, I spoke at City University London about wireframing for responsive web design where I proposed that paper could be a useful tool for responsive design. Since then, I haven't had many chances to try the technique I proposed hands-on, but a suitable opportunity came up recently when we decided to look into making our own Webcredible site more responsive.

I helped facilitate a workshop to start our responsive design project, and I decided to introduce the idea to my colleagues taking part in the workshop, both UX designers and internal stakeholders. As we were adapting an existing site, we already had a baseline for the content we could include so I started by printing out screenshots of our most important pages. Each person was given one or more of these screenshots, plain empty paper, a pair of scissors and glue. The only instructions were to try and slice up and rearrange page content so that it fits in a single-column layout.

What we all really liked about this method was the speed (as we didn't have to sketch much from scratch) and the flexibility of rearranging pieces of paper before committing to a final solution. The developer in charge of delivering this project also found it helpful to have a visual overview of the intended mobile result based on existing content. Of course, there are limits to how much interactivity you can try to convey through paper, but this didn't stop us from trying. One useful paper prototyping trick that came of the session was to fold a piece of paper to show how a long list of blog tags might be collapsed into a drop-down menu:

To see more high-resolution photos (and a sneak peek at our upcoming responsive site), take a look into our responsive design Pinterest board. And let us know what you think in the comments below - would you consider using paper for responsive design?