Balsamiq Mockups , how to design UI drafts

In this post we are going to talk about Balsamiq Mockups. Balsamiq Mockups is a tool created by the Balsamiq team that allows us generating drafts of our UI application.

There are two version available of Balsamiq Mockups, a web tool and a desktop version too.Balsamiq Mockups is a commercial tool, 79$ for an user license. However, it can be possible evaluating a fully funcional version of this tool during 7 days.

Besides that there are some more available products, like plug-ins that integrate Balsamiq Mockups with another well-known tools like Confluence, JIRA or XWiki.

We can take a look at it clicking in the Try Web Demo link. A screen will be opened with the following look&feel.

In the top area of this screen there are a great number of available UI components. There are common UI components like text fields or a web browser windown. There are also more complex and less common UI components like some types of charts or google maps ones. Balsamiq Mockups has a specified section for UI mobile (iPhone) components. In the following image some random components has been added to build an example mockup.

Besides of the standard components some contributors-made components can be found in http://mockupstogo.net/ . For testing purposes we are going to create a draft that try to imitate this blog interface. An interesting thing about UI components is that we can edit their contents and aspect to make the draft more realistic. We can assign specified values to our datatables componentes to resemble the the later application UI. At the same time we can edit links from some components to others.

En la versión de prueba cada cierto tiempo saldrá una ventana agradeciendonos que usemos Balsamiq Mockups.

After some work our draft has a very acceptable look.

This image can be showed in full screen mode. There is an arrow that could be very useful in case we want to make a presentation to our work team.

You can save your drafts inPNG, PDF or XML format. In our case the final result has been saved to a PNG file.

There is plenty of documentation, and dicussion forum. Besides that Balsamiq Mockups has a quite good updating frequency. Developers from Balsamiq even give ‘good people’ a free license. If you want to look for conditions take a look in here.

To sum up I think that Balsamiq Mockups is a great tool to generate drafts of our application UI in a very quick and professional way. Other similar tools can be found in this post.