Scribd
Upload
256 views

Balsamiq Tutorial

The document provides instructions for creating mockups and prototypes of mobile apps using the Balsamiq web application. It outlines the steps to log in to Balsamiq using a USC email, create mockups by adding screens and dragging UI elements, upload images, link screens to create an interactive prototype, and launch the prototype. The overall process allows designing and testing the flow of a mobile app using Balsamiq's drag-and-drop interface.

Uploaded by

Icha Peace Ajah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
256 views

Balsamiq Tutorial

The document provides instructions for creating mockups and prototypes of mobile apps using the Balsamiq web application. It outlines the steps to log in to Balsamiq using a USC email, create mockups by adding screens and dragging UI elements, upload images, link screens to create an interactive prototype, and launch the prototype. The overall process allows designing and testing the flow of a mobile app using Balsamiq's drag-and-drop interface.

Uploaded by

Icha Peace Ajah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Balsamiq

Tutorial

Using a web browser, go to http://itp.mybalsamiq.com.

Log In:
In the Log in area, enter your USC email for the Username or email, and enter
your password. Click the Log in button.

Mockups:
Add a new mock-up for each screen of your app.
1. Click on the New Mockup button in the upper right corner.


2. Under the top main menu in the tab bar, click on the iPhone option.

Page 1 of 7

Balsamiq Tutorial
3. Click and drag the iPhone image to the main workspace area.


4. In the top main menu, select the View option and then the Skin option in
order to select the skin you would like to use sketch or wireframe.

Page 2 of 7

Balsamiq Tutorial
5. Using the tab bar to display different GUI components (or you can just select
the All option), drag the various components you want on your mockup.



6. When you are done, click the Save button in the upper left corner.

Page 3 of 7

Balsamiq Tutorial
7. Change the Name from New mockup to something that reflects the name of
this screen such as Main for the main screen.


8. Click the Save button.

Upload your own images:
1. On your main project page, click on the Assets option which is in the upper
right corner.

Page 4 of 7

Balsamiq Tutorial
2. Click on the Upload button.



3. Find and select your files.
4. Click on the Choose button.
Your uploaded images will now be available under the Project Assets option in
the tab bar used when editing an individual mockup.



Page 5 of 7

Balsamiq Tutorial
Create interactive screens:
1. Select one of the mock-up screens and click the Edit button.
2. Select the item such as the tab bar or a button that you want to link to
another mock-up screen.



3. A corresponding window with options for that item will be displayed. If you
only see a bar, then click on the little square icon in the upper left corner.
4. Use the Link pull-down to select the mock-up screen you want to link to.



You now have created interactive screens. Use this feature to determine the
flow of your app.

Page 6 of 7

Balsamiq Tutorial
Launch Prototype
Once you are done with your apps wireframes, you can test it by clicking on
the Launch Prototype arrow in the upper right hand corner below the New
Mockup button. Your prototype will be opened in a new tab window. By using
your mouse as a touch, you can see the flow of your app.

Page 7 of 7

You might also like