Project Page in myBalsamiq

An individual project page holds all the Mockups for a project.

Projects are like folders to keep all of your wireframes together based on whatever organization makes sense to you. For example, you could create a single project for a web site design you’re working on, or you could create multiple projects for the web site design to keep parts of your design separate. How you organize is up to you.

You also can watch the Working with Projects section of our intro video on YouTube for a quick intro to Projects in myBalsamiq.


Anatomy of a Project Page #

The image screenshot below shows all the parts and functions on a typical project page. Take a look to get an idea about what you can do on the project page.

View full size image in a new window →


Changing Project Information #

Once you’ve created a project, it’s easy to change the project name and description from the project page.

Project Title

When you hover over a title and description from the project page you’ll notice that the text is highlighted in yellow. Any time you see this hover effect, it’s a cue that the field is editable. To edit the name or description, click the text.

Project Description

Sometimes the description for a project is shortened, and shows a More… link. You have to expand the description first, and then you’ll see the highlight effect. Click again to edit.

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.

Viewing Project 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 project history of updates.

We’ll keep track of every single change that was made, so you’ll always have a complete historical view of how your arrived at the solutions you’ve arrived at.

The project history shows these kinds of activity:

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

The project history provides a list of every change made to the project: mockups added, edited, and deleted, people added to the project, comments added, and alternate mockups promoted.

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


Adding Mockups #

To add a new mockup from any page in a project, click the New Mockup button in the upper right.

You can also upload an existing mockup from your computer by clicking the drop-down arrow next to the New Mockup button and selecting "Upload a new mockup..."


Manipulating Mockups #

Mockup Action Menus #

To the right of every Mockup title is a little down arrow. That’s the drop down menu that lets you perform actions on each Mockup.

Depending on the permissions you have, the menu provides access to features including commenting, renaming, cloning, downloading, and deleting.

Re-ordering Mockups #

Mockups can be arranged arbitrarily in whatever order makes sense for your project.

Arranging mockups in order is simple. Hover over a mockup and you’ll see a gray grip bar above the thumbnail.

Click and hold on the bar and drag to another place on the grid to change it’s position in the order.

Now when you use pagination and story mode, the mockup will appear in the order you’ve created on your project page.


Adding and Managing Project Assets #

An assets manager is provided store re-usable images, Mockups, or other files you want to share in your project.

To access the Assets Manager, click the Assets link the upper right of the screen.

To upload assets, click the Upload button in the dialog.

You can upload up to 5 files at a time, each having a maximum file size of 1MB. Your computer’s upload dialog will let you select multiple files if all of your assets are in a single folder.

For more information, view the Assets documentation.


Adding Project Team Members #

Project members have to be added to projects to be able to work on mockups and add comments.

To add people to projects, click the “Project Members” menu in the upper right of the screen.

The Project Members drop down menu will appear. You can see other members that currently have access to the project.

Click the “Add and Manage Members” link and a pop-up will appear to add or remove staff members or submit email addresses of additional people you want to invite.

Clicking the “Save Changes and Send Invites” button will send an email invitation.

People that were invited appear at the bottom of the pop-up the next time it's opened if they haven’t accepted yet. You can click the blue arrow icon to re-send the invitation, or click the red X icon to un-invite them.

Notes:

  1. You can set a staff member to automatically be added to new projects via the Staff page.
  2. You can promote non-staff members that you've invited to projects to staff by simply using the invite form on your Staff page. You get to the Staff page by clicking the Staff link in the header

Setting Access Control #

By default, all sites are set to private and only invited staff and project members will have any access.

Access control settings allow staff members belonging to a project to set viewing, commenting, and editing options for your projects. Only staff members may change access settings.

1. Private (default)
Only invited staff or project members may access the project. All project members have access to view mockups, add new mockups, add comment.

2. Website
Anyone may view project content (mockups and comments).

3. Blog
Anyone may view project content and add comments.

4. Wiki (use with caution)
Anyone may view project content, add comments, and add mockups.

Please refer to the myBalsamiq Access Control Matrix for details on "who can see and do what" based on their role.


Mockup Views #

You can view your project using one of 4 main views: Grid, Story, List, and Prototype.

You can switch between views using the view icons. Lastly, you can use the Prototype View if you've linked your Mockups together, to display a click-through prototype.

1. Grid
This is the default view. It provides an overview of your project, showing a grid of your mockups as thumbnails and titles.

2. Story
The story view is a nice linear presentation of your project. All of the project’s mockups are presented with title, full mockup image, and description on a single page.

When you arrange your mockups in order, this is a useful format for users who want to get an overview of the entire project, and can be useful for presentation and printing.

3. List
The list view displays your product's mockups with smaller thumbnails. This view can be useful for managing large projects.

4. Prototype
The Prototype view allows you to show your Mockup without all of the surrounding interface of myBalsamiq. If you've linked your Mockups together, this can be useful as a click-through prototype, or even for doing usability testing.

Prototype mode follows permissions settings, but allows you to share a private URL using a private key. This is useful for testing with remote usability testing services or for giving to people who aren't project members. If you set a project to Private, anonymous users will not have access to the project's prototype views or to browse its content, and subsequently will get an unauthorized error. However, using the shareable link with the private key in the address makes the URL shareable using an address that is not guessable.


Managing Projects #

From the Edit menu on the project page you can perform the following actions:

Edit Mockups
The main Edit button opens the Mockups editor so you can begin editing your Mockups.

Download Project
Saves a compressed .zip file to your computer with all folder containing the project's Mockups files and assets so you can edit the project in Mockups for Desktop or move projects from one myBalsamiq site to another.

Export to PDF
Exports a PDF of the project. You can use the exported PDF as you would a project made in Mockups for Desktop, for sharing the file with others or using as a click-through prototype.

To export a project, select Export PDF... from the Edit Menu, and then select your export options in the dialog that appears. Click the Export PDF button to save the file to your computer.

Clone Project
Creates a copy of the project and all of its mockups to a new project. The screenshot below shows the Edit Project menu expanded, with steps for cloning a project. You will be notified when the cloning process is complete.

Archive Project
Moves the project to the archives, where it will be inactive and 1 project will be removed from your site’s project credits. You will not be able to view the project while it is archived. Only the site owner and the project owner are able to archive the project.

Delete Project
Deletes the project and all of its contents permanently. Contents cannot be recovered.


Uploading and Downloading Projects #

You can download a project to your desktop so that you have a local archive, or so you can work on your project files from Mockups for Desktop or move projects from one myBalsamiq site to another.

Upload

From a site home page, you can upload a .zip compressed file of a project folder, if you've organized the folder following our best practices. The project folder you'll compress should contain all your project BMML files, and any assets (images and symbols) used by the project should be in an assets/ subdirectory.

To upload, simply click the Upload New Project link in the upper right of the site's home page.

When prompted by the dialog, browse for your .zip file on your computer and click Upload. Your project .zip will be uploaded in the background and will show up on the home page when the upload is complete.

Download

Download from Home Page

When you download a project, you'll be saving a compressed file in .zip format. Expanding the zip file will create a directory on your computer that has all of your Mockups BMML files, and assets files used by your project.

WARNING: as of right now, only project assets will be included in your zip. If you used some site assets, you should download them and install them locally separately.

On your site's home page you can download individual projects from the action menu. Click the drop down menu in the bottom right under the project title and select Download. You will be prompted to save the .zip compressed file to your computer.

Download from Project Pages

From a project's main page (grid, story, or list view) you can select the drop down menu next to the Edit button and select Download Project. You will be prompted to save the .zip compressed file to your computer.

Last Updated: May 23, 2014 08:52AM PDT