myBalsamiq Single Mockup Page

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.

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

1. Toggle Link Hints This option allows you to turn on and off link hints. Link hints will be shown with a pink overlay so they can be seen easily.

2. 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.

3. 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.

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

5. Mockup Notes Below the Mockup links, you will find the Mockup notes. If there are no notes, the text reads “Click to edit mockup notes” if you have permission to do so. Clicking the text displays an input to add your notes, which are 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 pound 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. The Mockup Sidebar Icon Next to the Previous/Next arrows, you’ll see a little square icon. This turns on the Mockup Sidebar.

3. Using the Mockup Sidebar The Mockup Sidebar is 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. The version number shows what Mockup a comment refers to.

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 pound 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, scroll down to the comment section below the Single Mockup View, and select the “Propose Alternate Version…” button. The Mockups editor will open and allow you to modify the current Mockup for your team to review.

Once you’re done working on the alternate version in the editor (where you can add mockup notes as comments), click on “Submit Alternate Mockup and Comments”.

After reviewing the alternate version proposal, users can:

  • Promote the proposal as the current Mockup by clicking “Promote to Main Mockup” if they’re happy with the changes.
  • Make further changes before promoting it by clicking “Merge into Main Mockup…”.
  • Download the Mockup BMML

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.

Edit this page