Linking, Presenting, and Sharing

Wireframing with Balsamiq Exporting and Sharing
4 minutes
Share the link to this page
Copied
  Completed

Transcript

Now that we've created a few mock ups, let's learn what we can do with them. In this video, we'll talk about linking, presenting and sharing your mock ups. Let's start with linking. Here I've created a new mock up showing the My Account tab. Based on the template we created for the mind music tab. It contains some account settings and a button to sign out of the application, which should take us back to the login screen.

So now we have three screens that can be connected together. Clicking the login button will go to the mind music screen. then clicking the My Account tab will go to the My Account screen. And from the My Account screen, you can click back to the my music tab or click the logout button to return to the login screen. We'll start by selecting the first control that we want to link the login button on the login screen. Notice that there's a section of the property inspector called link.

If you click the Show links inspector text, you'll see a drop down if you hoping it you'll see a list of the other mock ups in the project, as well as a few other options. I'll select my music from the list to link this button to the my music mock up. You can now see that a small pink arrow appears on the login button. This tells you that this control is linked. If you hover over the control, it will tell you that it's linked to the my music mock up. Now let's link up the other screens.

So now that they're linked, what can we do with them? The first thing we can do is show our mock ups in full screen presentation mode. This is a mode that's built into the application for presenting your wireframes to clients or states. folders, you can launch it by pressing Command or Control and F or by clicking the icon in the upper right corner of the toolbar. When you enter presentation mode, you'll see that the editing and navigation panels disappear and the mock up is centered in the middle of the screen on a white background. You'll also see a large blue arrow that makes it easier to point things out on the screen.

And notice that when I move the cursor over the login button, the arrow changes to a hand and the text my music appears. This is how I know that this control has a link. If you open the settings panel, you can find some options such as whether to show the big arrow or highlight the controls that are linked. When you click on a link, it switches to the link to mock up. In this way you can interact with your mock ups as if they were real application. You can also navigate between your mock ups using the icons in the upper left of the toolbar.

Or you can hide the toolbar completely for more immersive experience. To exit full screen mode, click the Escape key or press the icon in the upper right. Now I want to show you another feature that's good for presentations. The sketch style look of the controls is meant to help you focus more on flow and functionalities and appearance. But if you want to make your mock ups look cleaner, you can switch to the wireframes. Again, if you click on the project information panel icon, you'll see some settings for the project as a whole at the bottom.

You can change the font and default text size for example, you'll also see the option to switch the skin. Let's click the wireframe skin button to switch to the wireframe skin. Notice that all the markups change to a different look and style. If you go to fullscreen presentation mode, you'll see whichever skin is used in the editor. If you aren't presenting to people right in front of you, you can also export to a PDF document that you can email or upload. If your mock ups contain links, those links will work in the PDF, just like in full screen mode.

Finally, in the export menu, you'll see options to export to images, and previous balsamic versions. You can find more information about these options in our documentation.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.