Guillermo Guerini

Since I’ve became a web developer freelancer, I started to be responsible for all the steps in creating websites or web applications. It didn’t take too long for me to figure out how important it is to create mockups and prototypes, especially for clients who don’t really know which components are necessary. With the mockups, it’s much easier for them to analyze whether or not this is what they want or something else simply because it’s concrete.

In the past few months I’ve been testing many apps to find a powerful tool that allows me to create professional mockups for my clients with freedom and agility. I wasn’t looking for something as complex as Visio nor as simple as just a pen and paper. I searched until I found Balsamiq Mockups from Balsamiq Studios. Balsamiq Mockups is an app developed on Flash that runs under the Adobe AIR runtime, which allows it to run in multiple platforms (Mac/Linux/Windows).

Also, the mockup’s “look and feel” reminds me of many prototypes I’ve done in the past, but this time without any pen or paper (and with much more quality). The interface is simple and direct. Basically, there are two main tool boxes. The first contains a feature called Quick Add, as it suggests it is the easiest way to find and add controls to your mockups, in addition to the basic buttons as Copy, Paste, Group, etc.

The second tool bar contains all 75 available controls divided into categories such as Buttons, Layout, Media, etc. (there are specific controls for the iPhone). New controls still can’t be added to the app, but it’s possible to import images and apply the Sketch it! feature, which converts the picture to icons similar to the others controls. The Mockups To Go website has several free templates created by the community and new controls can be solicited directly to the Balsamiq creators.

There is no secret o create a new mockup: just drag’n'drop the controls to the page. All the controls have a property inspector which allows you to change fonts, colors, alignments and many other specific properties. The app allows you to export your mockups to the PNG format, also to copy and paste directly to Word and Powerpoint. Balsamiq Mockups supports many colaborative solutions like Atlassian Confluence, Atlassian JIRA and XWiki and also has a XML based format to save the mockups. The full screen mode hides all the tool boxes and leaves only the mockup on the screen, which is good when you need to make a presentation or have brainstorm sessions with clients.

Watch how to create the mockup of an application similar to Apple iTunes in the video below:

Two of the few criticisms I’ve found in other reviews are:

• Only single page mode: It’s not possible to have multiple pages in one file, which means it can be a problem if you want to group similar or related mockups inside one file only.
• There is no Master concept: Related to the item one, you can’t have Master controls (eg.: share the same “default” controls over multiple pages).

But the Balsamiq’s creators are paying attention on the criticisms and suggestions. They already announced they are working on these improvements and soon we will have news. It’s very important to have this kind of relationship between the creators and the company, especially for us, the users, who will only  gain from these  features and improvements.

Without any doubt, Balsamiq Mockups is part of my favorite tool list that I use to develop websites and web applications.