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

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

MoviePass drops pricing to under $7 per month, if you opt for the annual plan

MoviePass, the subscription service that lets consumers pay a monthly fee to see unlimited movies in theaters across the U.S., is slashing its prices yet again. The company announced today it’s now offering its service for $6.95 per month, down from the current price of $9.95 per month, when customers commit to a one-year subscription plan. That works out to a flat fee of $89.95 annually. The deal is a limited-time promotion, as opposed to a permanent pricing change, but MoviePass didn’t say how long the offer is valid. However, it is open to both new and existing subscribers – the latter who would receive a 25 percent savings on their current subscription if switching over to the annual plan. This is not the first time that MoviePass has dropped its pricing. When the company introduced its $9.95 per month, one-movie-per-day plan this August, down from $15 for 2 movies per month (or more in select markets like L.A. and NYC, and going as high as $50), it saw so many new sign-up...
2 comments
Read more

ASUS VivoBook X202E Windows 8 Touchscreen Laptop Review And Giveaway

It wasn’t very long ago when prices of touchscreen Windows 8 laptops soared beyond $1000. Thankfully, those days are behind us, and portable computers can easily be purchased – touchscreen and all – for under $500. That’s precisely the demographic in which the ASUS VivoBook X202E falls. When compared to a high-end laptop, its specifications might seem modest, but for laptop buyers just looking for a way to browse the web, watch videos, use basic apps, and not spend too much money, something in this budget is perfectly suitable. The question is, of course, how does the ASUS VivoBook X202E compare to others on the market, and is it the one which you should be spending your hard-earned money on? Well, you’re just going to have to keep reading to find out. Best of all, we are giving away an ASUS VivoBook X202E to one lucky winner. Keep reading for your chance to take home this Windows 8 touchscreen laptop! Introducing the ASUS VivoBook X202E Laptop The ASUS VivoBook X202...
Read more