Update: For a comparison between Balsamiq Mockups and FlairBuilder itself, please see this post. FlairBuilder is rather different from these two tools, but still, in order to avoid any confusion I decided to write another comparison to make the differences more clear. The comparison is made against Balsamiq Mockups, but the arguments stand for iPlotz, too.
When it comes to paper prototyping made in a digital fashion, there are two tools that really stand out: Balsamiq Mockups and iPlotz. People often wonder how the two compare one to each other and since there is no comparison available I thought it would be a good idea for me to write one. So here it is.
I must say that the entire comparison is made from my perspective as a tool developer. I do also develop a tool that has many things in common with what these tools try to accomplish, so I got to the point where I am very familiar with all the tiny details of this kind of tools. Maybe most of the time people won’t even notice or bother but, nevertheless, those details may sometime make a huge difference when it comes to adoption. People that have certain expectations, set by other tools, well known and established on the market, those will feel uncomfortable when facing unexpected behaviors or incomplete features or things that simply don’t work.
I also can tell that developing a tool is one the most exciting type of software development, especially graphics tool development. But as exciting it is, it is also very challenging. Getting features done right and usable is very, very hard to do. I know that with the price of many, many nights and weekends that I’ve spent on my own FlairBuilder. Thus, all my respect and appreciation for both teams developers, for all their hard work and effort to build and deliver good software.
Launched on June 19, 2008, has quickly become a very popular wireframing tool. Beside the popularity of the tool, Balsamiq also attracted lots of attention due to the openness of its founder, Giacomo ‘Peldi‘ Guilizzoni, about how the business was going on.
About 6 months later, “after 6 months of development”, iPlotz was launched. It started as an online wireframing tool, with basic project management features. Since then it also got down to the desktop as an AIR application.
Interestingly enough, Balsamiq Mockups started as a desktop application and very soon will go online in a SaaS version. On the contrary, iPlotz started as a web application and now also comes as a desktop application. iPlotz has some integration features between the two versions. However, I don’t know anything about what plans does Balsamiq have about their desktop/online versions integration. We shall wait and see. But for now, I have no other option but to compare only the desktop versions.
Now, lets dig in!
In order to get familiar with the applications I’ll just put in here the two short videos that briefly present them:
Working canvas, pages and master pages
As you probably have noticed from the video above, Mockups offers infinite canvas for design. Wireframes are pretty much single paged. Lately, a feature was introduced to let you link two mockups so you could simulate multi-paging. In order to define some kind of boundaries, you could use a Browser Window component or simply a rectangle as a background. Master pages may be simulated by using a background image, image that was previously designed and exported with Mockups. When importing an image into your wireframe, Mockups detects on disk modifications and reloads the image, so your changes on Master mockups will be detected on subsequent image export. Not a straightforward way to do master pages.
iPlotz wireframes are multi-paged by design, so you could define pages with specific size, assign master pages to them and so on. Pages may also be linked together as some components have the option to act as links to a web location or another page. Definitely a nice set of features.
Adding components to the stage
First thing you’ll wanna do when creating a wireframe is to add components to a/the page. Both products have a pretty comprehensive palette of components for web, desktop and iPhone applications. Still, there are some differences when it comes to palette design.
Mockups has a wide horizontal palette with large component labeled images. You could tell right away how the component looks like and if it is what you’re looking for.
There is also this Quick Add box where you can type in few letters of the component you’re looking for and Mockups will offer you several options that match your search. What’s also very nice about this Quick Add box is that subsequent search/adding will smartly position the components on the left side of the mockup, as seen in the presentation video.
iPlotz components palette is vertical, with small labeled icons for each component. While it is more traditionally positioned on the side of the working area, it definitely misses a filtering box. The only “Quick Add” feature available is double clicking a component in the palette. This will add the component to the middle of the page.
Balsamiq Mockups has in place editing for most of the components: buttons, text, links, tables etc., they all allow you to edit their text by double clicking them. Other property values are available for editing in a property inspector.
The property inspector has been very finely tuned up so, as much as possible, it won’t stay in your way while working. It becomes visible only when one or more components are selected. While doing anything else that doesn’t require the Property Inspector to be visible, it will nicely fade away. (Some may find the fade in/fade out a bit annoying, but overall it proved to be useful.)
At the time of this writing things are in a continuous development at iPlotz. The application is changing and improving. There may not be as many options available in the property inspector (yes, iPlotz has a similar property inspector) for some components but things are surely moving fast. Here is, for example, a component that seems pretty customizable.
On page components handling
In both applications, quite naturally, you click on the canvas and then start dragging to select one or more components. When handling the selection, both application behave pretty much the same way with two notable exceptions:
1. In iPlotz you have to click and drag one of the selected components in order to move the entire selection. I’ve seen that other apps have the same behavior (OpenOfficee, InkScape are two that I’ve tried… don’t know about others). It doesn’t quite feel natural to me but I can’t exactly explain why. In Mockups you may click and drag from anywhere inside the selection bounds. UX experts out there, share your thoughts on this little detail!
2. Resizing the selection is or, I should better say, feels a bit more “live” in Mockups. On the other hand, I just noticed that from version 1.2 to 1.5 iPlotz improved a lot on this matter. I am absolutely sure that this is an aspect that’s under active development.
Well, let me just another point that comes into my mind right now: when moving things around in Mockups, dragged selection will snap to common common position relative to the margins of other components. Being that iPlotz and Mockups are “paper” prototyping tools, not having this feature may not be so much an issue for iPlotz. However, those that are somehow used with pixel perfect positioning will be tempted to position components properly aligned one to another.
Apparently, Mockups has fewer components than iPlotz. And it does in fact. But on the other hand it does offer more options for those few components. For instance, the iPhone component itself may be also viewed in landscape mode. The iPhone menu has lots of customization options, not in the property inspector but rather in a custom syntax, very flexible and capable.
iPlotz has a larger set of separate components allowing you to build iPhone mockups by putting together the many piece.
Anyway, one thing that clearly makes a difference between Mockups and iPlotz is the look of the components themselves. Mockups keeps the same hand-drawn, sketchy look that is consistent with the rest of the application components. On the contrary, all iPlotz iPhone components are in fact pieces of iPhone pictures, with a very polished look. Given the fact that iPhone application do have a very common look, I’d not see this as an issue, but rather as a design difference. After all, many of the components in iPlotz have a sort of mixed look’n'feel, half sketchy, half polished with straight lines and clean coloring.
As for exporting the wireframe, Mockups offers you PNG export option, either to clipboard or to files. Haven’t tried this myself as these features are available only in registered version. iPlotz offers PNG, JPG and PDF export. Both applications have printing support.
Mockups is a bit older on the market and clearly is a bit more mature. It obviously was driven forward by the large community that adopted it as wireframing tool. iPlotz is growing and, as I said, things are moving pretty fast.
While Mockups also comes as a plugin to several other tools like Jira or Confluence or XWiki, it is pretty much a very focused product. It doesn’t try to do anything else than wireframing. Just lately it got a small but highly requested prototyping feature: linking mockups together. It seems that it was easy for them to implement but they haven’t done so until now just because they don’t want to step away from what Mockups is right now.
iPlotz, on the other hand started with a different approach. It was released as an hosted application, with all the burden that comes with: user management, user rights, collaboration, etc. It also has basic project management features. The look and feel the application itself looks much more polished, letting me know that time and effort was also invested here. Clearly, these are marketing aspects and it takes what it takes to go in one direction or another. There is clearly a trade off and a price to pay for going either way.
Soon Mockups will also have an hosted version and then both will compete on both fields. I’ll try to get back with another comparison when that happens. Until then, back to FlairBuilder hard work!