WebGyver Revisited

GUI Prototyping: Pencil . . .

Posted by admin on August 25, 2008

No, I’m not being sarcastic. Pencil is the name of a GUI sketching and prototyping tool that runs within Firefox 3 — on virtually all platforms that Firefox 3 supports.

What’s so amazing about this, you ask. For starters, it’s free. And it only weighs in at about 400KB. Once you’ve installed this tool and restarted Firefox, you launch it from the Tools menu in Firefox. Doing so will open Pencil in its own Firefox window.

At first glance, you may or may not be too impressed with the GUI sketching tools that are available. However, as soon as you start working on an actual GUI prototyping project (which Pencil allows you to save as an .EP or .EPZ document), you’ll begin to realize that this tool really is better than drawing with a pen on napkins.

Each GUI prototype goes on a page. You can have multiple pages, and if you right-click the page tab, you can fine-tune the page size, background color and name. Also, if you have multiple pages, right-click on the page tab to navigate from any page to anywhere else. By the way, if you have multiple pages, you can export all of them as PNGs — or you may export only the current page.

Using the available widgets (Windows XP, GTK, Annotation and Common Shapes), you can sketch and prototype graphical user interfaces for typical web and Windows purposes. Working with Pencatively easy, too. When you drag shapes and widgets onto the page, you can click almost any object to resize and position it. Control-click multiple objects and group them. Select multiple objects (such as buttons) and then make them the same height or width with one command.

Additionally, you can rotate shapes and widgets. For example, when I added a table widget to the page, I wanted to separate it into multiple columns. Since Pencil is a sketching tool, and not an actual programming tool, this has to be done visually. So I dragged a horizontal separator onto the page and rotated it 90 degress, until it became a vertical separator. After doing that for multiple columns, I was then able to select and group the separators and the table as one object.

And, of course, you get the typical alignment tools (left, center, right, middle, top and bottom). Fonts and colors can be assigned feely through simple dialog boxes and toolbar controls. If any of this is too complicated for anyone, there are user guides and screencasts available as well.

If you’re interested in more widgets and/or adding to the project, consider the following:

Pencil is built on top of the the concept of stencils which act as the templates for all shapes you can create in a document. Pencil is shipped with a very limited set of out-of-the box stencils. More stencils can be added by creating the definition an install it into Pencil. The Pencil project will create a central directory for stencil authors to share stencil that they made.

All I can say at this point is: Wow! What an amazing piece of work. Credits go to Duong Thanh An, who just so happened to win the Extend Firefox 3 Contest with his contribution.