Get started

Balsamiq Mockups is a graphical user interface mockup software. It allows the designer to arrange pre-built widgets (GUI controls) using a drag-and-drop WYSIWYG editor.

You can also test it online for free.

Create a project

Before starting your design, delete all the mockups on the left sidebar (Right click on the mockup > Move to trash) if there are any (depending on the version of the Balsamiq software you are using).

Remove all the useless mockups in the left sidebar.

Create a container

In order to represent your UI in Balsamiq, Yotako requires you to create a container first (Navigation Bar > Containers). Currently, Yotako only supports the iPhone container.

iPhone supported

Add widgets

Widgets should be dropped into the container screen area of your containers. If you put widgets fullly or partially outside, they will not be treated as part of the page by Yotako.

You can find a list with all the supported widgets in the Widgets reference section below.

Widgets must be inside the container area

Multiple pages and navigation

If you want to create multiple pages for your application, you should first create a new mockup (on the left sidebar) and add a container to it. The first mockup's container will be considered as the first page of your application (e.g., homepage, index, etc.).

Note that you can name the pages as you want by renaming the mockups (that default to "New Mockup..").

If you want to add navigation between pages, first select a widget and set the link property on the right sidebar.

Naming pages: login, groceries and payments

Adding links between pages and external links

Save the BMPR design

At some point you need to get your BMPR file before importing it into Yotako. If you are using the Desktop version you can just simply save your project (Project > Save Project | Save Project As...).

If you are using the Demo version, you can use the option Project > Download Project BMPR... also available in the Project menu.

You are now ready to import your Balsamiq BMPR design into Yotako.

Widgets reference

This section references all the Balsamiq widgets currently supported by Yotako. You should use these to design your apps. Note that new widgets are being added on a daily basis. If you use widgets that are not supported, you can still use your BMPR design with Yotako but such widgets will be ignored.

Button

Balsamiq Button

Checkbox

Balsamiq checkbox

Checkbox Group

Balsamiq Checkbox Group

Image

Balsamiq image

iPhone

Balsamiq iPhone

Label

Balsamiq label

List

Balsamiq list

Menu

Balsamiq Menu

Progress Bar

Balsamiq Progress Bar

Radio Button

Balsamiq Radio Button

Radio Button Group

Balsamiq radio Button Group

Subtitle

Balsamiq Subtitle

Text

Balsamiq Text

Text Area

Balsamiq Text Area

Text Input

Balsamiq Text Input

Title

Balsamiq title