Tic Tech Toe

Technology tips, tricks, and tools

Review of WireframeSketcher

I’m a big Eclipse supporter.  It is the de facto leading Java development environment, though impartial statistics are difficult to find.  If you are an Eclipse fan and want a well-integrated plugin to create screen mockups, look no farther than WireframeSketcher.

WireframeSketcher has a Sketching perspective and adds over 30 UI “components” in its palette:

Eclipse sketching perspective

Eclipse sketching perspective

You basically have two primary parts: a Screen and a Storyboard.  A screen is as shown above.  A storyboard is a sequence of screens:

Storyboard sequence of screens

Storyboard sequence of screens

You can then run a Presentation of your sequence in full-screen mode:

Presentation

Presentation

You can also save a screen to the clipboard or as a .png file.

Pros

  • Great integration with Eclipse.
  • Lots of UI parts to work with.
  • Storyboard and image output.
  • Very fast to create a mockup.

Cons

  • Not much documentation (though Peter is working on more).

Net: If you need to create mockups and you use Eclipse, this is a no brainer – get WireframeSketcher!

May 19, 2009 Posted by | Uncategorized | 1 Comment

Review of MockupScreens v4

Summary:

Note: This is a review of the latest release – version 4.  It is greatly improved from my previous review of the 3.17 release.

MockupScreens, as the name implies, helps you quickly create mockups of screens.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML and PDF files to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some use case scenario screens quickly, this is a good choice.

Pros:

  • Very fast creation of mockup screens.
  • Lightweight.
  • Supports scenarios.
  • Publishes to HTML and PDF.
  • Can set up “jumps” between screens based on user slideshow actions.

Cons:

  • Cannot run the scenario (though you can do a slideshow).

Detailed review

The version (4-beta) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more screens within a scenario:

main-window3

You add screens within the open scenario (and change the ordering) using drag and drop (DnD).

Creating a mockup

To edit a screen, you select it in the Screens panel on the right.  This displays the screen in the main editor area in the middle.  You then select a Widget from the lefthand palette and then place it within your screen.

Advanced properties

You can turn a component into a hyperlink to another screen during a slideshow by selecting the screen on the Jump to screen property on the Advanced tab for the component (at the bottom when the component is selected).

advanced1

You can also enter commentary for a component.  This causes a yellow “note” to be attached to the component.  These notes are optionally included in HTML and PDF output as well as slideshows.  You can change the settings via Tools/Options…

options1

Output

Finally, you can create an HTML or PDF document for a scenario via the Tools/Export to commands:

pdf-output

February 12, 2009 Posted by | Uncategorized | 1 Comment

Review of MockupScreens

Summary:

MockupScreens, as the name implies, is intended to help you quickly create mockups of screens.  It is a bit clumsy to work with, e.g. the UI navigation is not standard nor intuitive.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML pages to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly, this is a choice, but there are others that are arguably better.

Pros:

  • Very fast creation of mockup screens.
  • Lightweight.
  • Supports scenarios.
  • Publishes to HTML pages.

Cons:

  • Some irritating UI drawbacks, like no undo and no alignment of multiple components.
  • A bit difficult to use.

Detailed review

The version (3.1.7) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more scenarios within a project:

project-editor

You add scenarios and screens within scenarios (and change the ordering) with the menus and menubar buttons.

Creating a mockup

To edit a screen, you double click on it.  This opens the screen editor:

screen-editor

You create a layout by selecting components from the list on the lefthand side.

Marks

One interesting feature of MockupScreens is that you can flag areas of the screen with comments (see “?”):

screen-editor-with-marks

You can also put numbers within the screen, with associated events to navigate to another screen during a slideshow of the scenario (via the “Jump to screen” attribute of the mark). This is done much more elegantly in other tools such as Denim.

Output

Finally, you can create an HTML document for a scenario via the Scenario/Export scenario to HTML command:

html-output

February 10, 2009 Posted by | Uncategorized | 3 Comments

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.

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