Pencil for easy UI mockups

When I recently started my new side project, Read Feeder, I wanted to do some quick UI mockups before I started coding.  Normally I would do this with a physical pen and paper, but I wanted to move into the 21st century and find a way to efficiently make mockups on the computer (also, there wasn’t a pen and paper nearby, and I didn’t feel like getting up to find one).

I considered using Inkscape or Gimp, but those tools really aren’t meant for this, it would take an awful lot of work to force them into that role.  Jorge Castro pointed me to an AskUbuntu post, where it was recommended to try Pencil, a very nice looking and (even better) GPL licensed program designed specifically for making UI mockups.  Even more interestingly, it seems to be written entirely in XUL and Javascript, the same thing that powers Firefox and Thunderbird.

It’s not often that I find an app that is really, really intuitive, but this one nails it.  Within minutes I was feeling productive, everything did exactly what I expected it to do, all the features I looked for were right where I first looked for them, and it just plain made things easy for me to do.  I’m not a usability expert, so I can’t say exactly what they did right, but they certainly did something right.  Lots of somethings.  I can’t remember the last time I felt at home with a new program so quickly.

The first thing I noticed was that Pencil is aware of all the other components you’ve placed on the screen, and helps you keep them lined up with each other.  It does this by both overlaying guide lines that let you match the top, bottom, and middle of other components, and also by snapping new components to those positions as you drag them around the screen.  Being someone who is very particular about these kinds of things, even on mockups, I found this to be a very welcoming feature.

Another nice feature Pencil provides is the ability to use an existing page as the “background” for a new page.  This lets you lay out the new page to match the existing one, almost like using tracing paper.  You can also select multiple items from the existing page, and copy/paste them into the new one.

Since copy/pasting so many elements, even groups of elements, would become a tedious task when you have something common to so many screens, like the Read Feeder header, Pencil allows you to convert the combinations of items you make into reusable widgets that act like any of the other Pencil widgets.  Doing this you can quickly build up a library or reusable components for your project, without having to plan it out ahead of time.

Speaking of widgets, Pencil comes with an assortment of them for different platforms, including GTK, Windows, even Web!  It also has a library of “Native Widgets”, which I assume will change depending on your current platform.  It even comes with a library of “Sketchy” widgets, which have a hand-drawn look to them, which is something that is popular when doing mockups, even when more polished widgets are available.

All in all, I’ve been very impressed with Pencil, and I would highly recommend it to anybody who wants to do some UI mockups for any kind of project.  Unfortunately it isn’t currently in the Ubuntu repos, nor do it’s developers provide a .deb package for it at all.  Maybe if I have some time I’ll take the initiative to package it for Debian and Ubuntu.  For now you can just extract the .tar.gz and run it directly.

This entry was posted in OpenSource, Programming and tagged , , . Bookmark the permalink.

11 Responses to Pencil for easy UI mockups

  1. Tan Kah Ping says:

    Looks nice, but doesn’t run on Ubuntu 11.04. At least, not on my end. Looks like it’s not yet compatible with Firefox 4.

  2. Tan Kah Ping says:

    OK. My bad. I didn’t read the workaround in the AskUbuntu link first.

  3. Hey, I’m glad to hear Pencil is working well! I had tried it some years ago but it was really slow with laggy redraw and not really complete, and it had seemed like the project stalled for a while or something. It’s looking really nice now though and I will give it another try.

    I did want to point out that Inkscape is an awesome, awesome, awesome UI mockup tool, and it doesn’t really take much ‘forcing’ to have it operate as one. Just wanted to say that. :) It’s been my primary UI mockup tool since 2006.

    • Maximo says:

      At first glance it looks petrty nice, but maybe too nice? I really like the unpolished look that Balsamiq produces, since it forces you to realize that the mockups are unfinished concepts. The search dialog screenshot in your post looks too close to a working product in my opinion. The integration with Eclipse sounds nice though.

  4. jimcooncat says:

    What an excellent find! Works well as a Firefox addon, too — so you can play with it without doing the .tar.gz thing.

    How to install: Download the xpi file from the above page, then from the Firefox menu File->Open File… and open Pencil-1.2-0-fx.xpi that’s in your Downloads folder. Then start it using the menu Tools->Pencil Sketching…

  5. ckontros says:

    Hmm… I’m a bit confused now:

    • Michael Hall says:

      Yeah, there’s another program called “Pencil” that does hand-drawn animations, that one is already in the Ubuntu repos too.

  6. Pingback: My Unity TV Mockups | Michael Hall's Blog

  7. gabriel says:

    Pencil is really great and definetly better than Visio for designing software mockup. Unfortunately it is so ridiculously slow that it becomes not usable in the real life.

  8. Ale Ribeiro says:

    I’ve tried Pencil for the last 2 weeks and I can say it works fine for small and medium-sized projects since it is not that fast. A very intuitive tool with simple features that really brings the “Quick’n’Dirty” into perspective. It lacks powerful resources offered by other prototyping tools and ,therefore, the excessive going over documentation and forums to get the job done. I recommend it.

Comments are closed.