Tic Tech Toe

Technology tips, tricks, and tools

Storyboards, mockups, prototypes – oh my!

I have been on a mission of late.  I have used Denim for a few years, but have always longed for a better way of storyboarding UIs for requirements, mockups, and such. This post will start toward sharing my findings so far.

First of all, why did I name this post as I did?  Well, it turns out that this genre of tooling seems to fall into multiple variants, depending on the tool’s focus.  I will review tools in all these categories and you can decide the best fit for your situation (and pocketbook).

So, to begin – here’s the list I have looked at in no particular order.  Additions are welcome.

I will create separate posts for each and reference them from here.

Advertisements

February 9, 2009 Posted by | Uncategorized | 1 Comment

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