Responsive Design Sketch Templates
UI sketching has become an integral part of my early design process. It allows you to quickly iterate over a number ideas, refining, redesigning, or tossing them out as necessary. You can work out and work through a number of ideas quickly and inexpensively before you ever commit to writing a single line of code. I’m a big fan of Balsamiq for creating quick, low-fi mockups. I’m also a big fan of good old paper and pencil sketching. Normally I’ll start out sketching rough ideas with paper and pencil, and then move on to Balsamiq to create clickable, interactive mockups.
For paper and pencil sketching, I prefer printed templates to plain paper. They give you a little structure to work within. They usually have the outline of a browser window with a little chrome at the top, some gridlines, and maybe some space for notes. Adaptive Path created a nice, printable single-page template (ppt), and multi-page template (ppt). They talk about the templates and their process in the dated, but still relevant article, “Sketchboards: Discover Better + Faster UX Solutions.”
Alternatively, you can purchase commercial sketchbooks designed specifically for UI/UX sketching. I prefer cheap print-outs to sketchbooks, though, for one main reason. During the sketching process you should feel free to explore different ideas and quickly iterate on them. If one doesn’t work out, you toss it. I find that nicely bound, professional sketchbooks tend to make me cling to my ideas. I’m much more reluctant to toss anything because I will be “wasting a page” from my nice sketchbook. So, besides being much less expensive, printouts actually work better by allowing me to get ideas out on paper quickly without worrying about waste.
So now on to my point - with the advent responsive design and mobile-first strategies, it would be nice to have some updated templates that were a little more suited to these design processes. To that end, I’ve created a couple of printable templates containing a browser window with a grid and vertical lines marking the 320, 600, 768, 1024, and 1200px widths. They are similar to one of the templates in the Responsive Design Sketchbook, but are cheap and disposable. You can download them as ~~Keynote~~, PowerPoint, or PDF files. (apparently posterous won’t allow keynote uploads, so… no Keynote for now).