Mockups For The Masses

Posted: August 19, 2008 in Flex, Misc

HELLO WORLD,

Managing a software project can often times bring about confusion as customers attempt to communicate with the software development team about their requirements, especially when it comes to the user interface design. While the software development community may share a general understanding of the various components used in software design (dropdown list box, tab panel, etc.), most users do not. One of the phases used in some software development lifecycles include the creation of application mockups. A mockup is a draft design of a web site or application. By creating a mockup before beginning any software development the customer can correctly determine whether the development effort is on the right path and if the user interface requirements have been correctly communicated.

So, enter Balsamiq Mockups. Balsamiq Studios has created a mockup tool that allows you to create mockups in minutes and without writing a single line of code. The application is so easy to use that you can create the mockup while discussing the software requirements with the customer.

They have released several versions of this tool including;

For Desktop
This version works as an offline desktop application and is fully cross-platform compatible (Mac, Windows, and Linux)

For Confluence
This version works as a plug-in for this popular enterprise collaboration tool.

For JIRA
This version works as a plug-in for this bug and issue tracking system.

For Twiki
This version works as a plug-in for this open source enterprise collaboration platform and knowledge management system. This version has not been released yet but is expected to be ready soon.

There are many reasons I really like this tool. The application interface uses a drawing pad metaphore as the drawing canvas. All of the interface components look hand drawn and can be easily dragged, dropped, and manipulated on the canvas. After creating the mockup it can then be saved in its native format (a standard XML file) or exported as a PNG image. The fact that the mockup is saved into an XML format means that it can be easily shared among many people and even included in your favorite source control system. I am currently working on way to convert the mockup xml into an actual Flex application. Lastly, multiple mockup documents can be opened at the same time in the same way multiple Excel worksheet can be opened and accessed via a tab bar at the bottom of the screen.

For many years I have been using MS VISIO to create application mockups. However I found the software to be a little “overkill” for the task at hand. I also found the it difficult to share the document due to price and its obvious learning curve. The Balsamiq Mockup for Desktop is only $79 (Confluence and JIRA prices are somewhat higher). It has a very low (maybe non-existent) learning curve.

I now regard this application as a valuable addition to my arsenal of software development tools. I believe that you should too.

Ciao

Advertisements
Comments
  1. Ben Nadel says:

    That looks like a nifty little app.

  2. I have to admit, I was a little skeptical at first…after all, I have Fireworks, so why bother?

    But after playing with it for a few minutes, I can see how handy this is. I like that it forces me to take a drawing approach whereas when using tool like Fireworks, I have to fight to resist the temptation to start designing the site/application. Here, I’m just drawing and it actually feels like fun after a while 🙂

    Thanks for letting us know about this!

  3. Adam says:

    Just downloaded this and gave it a try on some iPhone mockups I was trying to explain via email.

    20 mins later, I’ve installed, learnt and designed the GUI. Purchasing a 5-pack license for our company today. Invaluable.

  4. Aditya says:

    Has anyone tried the Pencil Project for Firefox?
    Here is the link: http://www.evolus.vn/Pencil/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s