At a Glance
- Fast; Many UI elements to pick from
- Lightly documented; Doesn’t allow freeform drawing
WireframeSketcher’s interface is not without its quirks, but it offers a rich array of UI widgets and excellent layout tools.
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