Wireframing with Pencil: a FireFox add-on review
My preferred way of creating web site wireframes is with a 0.7mm mechanical pencil and sketch template from 960.gs. But just recently I had to quickly create a wireframe that I can more efficiently update and share with the client.
I did some googling and found “Pencil” a free/open-source FireFox add-on for quick GUI prototyping. “Pencil” was not tested on Mac OS X, but it looked so simple and easy to use that I decided to give it a try.
Pencil’s GUI is pretty intuitive and easy to figure out.
There is a nice set of shapes and objects to choose from
To add objects to the page you just drag and drop them from the “Shape Collection”
To change objects’ properties (background color, border, text etc.) you can use contextual menus or toolbars
There is an extra sat of handles that control the rounded corners. I really liked how this worked.
Problem areas: at least on Mac OS X
Selecting multiple objects on the page for repositioning didn’t work as expected. You can’t just loop around a group of objects to select them. I had to ctrl+click each object I wanted to select.
This was a problem, because ctrl+click on a Mac = right-click on a PC.
Another problem was the PNG export. Heading 1 or Heading 2 formatted text was getting cut off, and the links did not have expected formatting.
I don’t know if there are any other problems with “Pencil” on Mac OS X. Finding those two was enough for me to switch to Adobe Fireworks to complete the project I was working on.
I’ll keep watching “The Pencil Project” for improvements and support for Mac, as this lightweight, free and easy to use solution could save me lot of time developing web site prototypes and wireframes.
