Get 30% off courses running in September - use code "SEPT30" View training courses

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 some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Here’s some examples of what came out of that workshop:

Linear layouts of Webcredible pages

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 the existing content. Of course, there’s some limits on how much interactivity you can try to convey through paper, but this didn’t stop us from trying. One of the tricks I really like is this folded piece of paper showing how a long list of tags in our blog might be collapsed into a drop-down menu:

Folded piece of paper signifying 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?

 

Leave a comment

Required indicates required fields

 

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

Back to top