I’m mostly a pencil-and-paper kind of person for sketching out application ideas and wireframes; it’s as though my thumb, index finger and middle finger close together to form a supplementary neural network. So I have a lot of inertia to overcome when I try to use wireframing applications.
A couple of months ago Roman Nurik published some Android UI prototyping stencils and a few days ago I finally got round to trying them out. They are in the form of “collections” for Pencil a Firefox add-on for doing GUI prototyping. After a bit of messing around getting Pencil to import Roman’s collections on Ubuntu I started using it to wireframe a small app I that I’m building as a tool for my other apps.
After a couple of hours spent wireframing the application, I’ve been really surprised by how productive it’s been. Tools like Pencil are still not my kind of thing, but the prefab’ed controls make things very quick.
One problem with sketching out designs by hand is that it’s easy to make small errors of scale which cause you to waste time coding-up designs that look feasible but that just don’t work. Mocking-up the designs with correctly scale components avoids that (though nothing will remove the mental reasoning needed to evaluate designs in the context of varying devices).
Here are a couple of images. The first one is the wireframe I produced using Pencil, and the second one is the progress I’ve made towards implementing it. I’m fairly confident that things are going to work out well for this activity.

