Pencil as a Mock-up Creation Tool

Designing mock-ups of your applications could be tricky sometimes especially if you just want quickly drawn wireframes of the screens. I personally don’t want to use GIMP for that because it seems to complicated to use for such a task. Thankfully there is a tool you could install on Firefox called Pencil. (View more about it on the homepage of Pencil.)

Once you have installed Pencil, you should restart Firefox and then look for it under the Tools menu of Firefox. It will open a new window with a new page waiting to be ‘drawn upon’ with a mock-up screen. On the left side is a pane with the shapes you could use.

• Common shapes such as rectangles, lines, text areas.
• Annotation for your comments. Balloons, arrows, etc. make it easier for you to write your own comments fast.
• GTK widgets help you come up with mock-up screens of GTK-based apps.
• Windows widgets help you make design for the Windows user interface.

A sample mock-up screen. Image credit: Clair Ching, 2009.

One of the nice things about using Pencil is that you could put the shapes one on top of the other if needed. You could just drag shapes from the panel and drop them in to the space for the page. It is also nice that you could resize and rotate those shapes. Resizing is done by clicking it and you will notice the points around the shape become blue. Then, move your mouse pointer to stretch it in the proportion of your choice. If you will rotate the shape, click the shape until the points around the shape are red. Then start moving it in the direction of your choice.

You could create a new page with a button click on the “New Page” button. You could specify the size of your ‘canvass’ It’s up to you how you pick the size of the screen. As long as your team knows it’s what your designing for then well and good.

Creating a new page on Pencil. Image credit: Clair Ching, 2009.

Whatever you make with Pencil is something you could export as an image file so you could use it for presentations, etc. if you need them.