Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Pencil lets you rough in mockups for mobile apps, websites, and desktop software

Erez Zukerman | Feb. 13, 2013
Free utility Pencil is handy for iterating through different design ideas for a new app or website. Good thing it's easy to use, too; there's no documentation for the program itself.

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.

 

1  2  Next Page 

Sign up for CIO Asia eNewsletters.