Create Application, Website or iPhone Mockups Easily with Balsamiq

The other day, I came across an incredibly useful Adobe AIR application called Balsamiq Mockups. This application allows you to quickly and artistically create drawing-like renditions of websites or applications for the computer or iPhone.

As I work in the software and hardware industry, I frequently have to discuss changing our website designs with various people within the organization. Often times, I spend a few minutes sketching out a concept for how to present a new feature within our website, or event how to redesign a person’s website from scratch. Usually, the drawings I produce are child-like and not elegant at all.

I had always envisioned a icon-based, drag and drop application that would allow you to quickly create a wireframe for a website or iPhone app. Balsamiq Mockups has solved this for me in a way that is easy to use and fun to execute.

The Program

Balsamiq Mockups is broken down into a few main components: the canvas and the UI Library and a few items that automagically activate based on the icons you select.

The canvas is basically like a piece of grid paper you used in college.

You also have a “UI Library” which contains a variety of commonly used web and application design components. The UI Library is fully searchable by keywords so that if you want to get an “alert box” element, you can simply type that in, hit enter, and if there is a match, your element or object appears on the canvas. You can also select the elements and drag them on to the canvas.

Once you have an object on your canvas, you double click it to edit variables related to it. For example, below I have an “alert box” in the edit mode. It comes pre-populated with text to give you some guidance (which I customized below).

Once you are done editing, you simply close it and see the changes reflected in the object.

Another example is that of a browser. I actually decided to show a full web-page build out in Balsamiq to really see how easy it is to use. The final version of my “new website mockup” can be seen later on in this post. The first step is to drag the “browser window” element onto the canvas and edit it.

Once you customize the Title and URL, you have a ready-made browser window where you can place other element.

Also, when you select an element, you frequently get another control object that lets you fine-tune whatever item you are working with. For example, with the web-browser page, there is a toggle on the control to add or remove scroll-bars on the browser window.

Working with objects and customizing them is incredibly intuitive. The best way is to just start playing with all of the objects to see what they do. Double-click them to edit any variables or data that is configurable as well as review the control object to see what can be further tweaked.

My Mockup Test

So, I decided that I would give Balsamiq Mockups a real world test by taking on the project of redesigning my current blog. I wanted to see how quickly and easily I could do a professional looking mockup, all without reading any kind of user manual – just through simple exploration.

As you saw earlier, you start with laying out a web browser window and then continue dropping objects onto the canvas. It’s easy to quickly amass a sizable amount of UI objects. Grid lines and snap-to guides help to keep objects lined up.

As I went along, I discovered that some objects had more tweaks than others. For example the icon control actually lets you choose from a huge variety of included icons (e.g., the calendar and RSS icons are from there).

Also, one function that I found very nice was that you can convert images into a drawing-type of style so that the image doesn’t become a distraction to the eye. You can see this with my logo and a square banner ad on the left side.

After about an hour of adding, deleting and tweaking, I came up with the following result:

All of the elements in the picture are from Balsamiq including the callouts and sticky notes. It took a little while during the creation process to become adventuresome and try different types of controls. But what was immediately evident was that I could not have done this free-hand to the same degree of artistry (I’m a horrible illustrator).

Summing It All Up

Balsamiq Mockups allows you to focus on the details of a mockup and not the mockup itself. Because it presents the same look and feel always, and that look and feel is elegant yet simple to the point of being unobtrusive, when mockups or application designs are presented, the emphasis is more on the content of the mockup. You can export to PNG or even directly to the clipboard for easy inclusion into presentations or documents.

It is also very easy to collaborate with co-workers who may not have Balsamiq. They have developed an online version that has all of the functionality. You simply import in an original XML markup of a Balsamiq design, tweak it online and then export it back out as XML and send to the person who has Balsamiq. An online, subscription-based version is coming soon.

There a many reasons I really like Balsamiq mockups:

• Adobe Air – it’s a full-featured, cross-platform application. You can use on a Mac or PC and it operates the same way.
• Easy – Balsamiq is very intuitive and easy to use. A child can understand and use it with ease. But because it is easy, doesn’t mean that it is simplistic. Quite the contrary. It has a powerful feature set that does the job.
• Expandable – you can easily import in other UI libraries that people develop from the MockupsToGo site.
• Reasonable Cost – there are a variety of pricing options available, ranging from Free to $6000, depending on the product (Desktop, Confluence, JIRA or XWiki), the license type (Academic or Commercial) and the number of users.
• Great Supporting site – I really liked the Balsamiq site. While not the product itself, you can get a good view into the application designer by seeing how the product site is put together. Good visuals mixed with clear text (I like the use of highlighting throughout).

As a company, Balsamiq is small but starting to grow. Located in Sacramento, CA and Bologna, Italy, it consists of a founder/do-it-all, a full-time programmer, a part-time contractor (also a programmer) and 1 part-time support person, but they are close to hiring another full-time support person. While small, you can truly see the thought and effort that goes into the design of not only the product but the site.

Balsamiq comes in various flavors, the most popular being the Desktop (standalone) version, reviewed here, which costs $79. Other versions are more expensive due to their integrations with other systems including: Confluence ($600-$4000 depending on # of licenses), JIRA ($149-$799) and XWiki. All versions come with a 30 day free trial. If you are a non-profit, student, teacher or any other of a generous selection of users, you may qualify for different pricing or even a free license.

Balsamiq has the ability to support website design, applications (windows/Mac) and iPhone mockups. With other UI libraries being developed, there are plenty of other possibilities for drawing solutions.

Note: I reviewed version 1.5.34. However, version 1.6.7 was release with some fantastic new features including linking two mockups, spacing enhancements, new keyboard shortcuts, colorizing “scratch-out” controls, and other performance enhancements and bug fixes.

I have very few complaints about this software. I do wish that there were some sort of layer control. Once you start placing many objects on top of each other, sometimes it is difficult to select the appropriate one. A simple implementation of layers with naming would go a long way. Layers could be hidden, moved up/down and possible have some other controls.

I honestly wished that I had been able to have this application in my tool set many many years ago. It is great for marketing people to help articulate to designers or just articulate a vision.

HTD Says: Balsamiq Desktop is an essential tool for any design shop, business organization, or anyone who needs to quickly and elegantly create stylish mockups. It truly helps you get ideas to paper in a fun and engaging yet powerful manner.