At the very beginning, I owe everyone who reads this an explanation as to what a prototyping tool really is. A "˜Prototype' is a mock up. You can think of it as an image or a model of the final thing. Prototyping tools are drawing and sketching tools which help in designing the outlines of the final object. A prototype can be created on anything, from simple paper to Photoshop. But being a specialized function, it's better if one does it through a prototyping tool.

Does it sound very technical and not for common use? Probably I am creating an image of a complex software and an especially skilled guy sitting in front of a large monitor, drawing incredibly complex diagrams. In some cases, this might be true. But for us amateurs, a new breed of GUI tools, a lot of them web based, have arrived.

From drawing regular shapes to a mockup of the blog you are planning, a prototyping tool can be put to the simplest of uses. You won't even have to download a heavy duty software for it. It's available from within Firefox itself.

Pencil (ver.1.1) is a Firefox prototyping add-on to do GUI prototyping and simple sketching. The Pencil Project is an Open Source attempt to create a tool for making diagrams and GUI prototyping easy for the masses.

Though it is available as a standalone program too, as a Firefox add-on, you can run it on any platform that supports Firefox 3 (and that makes it multi-platform).

The Look of Pencil

From the browser toolbar, select Tools - Pencil Sketching. The Pencil Firefox prototyping tool opens in a new window. This is how it looks (the look is influenced by my Firefox Theme)"¦

The arrangement of tools is intuitive and one look at the different shapes tells you something about the possibilities with this little program. You have common shapes (rectangle, oval, straight line, text etc.), shapes for annotations, comments and instructions (balloon, bullet, arrows etc.), web page elements (hyperlink, HTML, headings, table etc.) and a few widget collections (GTK+, Windows widgets, Native UI widgets).

Rapid prototyping is just a matter of having the idea of the design in your head and then creating it in Pencil by simple drag and drop operations. A range of control handles gives you the flexibility to arrange the shapes into a final design. Customize them further with text and the full complement of fill colors.

The final prototype can be exported as PNG images, web page, OpenOffice file, PDF or as a DOC file.

The Tools to Look Out For

Prototyping has a lot to do with creating lines and shapes and manipulating them into designs. Pencil includes two Firefox prototyping tools which make creating a gallery of shapes as easy as a snap.

Stencil Generator

Stencils are templates of shapes which can be used to generate further shapes. Using the stencil generator you can create your own collection of stencil shapes by pointing the generator to a folder of image files.

Each stencil has attributes like color, background and border color, and opacity etc which can be tweaked to define the final shape.

Clipart Browser

Tap into OpenClipArt.org and its gallery of free clipart images. With Pencil's support for SVG files, creating your own gallery of shapes isn't much of a problem. You can use the integrated OpenClipArt browser and directly drop the right images into a Pencil document.

Apart from these two Firefox prototyping tools, Pencil also supports the use of external objects. Both raster and vector images can be brought into Pencil using copy-paste or drag and drop. After creating a page or a document, the entire thing can be exported to a folder as PNG images.

Pencil is a great tool to have if you want to do some mockups in a hurry right from the browser. One of its simplest uses can be designing a mockup of a webpage. Also, any webpage can be sent to Pencil with a single click. Using the annotation shapes and the other available shapes, one can create a plan for a webpage in a jiffy right in the browser.

The Pencil Project page also directs us to the user guide and a few screencasts on how to go about with the program.

As a quick and dirty (strike out dirty) tool for rapid prototyping and diagramming, do you think Pencil deserves a place in your Firefox browser?

Pencil (ver.1.1) is available for download as a Firefox prototyping add-on and also as a standalone installer (for Windows and Linux).

Note: The Pencil Project is not to be confused with the animation program of the same name.