This past week, I had the pleasure of demoing three great wireframe mockup applications: Balsamiq, Mockingbird and MockFlow. While they each have some unique capabilities, I ultimately ended up picking the one that made my work process easier for me and my clients.

What I Needed It For

I'm currently working on a client project that involved designing several wireframe mockups, receiving feedback on them and then rapidly reiterating soon after. The mockup application should:

  1. Be versatile - have many elements that let me create a mockup that truly reflects what I envision
  2. Let me export in PNG form (or something else that's high quality)
  3. Allow me to share the work with my client, get direct feedback on it if possible
  4. Let others work on the mockups if needed (team editing)
  5. Be affordable

Thankfully, all of the mockup applications I used took care of requirements 2 and 3 - they allow you to export in either PNG or PDF format and are very reasonably priced. The rest, however, is where they start to differ.

Balsamiq

I've been following Balsamiq for the past couple of years, ever since reading about Peldi quitting his job and diving into this venture on HackerNews. I remember being glued to his blog and getting giddy as I read about his rapid success (and being thankful that he was sharing this). So naturally, I have a slight lean towards his product, and it was the first of the applications I tried.

Pros

  • Intuitive interface
  • Endless supply of elements/controls
  • Plugins for lots of other apps
  • Has desktop version (Adobe Air)

Cons

  • No easy way to share
  • Standalone doesn't offer team support/editing

I downloaded the trial version of the desktop client (uses Adobe Air) and started tinkering away. It was fast and easy to work with and there were literally dozens of elements that you can customize and use in your mockup. The layout is intuitive and makes designing both quick and efficient. The hand-drawn is in line with what I want my mockups to be: simple, rough and letting the client know that they're not seeing the end product, rather just a mockup. You can get more elements/controls from MockupsToGo.net, where users contribute their own creations (an endless supply).

The only real issues I had with Balsamiq came about when it was time to share my mockups with my client. Since I had full intentions of buying this software, I want - require - an easy way of sharing my work with my client and getting feedback for it. Unfortunately at this time, the only way to share your work using Balsamiq Desktop is to export and e-mail it to recipients. When you're working with several mockups and have to go back and forth, this can quickly get annoying.

Note: the Balsamiq team is currently working on a web version of their software that has much better collaboration features, it's definitely something to keep an eye on.

Mockingbird

I also heard about Mockingbird from HackerNews (if you can't tell, I spend a lot of time there). They were one of the first big web apps I saw using the Cappuccino framework (Objective-J) developed by the clever guys at 280North.

Pros

  • Intuitive interface
  • JavaScript-based (no plugin required)
  • Team Collaboration Support

Cons

  • No Desktop/Offline Version
  • Team features not as extensive

You don't have to download or buy anything in order to use Mockingbird - just click the Launch link in their header and you're sent into their application. The interface is pretty sweet, I have to admit, and it's especially nice not having to right-click to access the individual element features like you have to in Balsamiq and MockFlow. I'm also a big fan of how you can resize the canvas and snap elements to the grid - it makes building quick layouts much faster.

I came across two issues with Mockingbird. The first is that while their collection of 'widgets' or elements is pretty extensive, there's no way to add your own custom ones (or an image). That means you have to make do with what you have, or ask the developers for more, which is somewhat limiting. The second issue is with one of the selling points, and which ultimately made me cancel my pro account with them. When you share a mockup or set of mockups, you can either share publicly (using a link), which just lets people view the mockups, or you can share with your team/client and give them full editing capabilities. My issue is that I want my client to see my work and be able to leave comments or feedback on it, but I don't want to overwhelm them with two dozen elements and numerous editing buttons. That one problem led me to look for a better alternative.

MockFlow

I came across MockFlow from a Google search for "wireframe mockups" and having seen their landing page, my expectations suddenly dipped. It simply wasn't as nice as Balsamiq or Mockingbird, so immediately I had a negative connotation of their product. When I took the time to look at it further and actually try it out, my opinions completely changed.

Pros

  • Intuitive interface
  • Web or Desktop versions
  • Excellent Team Features
  • Import Images
  • MockStore (place to get more elements)

Cons

  • No monthly payment option
  • Flash-based

You can get an idea of what MockFlow is/does from this video or by checking out the sample mockups on their site. The first thing you'll notice is that the mockups look like real sites - they don't have a cartoon-ish feel to them, which may or may not be preferable to some. Another feature you'll notice is the ability to import images, which is great for adding a logo (if your client has one) into the mockup.

Their team sharing feature is where the application shines though. You can organize your project into multiple folders and subpages, then share your project with people publicly (which shows a limited interface) or privately with your team. You have the option of letting your team have either complete control of editing the mockup or just the ability to make notes on them, which is perfect for what I need. They only have one premium plan which supports both unlimited users and mockups, however is limited to 5GB of image storage space. Lastly, they have this thing called the MockStore where users can submit their own elements and people can download them (similar to Balsamiq but built into the app itself).

The only real downsides of MockFlow are that it's Flash-based, which is not really a problem for 90% of web users, and that they only have one payment plan/option. You can only buy a 1-year premium membership for $59/year, there is no monthly option. It's not too big of a deal since it's pretty cheap (less than Balsamiq), however some users may not want to commit to a years worth of service. Other than that, it really is an incredible piece of software (which makes me wonder how they came up with something as silly as DivCraft).

Conclusion

As you can probably tell, I ended up selecting MockFlow as my mockup creator of choice. Simply put, it just works, especially for the way I'm using it. I can edit all of my mockups for a certain project using the desktop application, hit save and immediately my clients can hit refresh and see the updated version in their web browser. That is what I call convenience!

Anyways, what do you guys use for creating wireframe mockups? Am I completely wrong in my assessment of these apps? Let me know in the comments!