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 sketching since the windows are scaled 25%-50% of what they will actually become. There is one PDF with blank outlines and a second PDF with generic scroll bar and headers 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
