How to

Welcome to Mockup Help List

The Application Bar

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

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

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

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

Layering UI Controls

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

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

Working with Text

Working with Data Grids / Tables

Working with Images

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

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

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

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

Sharing Mockup

User LogIn

Dashboard

User Profile

Mockup collaboration

Mockup chat

Keyboard Shortcuts

Editing Text

Working with Mockup Files