Tic Tech Toe

Technology tips, tricks, and tools

Review of Balsamiq Mockups

Summary:

Balsamic Mockups, as the name implies, is very good at quickly creating mockups of screens.  It does not however let you actually run the mock app or generate scenario documentation.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly and be able to update them as comments are made, this is the program for you!

Pros:

  • Very fast creation of mockup screens.
  • Very easy to use.
  • Lightweight.
  • Nice handling of imported images.
  • Easy to share mockups (e.g. http://www.mockupstogo.net/).

Cons:

  • No way to interactively “run” the mockups.
  • No way to create an OpenOffice document or PDF from a scenario or set of screens (though you can save the screens as artwork files and import into a document).

Detailed review

The version (1.5.23) of Balsamic Mockups reviewed here runs as a Windows application within Adobe Air.  It also has versions for a browser and wiki among others.

Balsamic Mockups for Desktop installs very quickly.  When run, a window opens that allows you to create one or more mockups of screens:

mockups-editor1

Tabs for each mockup show at the bottom.  I have two as shown above, one browser and one client.  The mockups are stored as bmml files.  These are XML documents, such as this:

<mockup …>
<controls>
<control controlID=”0″ controlTypeID=…/>
</controls>
</mockup>

Other than for reuse within Mockups (or if you want to create an XML transformation to create a document – anyone have this?), you don’t need to worry about these files.

Creating a mockup

It takes very little time to create a mockup of your screens.  One way I judge tools is how much you get stuck and how much you can do with little or no help. Mockups passes this test easily.  Lets walk through some steps (writing this takes a lot longer than actually doing it).

  • Create a new Mockup – Mockup/New blank mockup
  • In the Quick Add field, type “win”. You will now see Browser Window and Dialog / Window.  Pick either one you’d like.
  • You now have a window.  Double click it to set its name.

Notice: when a component is selected, its associated attributes window shows as a gray-ish panel to the side.  When you roll over it, it darkens and you can edit the component’s properties.  Also notice that tool tips help you along the way – very nice!

mockups-properties

  • Select some properties to change on the window, such as adding a scrollbar and a minimize button.
  • Use your Quick Add to add a tabbed pane.  Double click it to change the tab names to ones of your choice.  Change the properties to select the second tab and place the tabs on the bottom.  Your mockup should look similar to this now:

tabbed-pane

  • Add a comment as described above.
  • Choose Mockup/Export snapshot to clipboard.
  • Paste into a document:

paste-into-doc

You get the idea.  It is very easy to create and share screen mockups.

Tip

You can find mockups that others have created to reuse them online.  Choose /Help/Download More Controls and choose which of the dozens of screens that others have built (and maybe contribute your own!).

download-mockups-to-reuse

February 9, 2009 Posted by | Uncategorized | , | 1 Comment