Single Mockup Page in myBalsamiq

The image below is a marked up screenshot showing all the parts and functions on a single Mockup page.

View full size image in a new window →

You can also watch the Mockup section of our intro video on YouTube for a quick intro to Mockups in myBalsamiq.


Creating Mockups #

To Create a mockup, select the New Mockup button in the upper right of a project or mockup page.

The New Mockup button also provides a drop down menu to create a new mockup by uploading it from your computer.

If you use the New Mockup button dropdown menu while on a single mockup page, the drop down menu also provides an option for cloning the mockup, which will create a copy of the mockup that you can modify.


Mockup Description, Permalink, Download #

Below a Mockup, you’ll see 4 bits of information:

1. Image Permalink
The image permalink below the Mockup provides a link to the Mockup image so you can embed the URL in an external web page or in emails to share the image. Note that projects must be public for the image permalink to work externally for anonymous users.

2. Download Image
The download image link opens the image (PNG format) in a new window. You can right-click the link and select Save to save to your computer.

3. Download BMML
The download BMML link provides a link to download the BMML file for the Mockup.

4. Description
Below the Mockup links is the Mockup description. If there is no description, the text reads, “Click to edit description” if you have permission to do so. Clicking the text displays an input to change the description, and the description is displayed on the single Mockup view and in the project’s story view.

You can use the same text formatting options we provide in Mockups!

  • for italic, use _this notation_
  • for a link, use [this notation]
  • for bold, use *this notation*
  • for disabled, use -this notation-
  • for underlined, use &this notation&
  • for color, use {color:#FF0000}this notation{color}. The #FF0000 is the color in HEX form, just like HTML. The macro will work with or without the # sign.

When you’re browsing through project, you can navigate easily between the Mockups two ways: Prev/Next arrows and Mockup Sidebar.

1. Using the Previous/Next arrows
If you’re viewing a single Mockup, in the top right of the screen below the project menus, you’ll see a left and right arrow. They let you navigate to the next or previous mockup in the project.

Hover over one of the arrows to see the name of the next or previous Mockup, and click to go to it.

2. Using the Mockup Sidebar
Next to the Previous/Next arrows, you’ll see a little square icon. This turns on the Mockup Sidebar, a little vertical strip that slides in and out of the right side of the page to show you a list of Mockups in the project, and a thumbnail previous for each one.

The current Mockup is shown selected in blue.

Each Mockup has a down icon to the right that opens the action menu for the Mockup. From the action menu you can view the available actions you have permission to invoke, e.g. edit, add comment, view history, rename, clone, and delete.


Adding Comments #

You can add comments to Mockups, just as you would to a blog entry. This is especially important in myBalsamiq, because we use comments when reviewing different versions of Mockups.

Scroll to the bottom of a Mockup page, enter your comment in the comment form and click the “Add Comment” button.

You can use the same text formatting options we provide in Mockups!

  • for italic, use _this notation_
  • for a link, use [this notation]
  • for bold, use *this notation*
  • for disabled, use -this notation-
  • for underlined, use &this notation&
  • for color, use {color:#FF0000}this notation{color}. The #FF0000 is the color in HEX form, just like HTML. The macro will work with or without the # sign.

Your comment will be added, and will show other project members what version of the Mockup you commented on. Users can click the version number reference to see what Mockup the comment refers to—the Mockup image will be displayed in a lightbox.


Proposing Alternate Versions #

Working on wireframes is an iterative process, so one of the most important aspects of the review process is proposing alternate versions.

We’ve made iterations a big part of the review and commenting process by allowing you to modify the current Mockup, and propose your alternate version in the comment stream.

To propose an alternate version, select the “Propose Alternate Version…” button below the comment form. The Mockups editor will open and allow you to modify the current Mockup for your team to review.

The alternate version Mockup appears in the comment form after your done working in the editor, as in the image below. Be sure to save a comment with this proposed version.

After review, users can promote the proposal as the current Mockup by clicking “Promote to Main Mockup” link if they’re happy with the changes.

Alternatively, users can also click the “Merge into Main Mockup…” link below the proposal to make further changes before promoting it.


Viewing Mockup History #

You may have noticed below the big project name that there’s a single line of text showing you the last update to the project, and who made it. The “View History…” text at the end of this line is a link to view the entire history of updates to the project.

We’ll keep track of every single change that was made, so you’ll always have a complete historical view of your design decisions. Over time you’ll see how comments and alternate versions of Mockups have contribute to the unfolding story of your design.

The project history shows these kinds of activity:

  • Mockup Updated
  • Mockup Deleted
  • Mockup Restored
  • New Comment Added to Mockup

You can learn more about the history feature, and view example history screens in the history section of the docs.


Restoring Versions #

We keep versions of each mockup that’s committed to your project.

If you’re looking at the mockup history, each earlier version will have a button to restore it as the latest Mockup. Click Restore and it’ll replace your current version.


Restoring Deleted Mockups #

You can restore deleted mockups by going to the history and clicking the "Restore this version" button. You can also download the file without restoring it by clicking the "Download BMML" link. Deleted mockups may take a few minutes to appear in the history.

You will then see a message indicating that your mockup was restored.


Cloning Mockups #

The “New Mockup” button on a Mockup page has a drop-down menu with options to copy it to a new mockup using the Clone menu.

Select the New Mockup drop down and choose “Clone this Mockup” and we’ll copy it’s content to a new mockup and ask you to give it a title.


Mockups Editor #

The Mockups Editor is the application used for creating wireframes. Documentation for most aspects of the editor can be found in the myBalsamiq Mockups Editor Documentation.

Last Updated: Mar 17, 2014 03:11PM PDT