WireframeSketcher

These days, I’m busy creating a new online store, a process that involves quite a bit of user interface design. To make matters more complicated, my colleagues are spread all over the globe, so we can’t just walk up to the office whiteboard and quickly flesh out ideas. It used to be that to show them a new UI layout, I had to draw it from scratch using CorelDRAW (and even MS Paint, just that one time). WireframeSketcher changes that, and lets me present slicker UI designs much faster.

A wireframe is a non-working mockup of an interface, much like a sketch on a napkin. While there are online tools for creating wireframes (such as Mockup Builder), some situations call for a downloadable application that can be used offline.WireframeSketcher starts you off with a blank canvas, on which you can drag and drop any number of widgets. Some of these widgets can be as simple as a button or a label, while others can be as complex as “cover flow” (à la iTunes) or a video player. You can also customize them: For example, the table widget lets you control the number of columns, their width and their contents, and you can even add icons into cells (not just text).

There is no dedicated user interface for customizing a table’s contents; instead, you are presented with a text area into which you must type the desired layout and contents, using specialized syntax. WireframeSketcher’s syntax isn’t very complex, but doesn’t adhere to any widespread standard (it’?s a form of CSV, basically). It is mentioned in the online manual, but the documentation mainly consists of a few quick examples. I was eventually able to get the table to show the information I wanted in the correct format, but it did require a bit of fiddling.

When you drag or resize widgets, guidelines automatically pop up when they line up with other widgets. This makes it very easy to create a polished design without having to keep using the dedicated alignment tools such as “center selection” (which are also available).

By default, WireframeSketcher draws your design using squiggly-looking lines, as if you drew it with a Sharpie. This may seem a bit gimmicky at first, but it’s really a great way to communicate “this is just a concept design.” You can also toggle the squiggly lines off, to display your design with crisp, straight lines.

Most user interfaces take up more than one screen, so WireframeSketcher lets you draw multiple screens for any project, and even create interactive links between screens. For example, you could have a “Next” button that can actually be clicked (within WireframeSketcher) and then flips over to the next screen in a Wizard interface mock-up.

When you feel your design is ready to communicate, you can present it using WireframeSketcher itself: Hit F5, and WireframeSketcher switches to full-screen mode; all the linked buttons start working, and you can cruise through your interface almost as if it were the real thing. Alternatively, the application can also output to PNG and PDF files.

At the end of the day, WireframeSketcher still feels a bit like drawing on a napkin, but with more oomph. It certainly makes for better-looking meeting handouts. I wish some of the widgets were easier to customize, but I can definitely see myself using it to communicate interface ideas in the future.

Note: This seven-day trial will output watermarked images only. Versions for Mac and Linux are also available.

–Erez Zukerman