Help

If you don't know where you are going. How can you expect to get there? - Basil S. Walsh
Welcome to Mockup Help List

Thank you for using Mockup Builder. We’ve put as much helpful information as possible here, so you can get back to work on your mockup ASAP. All User Guide documentation for our Mockup Builder application is on this page. You may link via the FAQ, which will take you directly to your answer. You may also print our User Guide to work with Mockup Builder when you have offline access.

If you can’t find an answer to your question in our User Guide, please check our blog or the GetSatisfaction forums.

Help Welcome to Mockup
The Application Bar

Menu

All of the buttons in Mockup Builder’s Menu have a similar structure to a typical menu with standard commands such as Open, Close and Save Project. You can do a variety of things from the Menu, such as edit your Mockup (a short command is also available), export screenshots to PNG files and export/import projects.

Help Application Bar

Common commands

The Common Commands include the same commands as the Edit menu: Cut, Copy, Paste, Delete, Group, Ungroup, and Lock. For better usability, users may use keyboard shortcuts. You can find most shortcut commands in Help content.

Help Common commands
UI Library
Up
Help UI Library

The UI Library is a long strip of UI Controls just below the Main menu with a large range of different UI control types that Mockup supports.

Via the UI Library, customers can put any of the UI elements onto the mockup canvas, allowing them to use those elements to build a mockup.

For example, let's say you want to add a new UI control to the canvas. Simply select any of the controls and “drag and drop” it to the mockup canvas below; Mockup Builder will place it on the mockup canvas in any location you choose.

The Mockup Canvas
Up

The Mockup Canvas is a working area of Mockup Builders, where users make UI mockups more realistic. In Mockup Canvas you may add UI controls, move them and resize them as often as you want.

Take a look at the instructions below:

The best part is, you’re able to change the mockup canvas with your browser or application window for a smaller or bigger mockup, if needed.

Adding UI Controls
Up

You may use any element from the UI Library if you choose to add new UI controls to your mockup. There is also another way to do this – just duplicate the selected controls. This is easy to do: simply copy and paste elements, commands or buttons, or drag-and-drop the selection. You can save time by using the same elements.

Selecting and moving UI controls
Up

Mockup Builder has a couple of different ways to select UI controls. Even if you’re not good at using graphics, these shouldn't be a problem for you.

  • If you like any of the elements (controls), just “drag and drop” them;
  • You may use the lines on the canvas or the align tools. These controls move in one direction.
Resizing UI Controls
Up

Most elements and controls are resizable in terms of UI. Resizing is easy -- all you need to do is grab one of the eight little squares of the selected rectangle and drag it.

Another way to resize a control is with the Property Inspector, where you can enter the size you need and position it.

Resizing UI Controls
Layering UI Controls
Up

You can create different layers of UI controls on the mockup canvas. To do this, select the controls you want to layer, then select one of four layering commands available via the Property Inspector: bring to front, send to back, bring forward and send backward. Grouping UI Controls

Grouping UI Controls
Up

To group some of controls in order to align them better, or to move them all at once, you may use short commands or select from the following Commands:

  • •“CTRL+G” to group a set of controls;
  • “CTRL+SHIFT+G” to ungroup controls.
The Property Inspector
Up

The Property Inspector is a little floating menu that appears once you select one or more UI controls. Property Inspector contains a lot of standard functions such as: Copy/Paste and Auto-size controls, element size, position, colour control as well as some control-specific customizations.

Help Property Inspector 1 Help Property Inspector 2 Help Property Inspector 3
Working with Text
Up

Some UI controls, such as Button, Label and DataGrid, have text in them. This text may be edited if needed. To edit text, click on the control and start typing. Another way to edit text is to select the control by simply pressing ENTER. Edited text will be saved automatically the moment you click anywhere other than the text field you typed in or hit Enter. To discard the text changes you have just made, hit the Escape key.

Important: There are plenty of controls in Mockup Builder that are used as separators (comma, dot, slash, hash, etc.) or as a space character to separates tags. Different controls use different characters altogether. Please take a look at the default text examples for the Control:

For Bold use this *Example of text*
For Italic use this _Example of text_
For Link use this [Example of text]

Help Working with Text

Most of the text in the controls of Mockup is regulated by default, so users can make any changes with text they want. For example, you decide to write text in Bold. Select some text and press Bold on the Property Panel. The selected text will be changed to Bold.

Working with Data Grids / Tables
Up

Column Width Options

Users may specify individual width and alignment options for each data grid column via using the Property Panel.

Here are the details for creating column widths:

Working with the tables:

First, you have to decide how many columns your table will have. Let's imagine you have 3 vertical columns.

You may have a lot of horizontal lines. It does not matter how many lines you have. Surround the text in curly brackets { } on the last line of the text in your table.

If you want to make the first line bolder, just write in bold font.

The columns may be as small as possible. If you genter “0”, the size of your column will be narrowed to the minimum size of the text, so {1,2} means “make the second column twice as big as the first one in this two-column grid”;

Or {50, 25, 25} means “in this 3-column grid, make the 1st column 50%, the 2nd 25% and the 3rd 25% of the width of the whole table.”

You can combine numbers and zeros, as in the following example:

To align the column individually, add either L, C or R right after a number, e.g. {0R, 4L, 1}, which means “in this 3 column grid, the 1st column will be as small as possible and always align it to the right, the 2nd column is four times bigger than the 3rd one and always align it to the left, and use the DataGrid’s alignment (from the Property Inspector) to decide how to align the 3rd column”

If you want to create a checkbox, you must write [ ] brackets at the end of the line, or [x], [v], [o], [*], [X], [V], [O]. Each of these signs has specific reflections (checked, unchecked, etc.); you can also put radial buttons: () Option; (o) Option 2 (selected); -() Option 3 (disabled)-; -(o) Option 4

Help Working with Data Grids / Tables 1
Help Working with Data Grids / Tables 2
Working with Images
Up

Image editing is a very powerful feature, enabling a number of different use-cases. For example, you can improve an existing interface by importing screenshots of the current UI to the Mockup canvas. In this case, you can import images of custom icons or custom control types.

Great feature: some images are linked in and not embedded; you can use the image import feature to create component templates. This is somewhat of an advanced feature.

Working with Symbols
Up

Symbols allow you to reuse common elements across your mockup.

Symbols allow you to reuse common elements across your mockup. Enhancing Mockup is a capability that gives you a sense of customizing elements on the canvas. You may also use these features for creating master templates, building custom interface components, and other making reusable interface elements.

Import and Export
Up

Export via PNG file

Mockup Builder has exporting features which allow you to export your mockup as a PNG file, which is useful if you decide to make a copy of your mockup, email the mockup to somebody else, or export it to another format.

It is really easy to do. Just select “Export Mockup” from the Mockup menu dialogue. If have the PNG, you can use it to create a new mockup. Select the element in "Pictures," then import the file as a picture from your PC.

In case you have the PNG, you can use it to create a new mockup. What you need is just to select the element "Pictures" and then Import files as pictures from your PC.

Very important: The contents of your mockup canvas will be erased when you open a new mockup.

Export to PDF

Mockup Builder allows you to export open files to PDF, which is useful for sharing a single mockup for a project.

You may export the entire project by opening all of the files from the project. For this you must select the files you want to export and choose Menu > File > Export to PDF.

You can find more information in Working with Projects, which helps with organizing project files.

Linking Mockups Together
Up

You have the capability to link different mockups together in order to create a simple prototype for your site or software application.

At the moment, we are working on a version of Mockup Prototype where linking capabilities will be fully customizable.

An option to link two mockups together as a file name from a pull-down menu is also available. For the fastest working conditions, click on the control that supports linking; you will see a new “Link” pull-down in the floating screen manager.

If you can not find the pull-down menu, click on “Show Link”:

Click on the link to upload the referenced mockup file.

One more important thing: if you use the left and right arrow keys to go back and forth between the mockup, you have to visit run-through.

Presenting Your Work
Up

When you need to present your wireframes to others, you may use Mockup prototype Presentation Mode.

All you need to do is just click on the Presentation Mode button in the top-right corner of Mockup. Presentation will expand your whole screen in a new window, with your mockup centered on the screen.

At the top of the window in Edit Mode, there are buttons with which you may add your Comments, draw some marks with Pencil, draw Arrows, and delete elements of your mockup by using Eraser.

Sharing Mockup
Up
Help Share screen

You can make public and private share. If you make a public share your project is available to everybody and the person you share project with can only see you project and can’t leave any comments. If you make a private share your project is available only to the person you share the project with and he can leave you his comments and notifications. People you share project with can view it in presentation mode like shown on the screen.

User LogIn
Up

To see all features you need to Login In into Mockup Builder.

Help Share screen
Dashboard
Up

Go to our dashboard just by clicking on your name in right corner and the dashboard is displayed.

Dashboard screen

On the dashboard you can see the list of the projects which you have created or the one others shared with you (you can see name, creation day, properties of the project and you can load it), list of archived projects (you can see name, archivation date, you can unzip or delete project), the last news from the blog, you can create project and go back to editor. You can also see dashboard, profile, store and logout.

Dashboard project properties

You can start from project properties, choose a project and press properties. You will go to the next page.

Dashboard2 screen

Here You can see project name, date created, users in team, reviewers in team, number of screens. You also can archive project, delete project, create subversions. You can also see last changes and members.

Dashboard project settings

Then go to projects settings and here you can change projects title. You can also choose here to allow save as and save online for your team members or now as well as you can configure backup for your project. In the backup settings you can add FTP Backup settings like login, password, address and backup recurrence, so that later you can restore your project.

Dashboard3 screen

Dashboard project members

Next we go to members. Here you can see reviewers and users. You can change their roles, add new members or delete them.

Dashboard4 screen

Users can make changes in the project, share opinions and work online with other people involved in this project. Reviewers can leave their comments and discuss it with other team members of this project online.

By simply pressing the button you can change the role of collaborator, delete him or add new one.

When you add new collaborator you need to provide his email address and assign him his role

Dashboard5 screen

Dashboard project subversion

In Subversions you can see all subversion of the project which you can load to the editor, make as the head project which will replace the current one and remove it. You also can see here last changes.

Dashboard6 screen
User Profile
Up
Dashboard7 screen

Here you can change the name which is displayed in chat, color with which you messages will be marked. You can also change your password.

Store
Up
store screen

Here you can see available templates by categories, you can see web pages, mobile, tabs, all and etc. You can also group them by new, popular, mine and random. On the right side you can see the template which you choose. Once you do your choice you need to press import and the template will be imported to the editor. Once it is successfully imported you can go to editor and start work with it.

Mockup collaboration
Up

Once you start to move controls they are synchronically moving on other users’ screens as well.

store screen
Mockup chat
Up
store screen

On the right side you see toolbar and chat, where you can see messages of other collaborators. Every user has a different color.

Keyboard Shortcuts
Up

For better and faster work we have written all shortcuts in the following list. Also, there are some exceptions of UI controls which cannot work when you are editing the mockup in a browser.


Add to selectionSHIFT+CLICK
Toggle selectionCTRL+CLICK
Select AllCTRL+A
Edit the selected control’s textENTER or F2
Resize maintaining aspect ratioHold SHIFT
Disable snapping during move or resizeHold CTRL
Nudge selection 2pxarrow keys
Nudge selection 20pxSHIFT+arrow keys
Nudge-Resize selection 2pxCTRL+ALT+arrow keys
Nudge-Resize selection 20pxCTRL+ALT+SHIFT+arrow keys
Clone selectionALT+drag
Undo last commandCTRL+Z
Redo last commandCTRL+Y
Cut the selected controlsCTRL+X
Copy the selected controlsCTRL+C
PasteCTRL+V
Paste In PlaceCTRL+SHIFT+V
Delete the selected controlsDELETE or BACKSPACE
Duplicate the selected controlsCTRL+D
Group the selected controlsCTRL+G
Ungroup the selected groupsCTRL+SHIFT+G
Lock the selected controlsCTRL+2
Unlock all locked controlsCTRL+3
Align selected controls leftCTRL+ALT+1
Align selected controls centerCTRL+ALT+SHIFT+2
Align selected controls rightCTRL+ALT+3
Align selected controls topCTRL+ALT+4
Align selected controls middleCTRL+ALT+5
Align selected controls bottomCTRL+ALT+6
Editing Text
Start Editing text of the selected controlENTER or F2
Committing the current textENTER (single-line controls), CTRL+ENTER (multi-line controls) or click anywhere
Ignoring the current editESCAPE
Working with Mockup Files
New Blank MockupCTRL+N
New Clone of Current MockupCTRL+SHIFT+N
Open a mockup fileCTRL+O
Save the current mockup fileCTRL+S
Save as…CTRL+SHIFT+S
Close current mockupCTRL+W
Close all mockupsCTRL+SHIFT+W
Export this mockup’s XMLCTRL+E
Import mockupCTRL+SHIFT+E
Print mockupCTRL+P