MightyMeta

rwd-sketch-sheets-b

Responsive Web Design Sketch Sheets

| 15 Comments

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:

Thumbnail Sheet Preview

Wireframe Sheet PC Preview

Wireframe Sheet Mobile

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:

fluid and fixed element symbols

…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.

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

15 Comments

  1. I’ll give these a blast on my next job. Thorough. Like it!

    Really nice site this too by the way mate.

  2. I work on comping website design as an everyday job, I think this will be really helpful. Considering that I feel all sites should be designed and built to be responsive in some shape or form, I think this is a perfect time to start figuring out the best ways to construct the layout.

  3. Mash these up with MyBalsamiq and you could be onto a winner.

  4. Will sure try them in a weeks time on an upcoming project.

  5. On the thumbnail page, I think it would be nice to have a few different sizes (i.e. take the thumbnail and scale it up to be able to add more detail):

    Landscape: 2x2, 1x1
    Portrait: 1x3

  6. The thing I don’t like about this is that there are three different designs.. and in reality it’s probably 6+ so does this become a nightmare?

    My challenge is trying to bring all the elements together into a single design on a single page and annotating how elements are shown or hidden or otherwise styled as more (or less) space becomes available. It’s just information overload.

    I like the idea of a common set of design symbols to indicate this. You’ve talked about one for fluid/fixed, another would be visible/hidden? Perhaps there are other common symbols — we can indicate with a compact glyph on the design: “this button has only an icon in portrait, only text in landscape, and text+icon in widescreen”.

    • Hi Aaron.

      I’m not sure that having a single annotated comp is going to be practical for anything other than the most simple responsive designs. Creating multiple comps (and additional CSS styles) is the inevitable result of having a variety web-capable devices out there.

      I don’t think we can avoid multiple designs, but rather than a nightmare, maybe it is an opportunity to charge more for a more specialised service?

      Remember also that sketches and comps are only the first part of the design process. Sketches are for quickly developing ideas. Comps are traditionally about crafting a final design, but could be more of a simple ‘look and feel’ exercise. This would then allow more of the detailing to be undertaken ‘in the browser’, and on a single design.

      Symbols will help reduce the number of comps required though, and I like the idea of the ones you suggest. I’m wondering what they might look like…

      • James, you suggest charging more for offering responsive design as a “value add” service? Haha You go right ahead. While your bids come in higher than your competitors (who are offering responsive as a smart solution and as part of their core service), you’ll have a lot of spare time to reconsider.

      • Maybe, but a price race to the bottom doesn’t help designers, clients or the profession, in my opinion.

    • Aaron, et al, check out this link on FastCo Creative: “4 RULES FOR CREATING INTERACTIVE CONTENT FOR A MULTI-PLATFORM, MULTI-DEVICE WORLD” . There are some great take-aways here. First, responsive = fluid. Second, set your break points, and do yourself a favor — stick with small, medium and large. No need to split hairs beyond that. And lastly, view responsive as facets of the same experience. Be smart, tailor the content to the user’s purpose and device-usage. This developer’s case study is a perfect example of this. Its a brilliant read. Check it out: .

  7. (case study here:) builtbyboon dot com slash blog slash responsive-design-case-study

  8. Hi James, thanks a ton for the responsive photoshop templates. I did save a lot of time for us to design new responsive design templates.

    Earlier it too us a hell lot of time to start desining templates. Now the designing time has reduced considerably. All thanks to you.

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top