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.
- Very fast creation of mockup screens.
- Supports scenarios.
- Publishes to HTML pages.
- Some irritating UI drawbacks, like no undo and no alignment of multiple components.
- A bit difficult to use.
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:
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:
You create a layout by selecting components from the list on the lefthand side.
One interesting feature of MockupScreens is that you can flag areas of the screen with comments (see “?”):
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.
Finally, you can create an HTML document for a scenario via the Scenario/Export scenario to HTML command: