In the last few years, a lot of sketchbooks for web designers have come to market. I got my hands on five web design sketchbooks to test them out, and here’s my 2 cents on all of them so you can decide if they fit in your workflow and they’re worth the money for you.
UI Stencils’ Browser Sketch Pad
First up is the Browser Sketch Pad ($13.95) from UI Stencils. This sketchpad shows a basic window with a few key markers to help you along. The dot grid forms a foundation to draw on. And markers down the side show a few key heights: 100px, 600px and 768px. Overall the grid is 1024 pixels wide, which works nicely with the standard 960 grid. The paper is a little heavier than your average printer paper, and right on target for what I expect in a sketchbook.
If you try out one of the UI Stencils sketch pads, you should definitely also get their stencils, in particular the Website Stencil Kit ($26.95). They’ll help push your rough sketches into something a bit more polished. (If you’ve ever done any drafting the old-school way (as I have), you’ll appreciate this tool a lot.)
The Browser Sketch Pad is a fantastic option that will not disappoint. At first I wished it was a more traditional spiral-bound notebook. But after using it, I found I really liked being able to tear the pages off. I’d be really easy to put up series of sketches on a whiteboard as a sitemap in progress.
Responsive Design Sketchbook
This sketchbook was one of my motivations to write this article. The Responsive Design Sketchbook ($12.95) is one of the options available from AppSketchbook.com. The paper used in these books is slightly lighter weight than that found in the UI Stencils pads, but it’s still substantial enough to feel solid as a sketchbook.
The pages of this book are split between two layouts. On one side you have a view of four windows to draw smaller wireframes in. These are in four widths so you can draw the same page at multiple sizes (that’s the responsive part). The boxes perfectly match the actual screen size for various devices. They are 1024×768 (at two orientations), 320×768 (with a line for 480 so you can do 320×480) and 600×1024. These key sizes and orientations can really help you plan a block-level view of a page at various sizes.
The other side of each page is a single larger grid (800px tall) with break points at specific widths, including 320, 600, 768, 1024 and 1200. I imagine using this spread to plan a larger version of one of the layouts from the opposite page. It’s also interesting to think about designing something for a larger width and being able to see where the key widths are on smaller screens. This could help you create designs that break at certain points.
My only real gripe about this sketchbook is that the two page layouts are printed at different orientations. So if you go between the two you have to rotate the book to see it in its proper orientation. This means that you can’t easily review related sketches on facing pages. The pages are however perforated at the top, so you could easily remove them and arrange them in any way you like. All in all, it’s a nice option that performs really well as a sketchbook to helps you create rough ideas for responsive sites.
UXPin Web Kit
Next up is the UXPin Web Kit ($29.99). It’s essentially an analog wireframing system. The first thing to know is that this isn’t simply a sketchbook—it’s a full-on toolkit in the form of a hardbound book with three key foldout sections.
On the far left you have a four-part notepad with areas for Design Problem, Personas, Diagrams and Drafts & Notes. This section helps you document the project and extends the idea of a wireframing tool to include more fundamental project needs.
In the middle you have 10 sticky note pads. Each of these represents a particular interface element or container. These items are sticky in the middle (rather than along the top) so they’re less prone to curl.
Finally on the right you have a webpage sketchpad. It’s mostly a dot based grid in a web browser window. The idea is that you can apply the sticky block elements to the sketchpad and draw in the extra details around them. I really appreciate the concept, though it feels a little limiting.
What really makes the UXPin Kits standout is if you snap a photo of your wireframe and send it to them, they will automagically translate it into a digital wireframe you can use in their online tool. This solves a very real problem and eliminates a time-consuming task for web designers. The only downside is that the online tool comes with a monthly fee. (Though I’m not reviewing mobile sketching options here, I did get a copy of the Mobile Kit for the iPhone, in which the sticky elements you apply to the sketchbook work really well. It’s a fantastic way to mock up mobile sites and apps and is a far better application of the sticky-note approach.)
All in all the UXPin kits are really part of a larger system, and if you don’t plan on ponying up for the subscription, you might be better off going with simple sketchpads such as the UI Stencils.
The Web Design Sketchbook
Of all of the options here this is the smallest form factor sketchbook. It measures 6.25″ by 9.25″. It also happens to be the most expensive ($30). This book is split into two types of page layouts. The majority of the pages are filled with a single browser window mockup. The other pages (about a third of of them) contains four smaller browser mockups. The option to draw a single larger view or four quick thumbnail sketches is a great feature. Being able to quickly get down a lot of ideas is a real perk.
This book is actually printed on demand via Lulu, which is probably why it costs much more than the other books. And it could also account for the quality of my copy of the book—the images on my pages are pushed right up to the edge of the pages, and the grid doesn’t show up in some areas. This book leaves me disappointed, especially when you figure in the meager paper weight—pen sketches bleed through to show on the other side of the page.
The Dot Grid Book
Finally I tested the Dot Grid Book ($15) from the Creative Outfitter store. This sketchbook is not specifically made for the web, but I can’t help but include it here. You don’t actually need a printed browser outline to sketch web pages. You could even argue that it simply wastes space! I actually like both options. The dot-based grids in this book make it perfect for sketching web pages and just about anything else you want.
Among the options reviewed here, the Dot Grid Book has the most luxurious feel. The heavy-duty cover has a rubbery matte finish, and the pages are nice and heavy with a slight texture. And the book is slightly larger than the others, giving you a bit more room to work.
Each of the options presented here has its own niche, and I’d recommend nearly all of them depending on your needs. But if I had to pick a favorite, it’d have to be the UI Stencil pads. They are a high quality product at a very reasonable price.
I do also really appreciate the flexibility of the Dot Grid Books as I take notes and document various day-to-day bits of information. My own sketchbook is filled with notes, intermixed with sitemaps and wireframes.