Free Responsive Sketch Sheets

With responsive design and new design approaches such as ‘Mobile First‘, a new kind of UI sketching came to life. I’ve collected several free responsive sketch sheets, allowing you to sketch out rough ideas with paper and pencil and to quickly iterate those ideas, refining, redesigning, or tossing them out as necessary.

If you are unsure on how to use these sketch sheets, or even why, David Mannheim wrote a great piece about this called “The Theory and Practice of Sketching within the UX Industry”.

 

A wireframe template for responsive web design by Rubber Cheese

Rubber Cheese created this free to download Illustrator (ai) template for web designers creating wireframes for responsive websites. You can use this vector file to create wireframes for 3 different screen sizes, 978px, 768px and 320px wide. – Wireframe template for responsive web design

 

Responsive Web Design Sketch Sheets by Jeremy Palford

A collection of 3 responsive sketch sheets or books for various devices and are free to download. – Responsive Web Design Sketch Sheets

 

Sneakpeekit responsive sketch sheets

Sneakpeekit sketch sheets provide pixel-perfect grids respecting the most common and modern grid systems(from 320px up to 1140px canvasses), included responsive grid systems. The PDF and PSD sketch sheets are free to download and ready to print. Just choose the mockup that fits with your needs, download and print it in a few seconds.
– Sneakpeekit

 

Interface Sketch

Free sketch templates for web, mobile and tablet. Download a template. Print out the pages you need. Start sketching! You can print in colour or black-and-white. All templates are in PDF. Some of the templates contain a grid of dots to help with alignment when you sketch. These dots do not represent the pixel dimensions of the device or browser. – Interface Sketch

 

Responsive Web Design Sketch Sheets by James Brocklehurst

James Brocklehurst used the idea of Jeremy Palford and created two set of sheets, a thumbnailing version and a more detailed set of wireframe templates with some grids. – Responsive Web Design Sketch Sheets

 

Responsive Sketch Sheets by ZURB

The sketch sheets will make it super easy for you to start designing responsive sites, with room to work through elements that might change in a responsive layout, such as off-canvas layouts and navigation. The download contains both the original ZURB sketch sheets PDF and a responsive-flavored PDF. – Responsive Sketchsheets

 

Responsive Web Design Sketch Paper

These pages are for early stage wire-framing and sketch­ing since the win­dows are scaled 25%-50% of what they will actu­ally become. There is one PDF with blank out­lines and a sec­ond PDF with generic scroll bar and head­ers blocked in for consideration. – Responsive Web Design Sketch Paper

 

Desktop, Tablet and Phone Sketch Sheets

Chris Bannister made a nice Photoshop (PSD) template with responsive wireframes for desktop, tablet and phone. It’s free to download at Dribbble. – Desktop, Tablet and Phone Sketch Sheets

 

Bonus: POP – Prototyping on Paper

You sketched your new responsive website on one of these responsive sketch sheets. Now what? One day, you will have to digitize your drawings to present it to clients or collegues.

POP – Prototyping on Paper is an iphone app that will import your sketches by taking a picture. POP automatically adjust brightness and contrast to make sure your sketches are legible and clear. On top of that, POP creates a storyboard by linking your sketches together with “link spots”. Great tool! – The Prototyping on Paper App