New, Responsive Design Sketchbook

January 25, 2012 Stephen Martin

The web has been buzzing about Responsive Web Design lately. The techniques are solid and the concepts are easy to understand. The first thought that came to my mind, as with any new technique is “where do I begin.” I always end up going back to sketching.

Introducing the Responsive Design Sketchbook

Mulit-blueprint fron pageThe Responsive Design Sketchbook builds on topics discussed in the A Book Apart book, "Responsive Web Design" by Ethan Marcotte. When I started to sketch out how I would alter an existing web site to be responsive or incorporate the techniques, I started to draw thumbnail sketches. The first page of the sketchbook builds on this idea. It contains blueprints that map to various break points, lined with a 32px grid. These break points aren’t gospel. They just serve as a good place to start getting your ideas down on paper.

The back page of the sketchbook is a full grid, based on a 1200px by 800px viewport, with flags for the break points and 32px grid markings.

Unlike the UX Sketchbook, the Responsive Design Sketchbook is void of browser chrome. This really opens up the sketchbook to be used for just about anything you're designing. I recently used the back page blueprint to design an email campaign, using the 600px flag as my stopping point.


I hope you’ll find the sketchbook useful in your own responsive design sketching and planning. Feel free to contact me with any thoughts or feedback.

Leave a comment

Please note, comments must be approved before they are published