RWD-Pad: The fastest way to sketch web and app interfaces

As a designer and a content developer or concept developer you can choose between a multitude of tools these days to get your ideas visualised, from Balsamiq to Omnigraffle, from Sketch to plain paper and pen. I felt that something was missing in the range of tools so I came up with the RWD-Pad.

Too slow, too limited, or too unprecise

Depending on the project I am working on I might have the luxury of being in a team with a wireframing person or not. Often times other people do the conceptual work and develop the rough structure or get us started by mocking up the first ideas. Especially when it comes to remotely working teams and people this tends to be in a digital format. That is great because you can easily change your Balsamiq-or-whatever-you-might-use-mockup and upload the changed version to Confluence, basecamp or whatever you might be using.

Quick sketching vs. digitally editable

Of course people work differently depending on their background and experiences, but I tend to feel limited by digital wireframing apps when it comes to the point of getting the first ideas visualised. There is no app that is as fast as me and my pen/sharpie/fineliner. I would rather draw something four times and see slight variations and the process on paper than a slick, pseudo-roughened digital version of a sketch.

However, rough sketches do come with a built-in pitfall: You might be quite out of proportion. Even on checkered paper you might loose the orientation in terms of sizes and proportions. That could make your wireframes less usable. So how can one optimise that?

Freedom meets minimal guidance

In order to remedy the situation that there is a potential to be not very precise with the sketches I developed a template to use for my sketches.

What do you need when sketching for Responsive webdesign or apps?

Of course I did not feel like putting too much on my sketch template. The supporting elements should be barely visible, but still present enough to use them without thinking. I incorporated:

a grid system similar to Bootstrap / Foundation etc. which is based on 12 columns (6 in the small resolution)
three typical breakpoints based on desktop, iPad vertical and Smartphone vertical.
pixel rulers for a better orientation how big things might be on the screen later on
fold markers to see how much you might get to see above the fold
label areas for date, project name, page/screen name and a status area (approved, idea, to be finetuned, …)
device icons to make it easy to grasp which screen is which.

Limitation and decisions

I am a great fan to design for breakpoints not devices because you simply cannot rely on device widths, not even with Apple devices anymore. Nevertheless did I opt to create the first version of the RWD-Pad to use the sizes 1024, 768 and 375 Pixels in width representing the typical iOS device screen sizes. These tend to be the devices many people aim to test, use and care the mot about in many projects.

Nevertheless, I am working on a second version with other breakpoints and a larger version with more than three breakpoints. Watch the skies, keep looking for an announcement.

The finished product

I have the first batch of RWD-Pads in beta test right now and they work great! I still have things to improve but the fact that I have ready-made DIN A4 sheets to start sketching at any time is wonderful and helps a lot. When done sketching I dump the sheets into my ScanSnap document scanner (which is one of the best buys I ever made) and they are ready to go in a few seconds via email, basecamp, whatever. Or, I start choosing the best ones and get those into Balsamiq or the likes and saved time in finding the right solution.

I will test a bit more and soon you will be able to get your hands onto your RWD-Pad as well if you like to work this way as well.

Things nice to have in the next version

As mentioned above I do have a few things to do:

more breakpoints per sheet
another selection of breakpoints
evaluating compatibility with appseed to make it even more useful

But even without these things done yet, the RWD-Pad saves me tons of time when getting ideas sorted out and concepts visualised. Hope this insight into my process was interesting and let me know whether you are interested in the product.