On Proper Role of Mockup Tools and My New Tool Crush

In the spirit of LEAN and attempting to trim waste from existing processes, I’ve been pondering the optimal amount of effort to spend doing mockups lately.

By mockups, I just mean a quick and dirty approximation of what the GUI will look like once development is complete. Mockups are usually considered disposable artifacts that are done to validate requirements and draw out those inevitable changes earlier rather than later in order to minimize the impact to the project timeline and budget.

The amount of time and effort developers devote to doing mockups can vary greatly.

Some developers prefer quick and dirty drawings that can be done on the spur of the moment using napkins and whiteboards. Others use expensive graphic design tools or even code with simple events that use hard coded data to simulate dynamic functionality.

The trick is to waste the least amount of time working on non-production code while still giving customers an inexpensive way to play around with design, usability, and workflow.

Sometimes that is not so easy to do.

Generally, I favor the more Agile approach to developer artifacts and opt for the more lighter weight approaches whenever possible. If you use short iteration cycles (2-3 weeks) that end in user acceptance testing, communicate frequently with user, and use Test Driven Development, then making rapid changes to code shouldn’t be nearly as expensive to do as it used to be in the old Waterfall days. Under these circumstances, it just doesn’t make as much sense to spend much time on mockups.

I only have 2 problems:

  1. I’m no longer really working in an agile environment.
  2. I really suck at drawing on napkins and whiteboards.

Fortunately, my team just started using Balsamiq, an amazing light-weight, yet still professional looking, mockup tool built on Adobe Air.

It’s has a slick, web 2.0 style interface and within minutes I was able to build mockups that looked like these without even having to sludge through a tutorial first.

Sample mockup of Desktop App.

balsamiq_website

Sample mockup of website taken

balsamiq_deskop

See more samples here.

I especially like how the mockups purposefully look like sketches, which helps avoid the old ‘this-looks-so-real-that-you-must-almost-be-done’ syndrome that sometimes bites developers in the butt when they do too good of job on mockups.

This tool works especially well if you have Confluence or JIRA because it integrates seemlessly via a plugin.

Unfortunately, this is not an open source tool, but in my opinion the cost was well worth it. It was under $500 for a site Confluence license for our whole team, but it looks like you can also get a stand-alone desktop version for $80 a piece.

I highly recommend taking a few minutes to play with the online demo here.

5 Comments

  1. brad September 18, 2008 12:34 am 

    i am not sure i can take an app that uses Comic Sans seriously ;)

  2. Russell Ball September 18, 2008 7:14 am 

    @Brad – What?!? You don’t use Comic Sans in all your apps? Loser…

    Actually there is an option under the View menu to use System Fonts instead. I’m guessing that they used Comic Sans by default to make it look more like a drawing and thus psychologically making it easier for people to change.

  3. brinda July 21, 2011 11:27 pm 

    MockupTiger is enterprise class prototyping/wireframe and mockup tool. It is absolutely free to use

Leave a Reply