Quick Application Mockups with Balsamiq

Balsalmiq MockupWhen the MatrixMaxx Software team is developing a new piece of functionality, before we do any programming, we often need a visual representation of how the functionality is going to work. Sometimes, fully-coded HTML and CSS prototypes are called for, but more often we just need a quick mockup of the fields and flow of the application. Mockups give us a better understanding of how the application will feel allowing us to make major changes before sinking time into programming.

Enter Balsamiq.

While Balsamiq may sound like something you should be putting on your salad, it is actually a tool that allows you to create quick, and easy Web site mockups. There are certainly more powerful mockup tools out there, but I think Balsamiq provides the best balance of features, speed of use and cost. Plus, its sketchy, hand-drawn look makes it easier for people to understand this is a work in progress.

Balsamiq toolbarBalsamiq gives you a toolbar of drag-able interface elements that you can add to a canvas representing your browser screen. It allow customizations of many of the elements and even lets you link certain elements to other mockups within the same project. The drag-able objects includes form elements like input fields, buttons, and checkboxes as well as general interface elements like accordions, data tables, and alert boxes.

Once you are done, you can export your mockup to PDF or PNG formats. Balsamiq is available as a single-user desktop application for $79 for a single user, or as an online Web app that also adds collaboration tools between users starting around $12 per month.

What fun tools have you found that help in the design/layout process?

Leave a Reply

Your email address will not be published.