How to
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.
If you can’t find an answer to your question in our User Guide, please check our blog or the GetSatisfaction forums.
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.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.
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
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.
Another way to resize a control is with the Property Inspector, where you can enter the size you need and position it.
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
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.
Working with Text
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]
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]
Working with Data Grids / Tables
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:
irst, 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
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
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.
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
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
To see all features you need to Login In into Mockup Builder.
Dashboard
Go to our dashboard just by clicking on your name in right corner and the dashboard is displayed.
User Profile
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.
Mockup collaboration
Once you start to move controls they are synchronically moving on other users’ screens as well.
Mockup chat
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
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 selection | SHIFT+CLICK |
| Toggle selection | CTRL+CLICK |
| Select All | CTRL+A |
| Edit the selected control’s text | ENTER or F2 |
| Resize maintaining aspect ratio | Hold SHIFT |
| Disable snapping during move or resize | Hold CTRL |
| Nudge selection 2px | arrow keys |
| Nudge selection 20px | SHIFT+arrow keys |
| Nudge-Resize selection 2px | CTRL+ALT+arrow keys |
| Nudge-Resize selection 20px | CTRL+ALT+SHIFT+arrow keys |
| Clone selection | ALT+drag |
| Undo last command | CTRL+Z |
| Redo last command | CTRL+Y |
| Cut the selected controls | CTRL+X |
| Copy the selected controls | CTRL+C |
| Paste | CTRL+V |
| Paste In Place | CTRL+SHIFT+V |
| Delete the selected controls | DELETE or BACKSPACE |
| Duplicate the selected controls | CTRL+D |
| Group the selected controls | CTRL+G |
| Ungroup the selected groups | CTRL+SHIFT+G |
| Lock the selected controls | CTRL+2 |
| Unlock all locked controls | CTRL+3 |
| Align selected controls left | CTRL+ALT+1 |
| Align selected controls center | CTRL+ALT+SHIFT+2 |
| Align selected controls right | CTRL+ALT+3 |
| Align selected controls top | CTRL+ALT+4 |
| Align selected controls middle | CTRL+ALT+5 |
| Align selected controls bottom | CTRL+ALT+6 |
Editing Text
| Start Editing text of the selected control | ENTER or F2 |
| Committing the current text | ENTER (single-line controls), CTRL+ENTER (multi-line controls) or click anywhere |
| Ignoring the current edit | ESCAPE |
Working with Mockup Files
| New Blank Mockup | CTRL+N |
| New Clone of Current Mockup | CTRL+SHIFT+N |
| Open a mockup file | CTRL+O |
| Save the current mockup file | CTRL+S |
| Save as… | CTRL+SHIFT+S |
| Close current mockup | CTRL+W |
| Close all mockups | CTRL+SHIFT+W |
| Export this mockup’s XML | CTRL+E |
| Import mockup | CTRL+SHIFT+E |
| Print mockup | CTRL+P |