Friday, February 17, 2012

Creating Wireframes with Pencil

When working on a project which requires a user interface, it is usually best not to jump ahead and start programming the UI part before making some sketches first. It makes sense, since UI development shouldn't be different than library/API development. The client is different, but the principals remain.

For a long time I've been a Balsamiq Mockups person. I know, it's not open source, but they'd used to give licenses to those who blogged about it. Also, few years ago, Balsamiq was far superior to other solutions and it contained much needed features.
This is not true anymore. For the past few months I've been using Evolus Pencil and I can tell you it's great. First - it's open-source. Second - it has ports to all platforms and can also run as a plugin for Firefox. Moreover, it is customize-able, extensible and very flexible.

So if you've decided to give Pencil a try, here's a tip that would make your wireframes look a bit more serious and professional: right click the "Sketchy GUI" collection in the collections tab, and select "Collection Settings...". Navigate to the "Text" tab in the resulting dialog, and change font family from "Comic Sans" to a font that you might actually use for the final product.
Want another tip for general wireframes design? Don't ever use "loren ipsum" as a text filler. Wireframes should be later translated into real UI and graphics design, so you don't want to find out that that text area you've been designing doesn't fit the needs of your application. Always wireframe with real data.

Those were my two cents for wireframes using open-source software. Hope it helped.