Fast & Free Mockup, Sketching, Wireframing and Prototyping

If you're a Firefox user, then you already know that one of the things that make this open-source browser so popular is its extensibility --the big galaxy of useful extensions you can use with it. I for one, have a couple of add-ons/extensions/plug-ins that I simply cannot continue online without. I'll even go out on a limb and say that Firefox's extensibility is the reason the browser has become my desktop. But this post is not about Firefox or its many plug-ins ... I'm sure I'll cover some of the top ones on another Tip Tuesday here on Ahmadism. Rather, it's about one particular plug-in that I think many, especially for developers (and the geeks-at-heart like yours truly) who know a thing or two about basic design (or think they do): Pencil.

The Pencil Project is a free and open-source tool for making diagrams and GUI prototyping that everyone can use. Pencil is an open source (GPL v2) mockup/sketching/wireframing/prototyping environment that works on any platform that runs as a standalone application or as a Firefox add-on (FF3 and above). Pencil includes stencils (standard or custom), on-screen text editing, alignments, drop-in import of image and text, and image export for finished sketches (which, when combined with simple imagemaps, would make it a useful tool for generating interactive mockups).

If you've ever been in a hurry and ended up using any one of the many prototyping tools (and I'm picking on Microsoft here) like Microsoft's Visio, SketchFlow or even PowerPoint to mock up a GUI prototype, then you really ought to check out Pencil. For many of us who are likely to use GIMP, Photoshop (I have serious issues with how Photoshop deals with text manipulation, for example), etc. Pencil is a much faster, easier and amazing product; especially as a Firefox add-on. With Pencil, you can create rapid screen mockups and UI prototypes, add your own custom shapes to new palettes, save your work as a Pencil document format, export your diagram or UI.

Onscreen text editing supports both plain texts and rich texts:

Here's an image illustrating the Page Properties dialog with ability to choose another page as the background:

At first glance, Pencil may seem like a drawing tool; but its tools, shapes and widgets sets apart. Here's a glimpse at some of Pencil's features (from the project's home page):

• Built-in stencils for diagraming and prototyping
• Multi-page document with background page
• Inter-page linkings!
• On-screen text editing with rich-text supports
• Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.
• Undo/redo supports
• Installing user-defined stencils and templates
• Standard drawing operations: aligning, z-ordering, scaling, rotating...
• Cross-platforms
• Adding external objects
• Personal Collection
• Clipart Browser
• And much more...

Imagine getting a big idea or needing to present a conversation in a more tangible form ("you mean like this?"), and without needing anything but Firefox and Pencil as an add-on, you're able to represent the conversation right there & then. It's almost like a mind-mapping tool available whenever you're ready. Hmmm ... I've actually not used it as a mind-mapping tool, or thought of it as such, until I wrote these very words. I need to re-look into mind-mapping tools and evaluate a few; especially as I get older and need to jot things down (ahem!). I digress.

It's not uncommon that projects have wireframes (usually done by Information Architects, Business Analysts and/or both), and Designers have mockups (aka "comps" ... although there is a difference). At one point, there may come a need to have both overlap to see how they "fit." Needless to say, Pencil fills that gap. You can take this a step farther or bring it back a notch. All in all, the tool is truly inspirational in many ways. And given that it's part of your browser (many of us don't use it as a stand-alone), and if you save it to Dropbox-like solution, this turns the entire approach to a cloud-computing one that is accessible from any where. As a repository for your finished work, and to offload some space from your Dropbox-like solution, you can always use Google Docs (if you exported your work to a document of sorts like an OpenOffice or Word document, HTML or PDF).  ▣

Click here to see Tuesday-only posts.