Responsive Web Design Sketch Paper

January 17, 2012 at 11:32 pm

Responsive Web Design Sketch Paper Blank - Wire-framing, Design sketching, Layout drawingResponsive Web Design Sketch Paper Interface - Wire-framing, Design sketching, Layout drawingI sat down today to start sketch­ing some ideas for a respon­sive web site design. Imagine my sur­prise when I searched for a sim­ple, letter-sized tem­plate of win­dow sizes only to find one result. I want­ed some­thing a lit­tle dif­fer­ent, so I made my own.

These pages are for early stage wire-framing and sketch­ing since the win­dows are scaled 25% — 50% of what they will actu­al­ly become. I found it use­ful to have them all on one page so I could eas­i­ly see the dif­fer­ences in aspect ratio and size. I did­n’t spend much time sketch­ing on these pages before mov­ing to larg­er sheets with grids, but they helped me get ideas start­ed for fur­ther refine­ment in that next stage.

There are screen sizes of 1440 x 900, 1024 x 768, and 800 x 600 scaled down to 25%. Then there is a smart­phone and tablet size (based on the res­o­lu­tions of the iPhone4S and iPad2) scaled to 50%. There is one PDF with blank out­lines and a sec­ond PDF with gener­ic scroll bar and head­ers blocked in for consideration.

Let me know if you find them as help­ful as I did in the comments.