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.

Wireframes are drawings of website, used to illustrate: how a web application will function, what will be the content and how the visitor will navigate. They are not used to illustrate the look and feel (graphic design) of a site. When designing web applications first, comes the functionality and then the graphics. Main reason: graphics are dependent on the structure and functionality site, not the other way around. Graphics are only eye candy, so a nice looking site is useless when the visitor doesn’t know what to do. Also the graphic design can narrow down the possibilities in the usability design of the site and we don’t want to constraint that.

Why?

Think clothing, the activity you wish to do, decides what you will wear, not the other way around. If you want to work out, you wear clothing that is designed for it. You don’t wear a suit to play basketball or for your karate class (only if you are Chuck Norris). To avoid this: first think usability, then choose the eye candy that best fits.

There are many kind of software that can be used to create wireframes i.e Visio, Visual Studio, Adobe Illustrator, Dreamweaver. The challenge with using this tools, is that people tend to focus on colors, cleanness, effects, etc. and not the usability, functionalities and goals of the site. The best thing, don’t use any of these tools and just sketch the wireframe using paper and pencil.

Ask any developer that used visual studio (or similar programming) IDE to develop a prototype with the intention of showing functionality. Most will tell you that the customer, will focus on the look and think that it will be ready in a week. If you have ever shown a client a Visual Studio “prototype”, where your draw the software, using the visual controls, the developer will be stress by comments like “oh .. this button doesn’t do nothing”, while the he is thinking “of coarse man, this is just to see if I understood what you wanted”. It will be worst if there is some navigational functionality in the “software prototype”.

Another reason you shouldn’t use this tools, is that you may start to focus on how it looks, if colors match and they it looks nice. The irony is that you know is just a to show functionally! However sometimes is just irresistible.  So, if you use a paper and pencil there will be a good chance it will look like done by a first grader, and then is when you will get the real feedback.

So, as the image bellow says: “The better it looks, the more narrow the feedback”.

Image source: head rush and thanks to Jakob from www.jensplan.se for the tip on the image.

Next post, I will talk about a program (Balsamiq Mockups) that is used to make wireframe mockups that look like done with paper and pencil. The idea of using such tool is that you can iterate faster and save time, still it could have the same effect, as the tools mention above. And as a bonus, I will tell you how to save and convert the mockups into images, without buying the license.