Skip to main content

Pencil Project – Turn Firefox into A Diagramming and Prototyping Tool


Pencil-ThumbAt 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)…
Pencil-1
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).
Pencil-6
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.
Pencil-2

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.
Pencil-3
Each stencil has attributes like color, background and border color, and opacity etc which can be tweaked to define the final shape.
Pencil-5
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.
Pencil-4
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 (featured here).

Comments

Post a Comment

Popular posts from this blog

How To Hide Text In Microsoft Word 2007, Reveal It & Protect It

Sometimes what we hide is more important than what we reveal. Especially, documents with sensitive information, some things are supposed to be ‘for some eyes only’. Such scenarios are quite common, even for the more un-secretive among us. You want to show someone a letter composed in MS Word, but want to keep some of the content private; or it’s an official letter with some part of it having critical data. As important as these two are, the most common use could involve a normal printing job. Many a time we have to print different versions of a document, one copy for one set of eyes and others for other sets. Rather than creating multiple copies and therefore multiple printing jobs, what if we could just do it from the same document?  That too, without the hassle of repeated cut and paste. We can, with a simple feature in MS Word – it’s just called Hidden and let me show you how to use it to hide text in Microsoft Word 2007. It’s a simple single click process. Open the docum...
1 comment
Read more

Boom, the startup that wants to build supersonic planes, just signed a massive deal with Virgin

Have you heard about Boom? Boom is a relatively new startup that’s aiming to build something pretty crazy. They’re not building an app… or a social network… or even some new gadget for the Kickstarter crowd. Boom wants to build planes. Really, really, really fast planes. Specifically, they’re trying to design and build a supersonic passenger plane that goes 2.2x the speed of sound. If all goes to plan, they’ll be able to shuttle people from New York to London in 3.5 hours, and SF to Tokyo in 4.5. Sound crazy? I wouldn’t disagree. It’s worth noting that the company is in the very early days for something as intensive, massive, and hugely expensive as designing and producing a passenger aircraft. They’re still working on their first prototype, and hope to fly it by late next year. But it’s also worth noting that the team behind the plane has some serious talent in its blood: the company’s 11 employees have collectively contributed to over 30 aircrafts — having worked on thin...
Post a Comment
Read more

Build Your Own Awesome Personal 3D Avatar with Avatara

Do you use social networks and want to build your own awesome 3D avatar? Maybe you want to send someone a cute cuddly image of yourself (kind of)? Or maybe you have your own ideas of what you would do with an Avatar… Well look no further than Avatara which I discovered from the MakeUseOf directory . You can create 3d avatars out of pre-set up templates or create your own from scratch. To start, visit Avatara’s homepage . You will see this screen: Click Get Started to umm, get started! That will take you to this screen: You see that you can build your own Avatar using an uploaded head shot like the Obama one above (just an example, guys). Or roll with one of their awesome avatars. I chose to start with a blank avatar by clicking Start with a blank avatar at the bottom of the screen. That takes you to here: I clicked on the filter at the top and told it to filter out everything but male characters and then I saw this: I rolled with Buck and continued. You need to click Select...
1 comment
Read more