Pencil Project - The GUI prototyping tool

Updated: January 17, 2011

The title of this article is not the sexiest one, I must admit. It does sound like a complementary colonoscopy examination, while it is in fact the name of a powerful, open-source software that lets you design user interface mockups and diagrams quickly and easily. Do you fancy making a product of your own? Do you intend to have it some kind of an interface? Don't know where to start? All right, there's Pencil.

Pencil is extremely simple to use. It's friendly and unobtrusive. It will run on all platforms and even as a Firefox addon. On Linux, the package is entirely self-contained, so you only need to extract the archive and start using it, anywhere, anyhow. Pencil is powerful and feature rich: it can export its work in many formats, including images, PDF, OpenOffice, it has floating panes and toolbars that can be docked and undocked from the main window, you can export templates, save personal collections, and a whole lot more.

Teaser

Let me show you around.

Pencil - Full program

We will examine the full program first. Indeed, the full version has more options than the browser extension, including more GUI categories and elements, native themes, object snapping, sketchy stencil, and more. And many other features we mentioned in the introduction above.

The program looks like a typical HTML editor or a presentation software, and it's not that different, if you think about it. You drag & drop items and design them as you see fit, changing style, color, border, font size, and whatnot. There's quite a lot to choose from, including basic geometric shapes, annotations, Web elements, and GUI widgets in a number of styles. The usage is very easy and intuitive, although complex mockups will require a bit of imagination on your behalf.

P.S. Pencil is based on Firefox, which explains the modular structure and the simple yet powerful interface. Enough said.

Main

Options

GUI design

GUI design is extremely neat. You have Nodoka GTK widgets, which are very similar to the theme used in Leonidas, the best Fedora theme so far, native Mac, Windows XP or Vista with no Aero.

Window borders

Under the right-click, you will find tons of options, including the ability to change the theme, rearrange items vertically, change the window border buttons and shadowing, use system colors, lock items, add them to your collection, and more.

Right click

Right click, more options

More cool stuff

Sketchy design

Sketchy design allows you to create hand-drawn kind of early-prototype designs, which you can use to impress your peers during brainstorming sessions. Nothing finite, just basic layout of what you think the product should look like.

Sketchy

Zoomed

Stencil Generator

Another cool thing is the Stencil Generator. I have no idea what this is, but it sounds good. Apparently, and I might be completely mistaken here, this allows you to take existing images, run some kind of Sobel edge detect and create negatives, which you can then later user as sort of blue prints from your project, rather than designing entire new objects from scratch. Maybe.

Stencil

Oh, by the way, pencil stencil rhymes nicely. Sound wicked, too.

Clipart

I'm not sure what was supposed to happen here, but I was expecting a plethora of little thumbnails. There's a dropdown button at the top, which let you choose your collections, so if you don't have any OpenClipart stuff, this could explain the blank window. I will have to explore this a little more.

Clipart

Pencil - Firefox addon

You can find the Pencil extension over at addons.mozilla.org. If you need help figuring out how to install or manage Firefox extensions, you may be interested in reading this tutorial or checking out what's new in Firefox 4.

Addons

Launch

And the program itself:

Main window, addon

And now you start working and making your cool designs. Remember, the designs will be ultimately limited by your artistic abilities, so if you're a typical engineer and/or color-blind or both, you'd best leave the challenge to people with more style than you.

Working 1

Designing 2

Redesigning a button

Ah, rather self-explanatory really:

Button design

Tabs

And like I mentioned earlier, you have tabs:

Tabs

That would be all, folks.

Conclusion

The Pencil Project is definitely not for everyone, I must say. If you have no intention whatsoever designing anything ever, then you probably don't need it. But if you want to step up your presentation skills or design quality a notch, this is a very good tool for the task.

Pencil lets you create simple, effective, powerful mockups that demonstrate your ideas in a professional, elegant manner, far superior to classic PowerPoint presentations and shoddy hand-drawn designs or the diarrhea of verbose that people use instead of visual aids. Rather than trying to make other people envision your vision, you let their imagination rest and give them a colorful, classy tour full of snappy, stylish, refreshing images. And you stand out from the crowd, as simple as that.

It is also possible that Pencil could save you money in the long run, since you would need less help from marketing and design teams or third-party companies to do the job for you, and you may even end up with better products, since you would enjoy better exposure and more direct experience in design. All in all, Pencil is free and effective. Use it.

Cheers.