Mega-super TUAW shootout of the iPhone UI sketchbooks

Part of my work requires me to mock up iPhone apps, often to show developers how I would redesign a user interface to work better than something they've come up with. Over the past few months, a number of paper sketchbooks have appeared on the market, all designed expressly for this purpose. I decided to try out all of the sketchbooks that I could find in a cursory Google search, just to see which one would work best for me. Of course, that meant that I had to write a review!

The three products I discovered and tested were App Sketchbook (US$16.99), iPhone Application Sketch Book (US$14.99), and The Developer Sketchbook for iPhone Apps (US$19.99). All of them are designed for the same reason, to let iPhone devs or business analysts describe how they want an application's user interface to look. Follow along as I take a look at these three sketchbooks, as well as a metal stencil template for drawing UI elements.
The first sketchbook I purchased was App Sketchbook. Of the three products, this looks the most like an artist's sketchbook. It has a Wire-O binding so that the pages lay flat, and has double-sided pages with three iPhone templates on each side. Since there are 100 pages in the sketchbook, you can draw up to 600 iPhone screen diagrams.
App Sketchbook does not have a grid for helping align UI elements, but it does feature real-size iPhone templates, a set of alignment ticks 20 pixels apart along the left side of each template, and space to write notes about what you want your app to do. The materials are quite nice -- 60# Lynx White paper pages, an 80# Sundance cover, and a .22 chipboard back -- so the pages will hold up to a significant number erasures and the covers will put up with a lot of abuse.

The next sketchbook was a freebie at 360iDev Denver. The iPhone Application Sketch Book (below) has 100 double-sided pages featuring one iPhone template per page and a vast expanse of light blue-ruled graph paper surrounding each template on which you can write notes. While this sketchbook has predefined areas for the status bar (it shows the signal strength bars and battery icon) and home button row, the latter did not appear to be the correct number of pixels in height.
The iPhone Application Sketch Book also has a Wire-O binding, but I didn't feel that the quality of the materials was as good as the App Sketchbook. After one day of moving it in and out of my notebook bag, the cover was already starting to show signs of wear.

The final choice, The Developer Sketchbook, is a more typical book designed by Dave Woodridge of Electric Butterfly. I've been a happy user of Electric Butterfly's HelpLogic application, which is used to create help files for Mac and Windows programs. When I saw that Electric Butterfly was involved, I immediately made sure I could get a copy to look at.

When I say that this is a more typical book, what I'm saying is that it does not have a Wire-O binding -- instead, it's like a thick paperback book (see below). This, of course, makes it difficult to lay it out flat and use tools to assist in sketching. On the other hand, The Developer Sketchbook is the most useful of the three sketchbooks. Of the 500 pages, 100 are enlarged 320 x 480 grids for designing user interfaces in a portrait configuration, 100 pages are 480 x 320 grids for landscape design, there are 200 pages (the back sides of the grids, see below right) that are flowcharts for outlining the navigation of an app, and 100 pages of enlarged square grids for designing app icons.
The best thing about The Developer Sketchbook is that each of the grids has visual markers and lines along the sides showing the location of the status bar, toolbar, a portrait or landscape keyboard, navigation controller, tab bar controller, and the horizontal & vertical center points. The markers and lines made it very easy to hold the book open with one hand and sketch with the other, and since the grid lines are within the mocked-up iPhone instead of outside (as on the other sketchbooks) it's easy to draw a straight line without needing to use a ruler. If Electric Butterfly made another version of The Developer Sketchbook with a Wire-O binding or just sold pre-punched printed sheets that could be placed into a 3-ring binder, the product would be darn near perfect.

The last item I'm going to write about isn't a sketchbook, but it is very useful when doing mockups of iPhone app UIs. It's the iPhone UI Stencil from Design Commission (US$16.95, see photo below), and not only do you get a very high quality metal stencil, but also a mechanical pencil (with eraser), a couple of Design Commission stickers, and downloadable iPhone templates in both letter and A4 sizes.
Of all of the iPhone UI sketching tools, I found the iPhone UI Stencil to be the most useful for my purposes. My sketching skills are teh suck, so it's nice to have many of the common icons found on an iPhone screen already available on the stencil. I can print out as many template pages as I need for my clients, and I've found it useful to put their logos on the stencils for that personalized touch. The only negative I can really find is that the stencil and icons are a bit larger than life-size, so it's easy to jam too many UI elements into a small space on the assumption that a finger won't accidentally brush up against two elements at the same time.

Whatever tools you happen to use to draw your dream iPhone apps, even if you just use a pen and a napkin, it's dreamers like you who are making the iPhone platform so incredibly useful.
Share