I’ve made some printable sheets for wireframing for responsive layouts, with corresponding Photoshop templates.

Download .zip 1.2MB

The Responsive Sketch Sheet Problem

There are several well argued articles that champion the browser as the only place where the behaviour of adaptive/responsive layouts can be accurately described. This may well be true, but I would still advocate starting the whole design process with sketches on paper. Put simply, using a pencil to think visually has an immediacy that is clouded once software interfaces and html/css are introduced — these should come later, after the initial design concept has been formed.

But paper is static, responsive designs change according to display context. So how can you use the former to describe the latter?

An Attempt at a Solution

Responsive designs consist of two main properties, a series of layout ‘states’ assigned to a number of specified viewport widths, and fluid-width layout elements that form a transition between the states.

Jeremy Palford offers an easy solution for how to represent differing states within a sketch sheet by creating a series of adjacent rectanges for each sketch. I’ve taken this idea and created two set of sheets, a thumbnailing version and a more detailed set of wireframe templates with some grids:

The grey areas indicate the space below the fold. Not all possible display sizes or orientations are covered, but what I see as the three most useful are represented.

Then, if we devise symbols that indicate if an element should be fluid or fixed:

…we have a way of communicating responsive properties within a static diagram. Perhaps not the best way, but a way none the less.

I’ve also included some PSD templates that relate to the wireframe sheets. Again, I’m not completely convinced by the ‘design in the browser’ argument, as to do so infers that you must create visual elements (that can’t be generated using CSS, such as background images and textures) in isolation to the rest of the design. I prefer to view a design as a whole whilst developing it, so this fragmented approach seems strange to me.

Photoshop and/or Fireworks are inadequate tools for the job, but until a photoshop/browser hybrid is devised, they are, in my opinion, the best option for crafting the visual aspect of a design. I can see how showing clients browser prototypes over static visuals would be a good idea, however.

In Conclusion

These sketch sheets may help you in the early stages of developing a responsive design. I am going to test their use with students on the BA(Hons) Graphic Communication with Typography course at Plymouth University to see how they fare.

If anyone else either finds them useful, or has some suggestions for improvements, please leave a comment below.