Responsive Sketchsheets for a Smooth Initial Mockup

04 Jun 13, Kelly N. Wilson

Even though we love the outcome of a fluid and flexible responsive website , it can make the design process quite tricky for us designers. You don’t have to look any further than the mock-up phase to understand that.

If you make your mockup in Photoshop, the fixed-size layout just doesn’t seem to work with a flexible and fluid responsive website. The best strategy, believe it or not, is old school – pencil and paper. All you do is sketch the basic layouts in a notebook or sketchbook, and go directly from there to the HTML and CSS for actual mockups.

Sketchsheets for Responsive Web Design

You can go the Traditional Way – Pencil and Paper

The traditional way being simple pencil and paper. All you have to do is design different layouts for different screen sizes before you dive into the actual code work. Working in rectangular boxes representing phones, desktops or tablets, you can decide which element goes where, which images should be retained on the mobile version, etc. But the most annoying part of using pencil and paper is drawing out the many different viewport sizes to work on. Thankfully, there’re many options to go for.

Many Sketchsheets to choose from

The Premium Sketchbook

If you want to make it all cool and artsy, there are some lovely sketchsheets to go for. You can go for a beautiful wire-bound RWD sketchbook, or a more sophisticated sketch pad. These have stencils for different device sizes (in pixel dimensions) and breakpoint hints that make it a pleasure to work.

Then there are Printable Responsive Sketcsheets to go for

You can even go for printable responsive sketchsheets from websites like Sneak Peek it or Zurb. There are many other websites offering amazing sketchsheet templates that are free to download and print, and all are worth a shot.

Finally, there’re the Dear, ‘Ol A4 Sheets

I found this very unique method of making your own sketchsheets on Specky Boy. The use of A4 sheets is suggested for initial mockup layouts. The best part – other than being much cheaper and easily available than the other options – is that a single sheet folded multiple times can give many basic screen sizes. The plain sheet is a desktop layout, folded in half, it’s a tablet canvas for both portrait and landscape layouts. Three more folds and you’ve got a brilliant smartphone canvas to work on. Doesn’t that sound tempting, now?

Sketching for a responsive website in the initial stages can actually be a lot of fun. After all, you can literally let out your creativity and let the ideas flow on paper before you go down to a formal version on a screen.

With these useful sketchsheets and the brilliant idea of the A4 sheet, aren’t you excited to sketch some layouts for your next project?


Leave a Reply