Responsifying with collage

Written by: Laura Nevo On: 9 Sep 2014 In: Design, Workflow

Responsive retrofitting can be hard and time-consuming as the design hasn’t originally been considered for all screen sizes. It can be a challenge to deal with fixed sized elements and non-flexible modules.

Fortunately, there’s a good side too! You already have everything you need to rethink the website: content, imagery, information architecture… which rarely happens when designing a website from scratch.

Do it with collage!

The material you need

Step 1: gather printed desktop screenshots of the pages you will work on, a few blank paper sheets (I used A3), pens, scissors and blu-tack.

Cut the layout screenshots

Step 2: Cut cut cut cut cut! Roughly split modules, content, navigation. It doesn’t need to be perfect!

Shape your new layouts

Step 3: Compose your mobile/small screen layout by putting the pieces together on an A3 sheet, recut elements if necessary, discard modules, cross out elements, draw others on top, add notes, communicate!

A mess of paper on the desk

Pages collage on the wall

Responsifying with collage is a simple exercise of layout design, similar to sketching. Although can be done by one person, using it in a group can facilitate discussion. It is especially adapted for producing small screen layouts (for mobile phone) but nothing stops you from using your elements for tablet-size or very large screens layouts.

Check out our results

Blog page for small screens

Above, a mobile version/small screen version of a blog page listing all the articles. Some elements have been removed, as we decided they were not a part of the core content. Buttons are moved and restyled to adapt to tapping on a touch screen.

Homepage for small screens

A homepage with elements on 1 and 2 columns on mobile. In order to preserve readability, it changed again later during development.

Service page for small screens

Above, a service page on mobile/small screen. The multiple subnavigation was a challenge we tackled by using select fields and expanding modules of content.

In summary

Collage is a great communication tool to throw ideas around responsive layouts. As it references existing elements, it gives a common vocabulary for client, designers and developers on the project. It doesn’t require any technical skill to create the layouts and can be less intimidating than sketching.

As I mentioned before, it’s a good occasion to review, simplify your design and assess what’s your core content by moving, adding or discarding elements.

It’s fun, engaging, accessible and allows us to stay away from a computer for a bit!