Wireframing is an invaluable technique when starting the development of a new project, both to set functionality expectations with project stake holders and to give the build team a concrete idea of what it is exactly they have to build. There are plenty of web based and commercial packages available but I don’t really do enough wireframing to justify the cost of an ongoing subscription to a web based service and not many of the commercial packages cater to the Linux market. I have always loved Dia ( http://live.gnome.org/Dia ) for creating flow charts and work flow diagrams but never really found it suited to the creation of wireframes.
Enter the Pencil Project released under the GPL licence as a Firefox plugin to quickly create wireframes and application prototypes, its free, cross platform and very easy to use. Only problem is it doesn’t work with Firefox 4 & 5 (seriously who still uses 3?), fortunately using the XULRunner package Pencil can be run on its own as a stand alone desktop application.
Below are some instructions on installing Pencil on a Ubuntu Natty Narwhal (11.04) system, but realistically it shouldn’t be a big issue to get it working on any recent Linux distro.
First download the Pencil app from the the website to the directory you would like to install the application, in this case I am using ~/software/pencil.
wget http://evoluspencil.googlecode.com/files/Pencil-1.2-0-linux-gtk.tar.gz
Uncompress:
tar zxvf Pencil-1.2-0-linux-gtk.tar.gz
Update your systems package repository:
apt-get update
Install the XULRunner package to run Pencil as a standalone program:
apt-get install xulrunner-1.9.2
Now you should be ready to run, to get started with Pencil simply execute:
xulrunner application.ini
After install a shortcoming I found, is that I needed to install an extension to support exporting my prototypes as a HTML document. This was fixed by downloading the plugin:
http://evoluspencil.googlecode.com/files/DefaultHTML.zip
Then in the application select the the “tools” menu and the choose the “manage export template” option then browse your file system select the plugin zip file to install
