Pencil Project: Sketching and Prototyping with Firefox

Recently I've been using a wicked new tool called Pencil Project which allows you to make quick and simply GUI Prototype mock-ups. The tool is built on top of the Mozilla Gecko Engine and runs on all operating systems which Firefox 3 runs on. It comes in two forms, firstly a Firefox plug-in which runs inside your browser as well as a standalone installer which runs like any other Desktop program. I chose to run Desktop client as Google Chrome is my browser of chose at the minute.


I initially started using it a work, replacing fag-packet paper designs with a fully fledged interactive GUI design which can be tweaked, exported and easily shown to all stakeholders who have and interest. I've now put it to use on designing not only web applications but Android GUI's and its great. 


Best features:


Tabs
Tabs is a must in my mind for applications such as this, following the direction of a lot of modern applications, the tabbed design creates an easy and intuitive way to follow your design process through the motions. 


Base Design
One of the best features it has allows for the ability to have a base design which you can then add to as new components get created. I've been using this to show GUI changes on the same screen, i.e. pop-ups appearing, interface changes depending on particular events etc. Below in an example log in screen which goes through the motions of authentication with a failure. The base design template means you can simply duplicate a tab, set the background to be an existing design and then simply make changes as you see fit depending on different outcomes.





Open Source
Being an advocate of open source its always a benefit when a tool you use is open source and freely available.


Exporting
Pencil allows you to export your document to several formats including; PNG, HTML, PDF, ODT (Open Office) and DOC (Microsoft Office).  It also has the ability to create your own exporters so you can save to any file you like, I'm not to sure if I'll ever need this as PNG, HTMl and PDF are my preferred formats for prototyping. 

All in all its a great addition which I'll be adding to my toolbox, cheers to the people at Evolus who made it.


Website:http://pencil.evolus.vn/en-US/DevGuides.aspx
Developer Site: http://pencil.evolus.vn/en-US/GetInvolved.aspx
Google Code Repository: http://code.google.com/p/evoluspencil/w/list