Balsamiq Mockups: Rapid Sketching of Wireframes

Balsamiq Mockups is a program  that helps you create wireframes and/or software mockups. When you draw the mockups they look like hand made and sketchy. This way, stakeholders involved in the process of developing the application, can focus on functionality and the problem the app will solve, not in the colors and icons used. The tool is not only good for sketching wireframes of web apps, but all you can do the same for desktop apps.

Mockup of get satisfaction modal dialog (source)

The real power of this tools is that it lets you iterate quickly, try different ideas and “materialized them on paper”. As a result, you can communicate [the ideas] faster than using Visio, Photoshop or even paper and pencil.

Now, software development is a team sport and that is why Balsamiq created plug-ins for the enterprise wikis and project management tools: JIRA, Confluence and xWiki [this is open source]. They also have a community page (Mockup To Go), where people submit mockups of controls, mobile devices or popular web pages. Mockup To Go permits the users (and fans) of Balsamiq mockups to improve the wheel and not reinvent it, in other words use the community mockups to build new concepts.

What else do you need? You have a great tool, wiki support for working in teams and a community. However one thing, is that you understand the power of using mockups in the development process, the other is that your team and boss understand it. Even if they see how it can be useful, it is still a challenge to make it part of the process of developing software. We have a resistance to change, even the most open minded people will resist some kind of change. That is why you need to take baby steps and the first step is to use it yourself. So, in case you don’t want to pay 79 USD, but still take that step then here is how to save and share your work without paying.

Saving and Sharing Mockup Images with Balsamiq Mockups Trial Edition

When using the trail edition, you will receive a notification every 5 minutes that this is a trail. After some time you don’t think much about it and dismiss it, in mater of one second, with a click. However the big restrictions are saving and exporting the mockups as images.

(These workarounds are not a big secret, however they are not publish on the site and I think they do more good than harm)

To be able to save your work, first click on Mockup option in the menu bar, then click on Export Mockup (see images bellow), or Ctrl E.

(Mockup Menu showing the Export Mockup option)

(Message informing you what I will telling you in the next paragraphs)

This will copy the XML representation of the mockup to the clipboard. Then go to your favorite text editor (or notepad), paste the text there and save the text file (preferably with extension .xml). Now your work is saved.

If you wish to load the saved Mockcup, then open the text file, copy all the text to the clipboard (Ctrl A and then Ctrl C).

(Mockup Menu showing the Import Mockup option)

(Dialog window where you paste the xml code that you save previously on the text file)

Then go to the Mockup menu in Balsamiq Mockups and press Import Mockup and the paste (Ctrl V) the text in the window. Finally click on Import button and there you have it, your saved mockup loaded.

Now, lets do the the second part: exporting mockups as images. You have to options, depending which works better for you. One is to print the mockup as a PDF and then you can copy the image to any document (or just distribute the PDF). I use free PrimoPDF for this. When you are read, select Print in the Mockup menu,then select your pdf printer (in my case was primopdf) and save it to disk. The other option is to use the web trial version of Balsamiq Mockups. Click on the Try it now link on the webpage (see image bellow).

Then you can import the mockup as you did in the desktop version. Once you have the mockup loaded, then you can click on Download snapshot PNG (see image bellow). That will prompt the save window of your browser, that way you will have it in your disk and can distribute as you like.

Now that I think about it, there is another way of saving the mockups as images. Enable full screen view (button in the upper right corner), press print screen and then paste it in your favorite image editor.

(Full Screen Button)

Final Thoughts

You may think is to much of a hassle to do all this, however it is the price of using the trial version (remember there is no such thing as a free lunch). But this is not a problem, because we are taking baby steps here. The workarounds permits us to really appreciate the tool and find out if it worth buying it or not. The ultimate goal is that mockups, functional specifications, wikis, etc. become part of your process. It happened to me, I used the free version for a while and then figure out I will save more time if I just buy the license.

The interesting thing is that the people at Balsamiq, don’t just know how to build and design a great tool, start a community, but are great with business. They figure out, why not give people a way to use the tool for free, showing confidence that some can really appreciate it and buy it.