Table Of Contents

Previous topic

Introduction

Next topic

File Manipulation

This Page

Get Started

EasyMockup is an easy to use app, the ui is quite intuitive, you won’t lost. In order to speed you up, please read the following sections to get started. You can still refer to the detailed version from here

Run EasyMockup

Runing EasyMockup is right on the way.

  • On windows, click the icon on the desktop, or use the shortcut link in the Start menu (For Windows 8, you may need to switch the to desktop mode to find the link). If you are runing EasyMockup in trial mode, after started, an activation notify message will show up. While you are still in a valid trial period, just click Keep Trial, or you have to purchase a license for activating before you can use it.
  • On Mac OS, EasyMockup can be started from Applications -> EasyMockup. For trial, you can edit mockups without any function limitations, but you have to purchase a license and activate EasyMockup for saving your work.

Glance of The Workbench

The workbench is quite intuitive for usage. There are mainly five main components constructing the user interface.

Title Bar

For windows platform, the title bar contains the main menus(File, Edit, View, Help):

  • File - All the menu related to file maniuplation, New, Open, Save, Print, Recent Files, etc.
  • Edit - Basic menus for mockuping.
  • View - Controls how the ui are ogranized.
  • Help - Tips for usage, and information about the app.

For Mac OSX, easymockup uses the native title bar and main menus.

Tool Bar
ToolBar is actually the top button bar of the app. It contains some critical action buttons, for example, new/open/save/export file, undo/redo editing, copy/paste/delete editing.
Stencil Panel

Mockup symbols are organized in categories and shown on the stencil panel. The stencil panel can be collpased or expaned, and it is switched by clicking the arrow button on the top right corner. When collapsed, it becomes a rounded square shape with expanded button on it.

Stencil panel can be configured to float on the right/left side of the canvas. Click the Setting button on the very top right corner, a menu will pop up with two options, one for Anchor Scene Left, and the other is for Anchor Scene Right.

Different categories can be switched by selecting items int the top combobox. You can choose from Buttons, Widgets, Container, Content, Navigatiion, Text to filter the symbols. By default, ALL symbols are shown.

Property ToolBar
Properties of symbols can be customized using the property toolbar, which is floated right to the symbols selected. It keeps changing according to what symbols are being selected. For example, with a button symbol selected, then a link edit button is provided, while multiple symbols selected, group/ungroup buttons are provided.
Bottom Bar
Bottom bar is used to mainpulate the sheet tabs, canvas settings, for example, zoom in/out, background of the canvas, quick view, etc.

Start Mocking

You can start by trying some samples. For 1.0.0, there are three samples provided. Follow the menu path File -> Try Samples, a samples dialog shows up, choose one, double click the item or single click the OK button, a sample is loaded as a new file. You can start editing on that.

After familiar with the basic concept, you can start your new own mockups by creating new file, just follow the directions here

Demostration

When mockup is done, demostration can be triggered by click Play button on the toolbar. You can navigate between sheets, comments, or draw on the mockups.