Review: Pencil lets you rough in mockups for mobile apps, websites, and desktop software
At a Glance
You may not be a coder or a Web developer, but that doesn't mean you don't know exactly how you want your new application or website to look and feel. Trying to get to that perfect look with just words can be a frustrating experience for both client and developer. A good interface mockup is worth a thousand words, and you don't have to know how to code to create one. In fact, it doesn't even have to cost you anything: Free utility Pencil contains everything you need to create serviceable mockups for websites, desktop applications, and mobile smartphone apps.
If you've ever used a mockup utility, such as free Lumzy or $79 Balsamiq, Pencil's interface will be familiar. The bulk of the screen is taken up by a canvas, and a toolbar lines the left edge of the window. The toolbar is full of widgets you can put on your canvas, neatly divided into categories like Basic Web Elements, Windows XP Widgets, Android ICS, iOS UI Stencils, and more. In Pencil terminology, each category is a collection of "stencils."
Pencil ships with many stencil collections, and its Google code repository contains even more, all freely available. For any given project, you're likely to need only one or two sets of stencils, and Pencil makes it easy to hide stencil sets you don't need. And just like Lumzy and Balsamiq, the sidebar includes a quick-search box letting you instantly filter the list down to just the UI element you need ("button" and so on).
To test Pencil, I used its included Android ICS stencil collection to quickly prototype a single screen for a hypothetical Android app showing PCWorld's top stories. I got mixed results: The collection includes beautiful stencils for Android's status bar (the top part of the screen) and navigation bar (the bottom of the screen), but they were the wrong width for my project and there was no way to resize them. Other stencils, such as those used for tabs and list items, could be easily resized. I ended up creating my mockup out of just those stencils, omitting the top and bottom of the screen. Not ideal, but workable.
Not all stencil sets play well together: I found a great stencil set featuring touchscreen gestures, but all of its elements were black and there was no way to change their color. My mockup used the dark variant of Android's Holo theme, so it had a black background–and black-on-black doesn't work. I had the same experience with the "glyphish icons" set, which includes lots of great icons, all done in black–so all completely useless for dark Android mockups.
It's a good thing Pencil is simple to use, because it's undocumented. Its website does contain a wiki, but it's for stencil developers, not end-users. The company was hard to reach for press inquiries and did not answer our questions about system requirements. To use Stencil, you just need to play around with it until you can make it work. The interface is straightforward, but not without its share of surprises. For example, you can't draw a selection marquee to select multiple elements: The only way to select several elements is to Ctrl-click each.
While Pencil isn't perfect, its attractive price tag and comprehensive glyph sets make it a solid option for getting started with interface design and sharing your vision for a new website or mobile app.
Note: The Download button on the Product Information page will download the software to your system.