Website Wireframes and Mock Tools Comparison

Whenever you’re proposing a web site or application to a client, showing him what it’s going to look like can work wonders. It avoids confusion and can fix doubts. But how do you show off a website when you haven’t written one line of code and HTML? Wireframe tools and website mocks are the answer. This article compares a few of the many tools available.

In this article I compare:

  • Balsamiq. The de-facto standard for creating mocks.
  • WireframeSkechter. A new kid on the block, based on Eclipse. The author generously donated a free license for this review.
  • Mockingbird. A completely web-based tool.

All three of the tools offer a similar feature set and are all very capable. So if you don’t feel like reading on, just pick one, and I’m sure you’ll be happy.

Of course, if you look closely, there are many small differences that might suite you and your workflow better.

Mockingbird‘s visual style is cleaner and different than most other tools. And the way you can arrange components by snapping them to guidelines and other components is equaled by no other tool. It’s easy to quickly create a well-aligned and well-spaced layout.

Balsamiq  is the most widely known mocking tool. It is popular for a reason. With a solid standard set of components and many ways to extend its functionality through custom components and third party tools, you’ll certainly find what you need. I tested the desktop version, but since this is a Flex application, the online version is exactly the same.

WireframeSketcher has a similar sketchy look as Balsamiq. Which is great way to communicate to your client that these are just temporary mockups. WireframeSketcher’s main selling point is the wiki-like syntax that allows you to deeply customize the standard components, such as the table. My main gripe is the small up and down arrows to navigate through the component library. I know this is a very minor annoyance, but the idea of mockups is to quickly sketch a layout and this held me back somewhat.

None of the three tools have an intuitive way of adding arrows. I like to attach yellow sticky notes to certain areas to explain different parts and have arrows point out the details. None of the tools made this easy.

The following spreadsheet gives an overview of some of the features of the different tools. You’ll notice that they are very close, so in the end it’s probably going to come down to personal preference.