Pencil – Prototyping with Firefox

One of the reasons I love Mozilla so much is the diversity of projects that have come out of the technology they’ve created. Take for instance, the Pencil Project, which has a mission to “build a free and open source tool for making diagrams and GUI prototyping that everyone can use.”

I spent a little time playing with Pencil in Firefox (there’s also a standalone version if you’re using Windows or Linux, made possible by XULRunner) and it’s a nice little prototyping toolbox.

Pencil UI

Here’s what the Pencil UI looks like when run in Firefox on Mac OS X. The left side contains your typical drawing elements, bits, and pieces, and the right side is your canvas.

Pencil Sketchy GUI

Here’s the “Sketchy GUI” collection, which simulates rough sketches of UI elements, allowing you to quickly mock-up what something like a web app control panel might look like.

Pencil Mock-up

Here’s a quick mock-up I did with Pencil. Wow, it looks just like an actual sketched mock-up of a web UI element… pretty amazing, eh?

Pencil Graphic

Pencil also lets you drop images into the canvas and resize and crop them, so you could use it as a quick-n-dirty (somewhat limited) image editing application that runs within Firefox.

There’s much better screen shots at the Pencil site. There’s also guides for users, and developers, and plenty of other stuff to check out, so get prototyping!