Online Help Document

Introduction to the layout [feedback]

This section will provide a brief overview of the layout of the Lumzy mockup tool, showing you where general functions are located. If you're anxious to create a mockup, feel free to give it a try, or jump ahead to Create your first Mockup - it's very easy and you can always come back here to learn more later.

We'll briefly cover each major section of the Lumzy application screen, but will save more detailed explanations of each of the options for later sections. For right now, we just want you to understand where things are located, in general.

The interface can be split up into four major components:

Lumzy Main Menu bar	This is the main menu bar that sits at the very top of the Lumzy application's screen, and contains functions for global actions related to your mockup projects and application settings.
Actions toolbar	Contains all the actions that relate to working within the pages of your mockup projects, and related to working with the various controls you place on your mockup pages.
Controls panel (also referred to as the "Controls library")	This is the library of all the base or foundation controls that you'll use in building your mockups. We're use the term "foundation" controls here to differentiate from other controls that have been pre-built to save you time - these pre-built controls are called "templates" or "template controls" (more on these later).
Project panel	This panel makes up the majority of the screen real estate and is where your project pages can be created and edited, and where you'll spend the majority of your time.

Project Panel components [feedback]

Digging in just a little deeper within the Project panel itself, there are just a few actions that live on the header of this particular panel, the most interesting is the SIMULATE function.

SIMULATE	Clicking the SIMULATE icon will instantly switch your view of your pages from 'design view' and put you into 'simulation mode' where your mockups will function and simulate the actual screens and interactions. (see the Events and Actions section for more information on creating powerful simulations)
Change Skin	This simply changes the color scheme to a darker skin so that only the mockup pages themselves stand out.
Expand	This removes all the menus and panels so that you have a larger page area to work with. This can be useful once you've placed all your controls onto your page. To return the page to the normal view, click on the "Shrink" button in the upper right of this displayed view.

Your mockup pages themselves show up within the Project panel using a tabbed interface, so can easily and quickly switch between your mockup pages.
layout3

At the very bottom of the Project panel is the Project toolbar which contains functions that relate to the particular page that you're currently viewing. Settings such as page size, background color, adding a new page, and editing the page name are all examples of the types of functions that live on this toolbar

Controls library panel [feedback]

The last panel we'll explore in this brief introduction is the Controls panel (also referred to as the "Controls library"). This panel is where all the foundation controls live, and from where you'll drag controls to drop onto your mockup pages. This panel uses an accordion interface to organize the various controls into categories. The topmost category (titled 'Common') is a where the most commonly used objects have been organized for quicker access. The controls in this 'Common' category still also live within their appropriate categories based on their functions, this is merely a convenient shortcut to get access to those more common controls.

Another way to quickly locate a control is via the Quick Search. This is a dynamic search, so as soon as you begin typing in your search criteria, the list of matching controls will instantly begin filtering out all controls that do not match. From the example screen shots below, you can see that entering in "tex" quickly limited down the list of controls to just the text related controls. I'd recommend using the quick search whenever you know what you want, as opposed to just browsing through the library to see what is available - it's a very fast method.

Create your first Mockup - in 3 minutes or less [feedback]

This section assumes you've already registered and created a login, so if you haven't you'll want to and want to do that now.

Here are the steps we're going to cover and what we're going to create. It's pretty simple, so feel free to use the image (below the steps) to go ahead and try to create a mockup on your own, and then refer back here if you get stuck:

Login
Create a new project, giving it a name as well as a name for the first page of our mockup
Create the mockup by dragging controls onto the page. Our mockup with be a very simple mail list sign-up page (see picture below)
Save our work
View the simulation

Let's get started...

signup

Step 1 - Login

Log in using the email address and password you used to register with. Also, notice the checkbox at the bottom of the loging dialog for clearing your login from the computer - you'll want to make sure this is checked if the computer you're using is a shared machine. Enter your login information, then click Login.

login

Step 2 - Create a New Project

After logging in you'll be presented with the Create a New Project... dialog. Enter in a name for your project, or you can leave it as "New Project", and then also enter in a name for your first page. Leave the default of "Blank Page" selected on the radio buttons, and click the Create Project button.

post login

Step 3 - Create the mockup

In this tutorial we're going to build a simple email sign-up page that will look like the screen below. Nothing fancy, but this will take you through the steps. Note the various controls that we'll be using to build this mockup - this will help you in locating these controls in the Controls panel or "library". You'll see the terms "controls" and "objects" used interchangeably to refer to things you place on your mockup page, so don't assume there's any actual difference between the two terms.

email signup

Start by locating the container control that we'll use as parent to place all the other control objects inside. This is not something required, and we could simply drag the other controls onto our blank page, but using a container will provide a nice frame around our small set of controls for this demonstration. All controls that can "contain" other controls in this manner are grouped under the category labeled "Containers & Layout" in the Controls panel. So click on the "Containers & Layout" category and find the control labeled as a "Dialog Window". Additionally, you could have simple entered in some text in the quick search box and after typing in just "dial" the library display would've narrowed the controls to select from to just the Dialog Window control.

Grab the Dialog Window control by clicking on it with your mouse and continue holding down the mouse button to drag the control onto your currently blank page in the Project panel area. When you've placed the Dialog Window control into the boundaries of your page, let go of the mouse button to drop the object onto the page. When you do this, you'll see a floating Properties dialog pop up. The title of this dialog shows that it is for the currently active object by displaying the name of the active object in the header of the dialog. We're not going to do anything to change the font or label alignment properties, so we'll ignore this Properties dialog for now. We do, however, want to change the label of our Dialog Window to say something like "Mail List Signup".

container on page

To edit the label of our control, or any control that has a label, you simply double-click near the label text. This tells the object you want to edit the text, and you'll find yourself in the text edit mode, where you simply enter in the new text. When you're done entering in the new label, hit the Enter or Return key.
edit container label

The other visual point to note is the frame (the slight outline) and the frame handles (the heavy dots spaced around the frame), that showed up after we placed this control onto our page. These follow the standard user interface for changing the dimensions of the control. The frame and the frame handles indicate this control is the current object that has focus. This means that any Properties dialog that is sitting open on your screen will be showing information applicable to this current object.

Now that we have our parent container ready, let's drag in the rest of the controls we want for our simple mail list sign-up example. On your own, locate and drag in the following controls and perform the indicated tasks:

Drag in a Text Label control and change the label to "Salutation:"
Drag in a Combobox control and place it to the right of the "Salutation" text label. Edit the values of this combobox control to include: "Mr.", "Miss", "Mrs.", "Ms.", and "Dr.". Press the Enter or Return key after each value, these should all appears as a vertical listing of values.
Try using the Search box in the Controls panel, and type in "tex" to filter down the controls.
Drag in the Text Label controls for the Lastname and the Email Address and give them the appropriate labels.
Drag in the Text Field controls for lastname and email address and place these to the right of each of the appropriate labels.
Now clear the Search box by clicking on the arrows button just to the right of the Search box.
Last control we need is a Button, so locate a Button and drag it to your page, and change its label to read "Submit"

If you want to align your controls, use the standard method of holding down the mouse key and then drag the mouse to select all the items you want to align. To align all the labels, use this method to select all the labels together, then click on one of the alignment functions in the Actions toolbar - in this case let's select the align-left button. Repeat these steps for the salutation combobox and the two text field controls. You're done! Click the SIMULATE button if you want to see your page in action. Save your work.

Lumzy Main Menu bar [feedback]

This is the main menu bar that sits at the very top of the Lumzy application's screen, and contains functions for global actions related to your mockup projects and application settings.

New	Use this to start or create a new project. This will display the Create a New Project dialog, from which you can enter in a new project title and a name for the first page in your project, and then click the Create Project button to get a new design screen. NOTE: the Create a New Project dialog also allows you the option to instead open an existing project.

Open	This function takes you directly to the Open Project dialog, which lists all your current projects you have in the system, as well as some data regarding when each project was created and last updated. Click on the project you want to open, then click on the Open button in the lower right of this dialog. This is also where you can "clone" a project to make a backup or to make a copy and use it as a starting point for another project.

Save Keyboard shortcut: Ctrl + S	Saves the current project that your are working on. NOTE: By default the system is setup to perform a periodic automatic save as a safeguard against losing any data, but you should always make sure to save your work after any important changes. You can also turn off this auto-save capability (via the checkbox on the Project Properties dialog - see next item below) in case you just want to play with some changes but don't want to overwrite your existing project file.

Properties	These properties refer to your Project Properties. You can use the Properties function to change the name/title of your project, or to re-arrange the ordering of the pages. Alternatively, you can also rearrange the page ordering by simply dragging the page tabs around from directly within your project in the design mode.

Versions	You can create "versions" of your project in order to save copies of your project at a certain point, and then you can revert back to that version if needed. Creating a version is useful if you're about to make significant changes to a project and you may want to be able to essentially undo all your changes. see more info

Export	If you need to produce static images of your mockup, the Export function will provide you the option of exporting as JPG files, or as a PDF. For the JPG format, you can choose just a single page, or all the pages. For a PDF format, this is only offered for all the pages.

Templates	This feature is not yet available - but here's a preview of the functionality soon to be released: Templates provide you access to time-saving pre-built mockup objects for common interfaces. Instead of building these commonly needed interfaces yourself, you can simply select from the Templates and instantly insert them into your project. You can also contribute to this library to help others and to grow the community of objects to enable you and others to build more robust mockups even quicker than before. Use the Search to filter down the display of templates based on keywords associated with the objects. Click on a template to view a larger display of the template object. Click on the "Add Template to Project" button to insert the template. The new template will appear as a new page in your project (or as new pages if the template happens to be multiple pages and not just a single object).

Share	The most powerful aspect of a mockup is being able to click and use the mockup as you would the actual final product, but you need to be able to share this with customers or colleagues. The Share function is where you can do just that. The simplest way to share access to the simulation is to click on the "Activate" button, and then send the exposed URL to whoever you want to view the simulation of the mocku. see the Share section for more information.

Logs & Chat	For those projects where collaboration is needed, Lumzy provides a built in chat feature. see the Collaboration section for more information

Feedback	This pops up a feedback form for you to provide us with some feedback, identify a bug, request a feature, whatever you'd like to hit us with. Make sure you first specify the type of message, as this will format the message and provide you with some specific items we may need (such as specifics when reporting a bug).

Help Keyboard shortcut: F1	Gets you to this documentation

My Account	This shows up when you are logged in and provides access to information where you can change your password, for example.

Logout	Use this to logout of the system. This button will change to display "Login" if no one is currently logged in on the machine.

Actions Toolbar [feedback]

The Actions toolbar contains all the actions that relate to working within the pages of your mockup project, and related to working with the various controls you place on your mockup pages. In the discussion covering the Lumzy main menu bar, we talk about functions related to more global settings and about functions that relate to your projects, whereas with the Actions toolbar we're now dealing at the page level within a project. Each of the functions is described in detail in the section below

Undo and Redo Keyboard shortcuts: Ctrl + Z : Undo Last Action Ctrl + Y : Redo Previous	You can undo or redo the latest changes. You can also use the standard keyboard shortcuts for these (Ctrl+Z or Command+Z for Undo, and Ctrl+Y or Command+Y for Redo). The Undo and Redo functions only support the changes made since you last saved your project, so be aware, especially if the auto save capability is turned on.

Duplicate	This handy feature is a one button click alternative to performing a Copy and then a Paste within the same page. Click to select the object(s) you want to duplicate, then click the Duplicate button to instantly get copies of the the object(s).

Cut, Copy, Paste Keyboard shortcuts: Ctrl + X : Cut Ctrl + C : Copy Ctrl + V : Paste	These are your standard Cut, Copy, and Paste functions. Cut will remove the selected object(s) from the page and place a copy of the object(s) on the system clipboard. Copy places a copy of the selected object(s) on the system clipboard. Paste places the contents of the system clipboard onto the active page. The standard keyboard shortcuts also apply to these functions (Ctrl+X for Cut, Ctrl+C for Copy, and Ctrl+V for Paste - use Command instead of Ctrl for Mac users).

Lock Keyboard shortcut: Ctrl + L	Use this to lock an object in place and prevent it from accidentally being moved. The small lock icon will show up on any locked objects. To unlock an object, simply click on the lock icon located on the object itself. You can lock multiple objects at once by selecting all the objects and then clicking on the lock button, but you cannot unlock a group, as the lock prevents selecting multiple locked objects.

Delete Keyboard shortcut: Delete key	This will delete the currently selected object(s).

Move forward one layer Move backward one layer Move to the front Move to the back	These are your standard layering functions that allow you to arrange objects or controls on your page either towards the background of your page, or towards the foreground. Looking at the icons we've chosen for these functions, just remember that the shaded object represents your object, so when it appears in front of a single page, then this indicates this function moves your object a single layer forward. Similarly, if the shaded object appears in front of multiple pages, then this indicates this function moves your object to the very front. The reverse then applies for the shaded object appearing behind a single page and then behind multiple pages.

Align left, Align right Align top, Align bottom Align middle Align center Keyboard shortcuts: L : Align Items to Left R : Align Items to Right T : Align Items to Top M : Align Items to Middle C : Align Items to Center	These are your alignment functions that can help you to quickly line up your controls and images to they look nice and clean. Select the group of objects you want to line up, then click the appropriate alignment button. The left, right, top, and bottom buttons should be clear, they simply align the selected objects all the same selected edge. The middle and center options are a little different, in that they align the select objects based on the calculated middle (looking vertically) or the center (looking horizontally). For example, if you had a column of buttons of various lengths, and instead of having them all lining up on either the leftmost or rightmost edge of all the members of the group, you wanted them all to be centered - you'd click the Align center button. Similarly, let's say you have a row of icons that are of various sizes and instead of having them all lining up on either the topmost or bottommost edger of all the members of the group, you wanted them to all be centered - you'd click the Align middle button.

Show Control Properties	This is your safety net in case you move the Properties dialog popup window too far off the page to where you can no longer grab it to pull it back. This can happen when you're working quickly and slide the Properties dialog out of your way - sometimes pushing it completely off the visible page. If this happens, just click this new Show Control Properties button and the Properties dialog popup will be pushed back into the visible pare area.

KeyBoard Shortcuts summary:

Ctrl + Z : Undo Last Action
Ctrl + Y : Redo Previous
Ctrl + A : Select All Objects
Ctrl + S : Save Current Project
Ctrl + P : Print Project
F1 : Help
Ctrl + X : Cut
Ctrl + C : Copy
Ctrl + V : Paste
Ctrl + L : Lock Object
L : Align Items to Left
R : Align Items to Right
T : Align Items to Top
M : Align Items to Middle
C : Align Items to Center
Delete : Delete Selected Item

Working with Text and Labels [feedback]

To change the label of any control, you simply double-click near the current label to get into edit mode. You can do this for any of the controls for either the labels or for those where you specify the content (such as for a ComboBox or a Menu List). Editing any of these is a double-click. For specifics on any particular control we have a separate detailed section - simply search the page to locate the control, or go to the Working with Controls ssection.
edit text

There are a couple controls that operate slightly different - these are any of the "Rich Text" controls (Rich Format Text and the Bullet List). For these two controls, the editing of the text takes places directly on their associated Properties dialogs.

rich text format

Changing an Object's Size [feedback]

Lumzy uses the standard interface for indicating a control object has the current focus by displaying an outline frame around the object, along with the frame handles (the darker dots) around the selected object.

frame

The frame handles are how you change the dimensions of the control. Grab one of the corner frame handles and drag horizontally and vertically out away from the control in order to make it larger and taller, or drag the handle in closer to the middle of the control to make the control smaller. Similarly, if you just want to grow the control in width, just grab one of the side frame handles and drag the handle out (for larger) or in (for smaller). Likewise, if the width is good and you just want to make the control taller, grab one of the frame handles that is located in the middle of the top or bottom frame edge and drag it away from the object (for larger), or towards the middle of the object (to make it smaller).

Master Pages [feedback]

Defining a page as a "master" means you can create a single page and have this page's layout and controls be applied to all the other pages that you want to use this master. The master page functions are all active on the pages using the master page. If, for example, there is a menu item on the master, that menu item is active and available on all the pages that reference that master page. In addition, the master page cannot be modified from within any of the pages using the master - any modifications to the master page can only be made on the master page itself, and any changes to the master are automatically reflected in the other pages (this follows the same standard as many well-known presentation applications).

You can define multiple master pages. If your project has several different sections where a single master doesn't do the trick, then create more master pages - there's no restrictions here. Create a bunch of masters, and on the individual pages you can simply specify which master you want that particular page to use.

Note: master pages do not themselves display during simulation, only the non-master pages display. So if you have a two page mockup, with one page as a master, and the other page using that master, when you run the simulation, your simulation will only show one page. This is because the master page is itself not a mockup page that a user would interact with - it is strictly a source page used by other pages.

To define a page as a master, go to that page in your project, then click on the Edit Page Properties button located on the Page Properties toolbar at the bottom of your screen (the icon with the pencil). This will pop up the Page Properties dialog.

Within the Page Properties dialog, simply check the "This is a Master Page" box, then click Submit to save your setting. This page is now a master page that can be used by any other page in your current project.

To then use this as a master for a particular page, go to that particular page, and then back down at the bottom of your screen to the Page Properties toolbar, the Page Master dropdown should now list the page you just defined as a master. You can see the page I named as "my master page", which I previously defined as a master page is now listed in the dropdown. Simply select "my master page" from the dropdown to use this as the master for the current page. If you decide you don't want to use this as the master, change the dropdown to either select "No Master" or select any other master page that you've defined.

select master

Simulation - Events and Actions [feedback]

The power of a mockup (also referred to as a prototype) is in the simulation - that's why we say "don't just illustrate.....simulate!". You really can't get the feel from a static wireframe, and while many tools that provide simulation also require a lot more work to get there, Lumzy is extremely simple. In fact you can even put together a mockup using only the steps you'd use in putting together a static wireframe, and you'll still end up with something that will provide a significant level of simulation - it's that easy!!

In this section we're going to cover using Events and Actions to take advantage of the power of simulation. Events define the trigger, whereas Actions define the result or the "action" to perform when the event is triggered. Not all controls support events, and the events may differ among the controls as appropriate. For example a Button control supports an action of "when clicked", whereas a Checkbox supports an action of "when selected" and "when unselected" - makes sense.

A couple important points to note:

Even if a control doesn't support the Events and Actions through its associated Properties dialog, that doesn't necessarily mean it is just a static object. For example, take a look at the Menu Bar control. You'll see the Events tab isn't available in its properties dialog, however it still provides the ability to go to a page or an external URL.
ANY control or object on the page can be given access to the Events and Actions through the use of the Hot Spot control. A Hot Spot is simply a transparent control you can size and place anywhere on your pages and then using the "when clicked" event that's available with the Hot Spot, you can select any of the available Actions to be performed. This is a very powerful feature!

Events

Below is a table of the controls that support events and actions through their respective properties dialogs, along with identification of the specific events that each control supports.

Control	Events	Additional
Accordion	when selected child changed	Specify different actions based on which item is selected
Button	when clicked
CheckBox	when selected, when deselected
Combo Box	when item changed	Specify different actions based on which item is selected
Datagrid	when item clicked	Specify different actions based on which item is selected
Hot Spot	when clicked
List	when item clicked	Specify different actions based on which item is selected
Multiline Button	when clicked
Radio Button	when checked, when unchecked
Tab Navigator	when selected tab changed	Specify different actions based on which tab is selected

Specifying an event trigger is a simple mouse click. The screen shot below is the properties dialog for a Button control. The specify an event, for this button, simply select the "When clicked" value from the Event dropdown. You've now specified that when the button is clicked, you want an action to be performed, so next you need to define what that action is. To do this, simply click on the Add Action button; select the action you want performed; then click the Save button. See the next section below for a details on the various actions.

event

Events tab in the Properties dialog Actions tab in the Properties dialog

Actions [feedback]

While the Events may differ slightly among the various controls, the available Actions are consistent across these controls. Some controls have more granular definitions, such as a List control, which allows different actions depending on which value is selected by the user, but actions themselves are consistent. Here's a listing and description of each of the available Actions that can be assigned in the design of your mockups and then experienced during simulation mode:

Go to Another Page	This action simply takes the user to another page within the current mockup project.
Show a Message Alert	This action will popup an alert box, with the title, message text, and alert box type that you specify. The alert box types basically display different icons as appropriate. The icons for the other alert types are: Okay \| Cancel \| Help \| File Warning \| Next \| Previous
Show a Page as a Popup	This particular action let's you specify any of your mockup pages to show up and act as a popup. To define a page as a popup, we recommend you define the page size of the popup page to be smaller than the page in which you will be having the popup appear. Other than that, go crazy and create a complex dialog that you can use as a popup an any page. NOTE: make sure to check out the "Remove current Popup Window" - you'll likely want to include a button on your popup page and assign this as the action to have the popup close, otherwise it will remain on the page.
Open a URL	By specifying this option, when the user clicks the control, a new browser tab or page will open up to the specified URL. The user can either switch back to the original tab or window to continue with the mockup simulation, or closing the tab or window will do the same.
Remove current Popup Window	This action is basically to go hand in hand with the "Show a Page as a Popup" action. When you specify a page to show up as a popup on another page, the popup will sit there until it's told to do otherwise. Use this "remove" action on your popup page, by assigning it to a button, or some other appropriate control that makes sense, so that the popup disappears and reflects the desired user experience.

Working with Controls [feedback]

In this section we will cover the details for some of the controls that offer additional functionality or that differ slightly from the general population of controls. If you've skipped to this section and are looking for how to define Events or Actions, or how to work with labels, please see the linked sections for information on those subjects. If you feel we are missing some information or explanation, please let us know so we can continue to beef up our documentation and videos to help support the Lumzy product.

The majority of the controls operate in a similar manner to one another, so once you understand one control, especially within a category, you'll readily understand the others. We've broken out the information on Controls into two sections: Containers and Non-containers. The first section is a table where we'll cover a majority of the non-container controls, though not all of them. Instead of covering every single control (which would be a massive list - most of it repetitive) we've chosen to discuss those controls that may be a little tricky or offer something unique as compared to the bulk of controls. So dive in - remember to use your browser's built in search capability to search through this document to find the information you're looking for.

Non-container Controls

Hot Spot

The Hot Spot control, is a special control in that it can be used to enable ANY control or object on the screen (or really any location - doesn't have to have an underlying object) a clickable spot that can perform actions. Just drag the Hot Spot control onto your mockup page and position and size it where you want the user to be able to click in order to perform some action. You can enter enter in a label for the Hot Spot, or you can delete out the default label text so the control appears as just a transparent element on the screen. Follow the instructions for enabling events and actions, and now you've made this location on your screen an actionable clickable object - very powerful!!

Add Icon/Image

The Button control supports the use of an icon - this is accessed via the Button's properties dialog, but you can also add an icon or image anywhere in your mockup pages through the use of the Icon/Picture control. Drag this control on to your mockup page, then select the icon or image from the stock images, or from your own uploaded set of images. See the Icons and Images section for more details, and for information on how to upload your own images.

Button

The Button control is a straight forward control, but I'm including it here because I do want to point out the ability to use icons with your button labels, or in place of your labels altogether (such as you'd use in a menu bar for an application or a keyboard for a wireless device). Take a look at the properties dialog for the button, and check out the icon button at the bottom, along with the convenient sizing slider to help make sizing the icon simpler.

Dropdown or Combobox

Specifying values in your dropdown is to simply edit the labels. Double-click to get into edit mode for this control, and then enter in the different values you want to appear when the user selects this object during simulation mode. Each value needs to appear on a new line.

combo box edit

Note the properties dialog for this control also allows you to specify which of the values you want the control to display when simulation is started.

Menu bar and Link bar

These two controls are somewhat unique in that, while they don't offer the ability to define Events or Actions from within their properties dialog, they can still by themselves perform the simple action of taking the user to another page within your mockup, or to an external URL location. In addition, you can define the text that will show up as the tool tip text when the user hovers the mouse over the link in the Menu Bar or Link Bar.

Let's take the following Menu Bar as an example. This screen shot shows the menu as it appears in the simulation, and the user's mouse is hovering over the Home link (our screen shot just doesn't show the mouse pointer)

To specify the information in your Menu Bar or Link Bar, you simply edit the labels. Double-click to get into edit mode for this control, and then enter in the label you want to display, followed by a comma, then location you want the user to be taken to, followed by a comma, and then the tooltip text. Let's take a look at the text used to specify our example Menu Bar:

menu bar labels

Now let's break down the details for a specific line from our definition:

menu bar explained

Only caution here is that to reference a mockup page within your project, you need to make sure you enter in the page's name exactly as it's listed in your mockup.

TIP: instead of using the Breadcrumb control, use a Link Bar menu and use the ">" character as the separator - now you have a breadcrumb that you can actually use to take the user to the appropriate pages.

The Menu control is really a static visual control - meaning it does not support any events or actions itself, so it would be one of those controls that is a good candidate for use with some Hot Spot controls. This control does, however, provide a lot of visual elements that are interesting, and all the visual cues (like the keyboard shortcuts, the selected radio button, and checkmark next to a selection) are all based on specific values you enter in the labels for this control. So let's take the stock Menu control shown to the left and open it up in edit mode to see what this looks like.

menu details

As you compare between the image and the text, you'll see you can specify various menu options:

keyboard shortcut or submenu indicator - basically anything you want to show lined up to the far right of the menu	enter in a comma after the menu item and then enter in the text you want to show up as the shortcut or submenu indicator. New Page, Ctrl+N Recent Files, > Exit, Ctrl+Q
preselected radio button	use a lowercase "o" in front of the menu item oOption One
toggled settings that use a checkmark	use a lowercase "x" in front of the menu item xWordwrap
horizontal line divider	use the "=" sign where you want a horizontal divider line

Tree Pane

The Tree Pane control is very similar to the Menu control, in that is a static visual control - meaning it does not support any events or actions itself, so it would be one of those controls that is a good candidate for use with some Hot Spot controls. This control does, however, provide a lot of visual elements that are interesting, and all the visual cues (like the hierarchy, open folder vs. closed folders, and file icons) are all based on specific values you enter in the labels for this control. So let's take a look at a custom Tree Pane control shown to the left and open it up in edit mode to see what this looks like.

tree details

As you compare between the image and the text, you'll see you can specify various visual elements as follows:

Closed folder	use a lowercase "c" at the beginning of the line to display a closed folder c Home Stuff c Holidays
Open folder	use a lowercase "o" at the beginning of the line to display an open folder oMy Documents o Images o Financials
File	use a lowercase "f" in at the beginning of the line to display a file f house budget
hierarchy	after the icon display indicator (i.e. the "o", ""c", or "f"), enter a space for each hierarchical level. The hierarchical levels are absolute levels and not relative to the prior elements. c Home Stuff (one space after the "c" indents this folder one level) o Financials (one space after the "o" indents this folder one level) f house budget (two spaces after the "f" indents this folder two levels so that it appears to be one level below, and contained within, the Financials folder above it)

Datagrid Table

The Datagrid Table control is a set of columns and rows of data that you specify. You have complete control over the column headings, and the content that is displayed. The column widths can be defined, and will automatically adjust relative to each other as you change the shape of the control as you build your mockup.

To define the headings row, enter in the column labels separated by the "|" separator character. This will define all the columns to be of equal width. The specify a width, enter in a comma after the column heading and then enter in the pixel value. For example (using the default control, which comes prepopulated with sample data), the header row is specified as follows:

Name|Sex,70|Age,60|Country,120|Paid,50

Since the "Name" column doesn't specify a size, it will use up all remaining space (assuming the control is stretched larger than is required by all the other column widths), or this column will be squeezed down first before the other columns (assuming the control's width is shrunk down).

To define the data for the rest of the Datagrid Table, just enter in data for each column, separated by the "|" separator character. Here's the data that appears in the default control:

John Paul|Male|23|USA|Y
    Chin Juan|Female|28|China|N
     Klin Edwards|Male|34|USA|N
        Sandra Wilcox|Female|31|UK|N

This control does support Events and Actions, and is one of the controls that has additional granularity related to the Events/Actions so you can specify different Actions based on which row is selected by the user.

Modal Screen

The Modal Screen is simply a semi-transparent rectangle shape you can use to simulate a modal screen - that's it. Just place this control on a page and layer it in front of the controls on your page to have it look like a modal view of the page.

Column Chart

Bar Chart

Line Chart

The charts are all pretty straight forward. All but the pie chart simply uses a label followed by a comma and the value for the chart. The pie chart only uses the values to produce the image (i.e. no labels).
Sample for the Column, Line, and Bar chart controls bar chart data

Sample for the Pie chart control pie chart data

The charts work well for up to six different entries, displaying each entry in a bright color (after six entries the colors go dark). Again, note how the column chart supports column labels (as do the Bar and Line charts) whereas the Pie chart is simply the different slices.

bar chart

Draw Circle, Triangle, Rectangle, Line

There are four "Draw" controls that you can use to draw simple shapes (triangle, circle, rectangle), or to free hand. These all support specifying the color and weight (thickness) of the lines. The Triangle, Circle, and Rectangle also support a fill color selection, as well as the ability to set the alpha value to produce transparent or semi-transparent objects. The Rectangle supports one more function - a "corner radius" value that lets you round the corners of the rectangle. A corner radius of "0" will provide sharp corners, while a corner radius of "100" will virtually turn the rectangle into a circle. Below is a display of a rectangle control with various corner radius settings.

Container Controls [feedback]

What is a container?

Containers are covered separately from all the other controls because they have a unique function - basically they can "contain" other controls,. The controls that live inside another container are referred to as "children" of the container. Some of these container controls support Events and Actions, but for the most part, these are used for grouping child objects together and keeping them together as the container control gets moved around the mockup page during the design process. Placing controls and objects within a container can be a visual design preference, as well as a functional necessity in certain cases.

Example 1: Needed for a simulated action to perform as expected:
A good example is where you wanted two different groups of radio buttons to act independently. The expected behavior with radio buttons is that within a group of radio buttons, only one button can be selected. In Lumzy, when you place some radio button controls on a page, these will all be considered as part of the same group. In order to get your mockup to recognize different sets of radio buttons during the simulation mode, the radio buttons need to be grouped within a container control. Having the buttons in a container control is not itself a requirement for a single group to simulate as you'd expect, this is only needed when there is more than one group and is needed to segregate the two groups.

Example 2: Needed or desired for keeping a group of controls together:
If you absolutely want to make sure that a group of objects are always moved around as a group during your design process, then the use of a container control is very useful. Lumzy supports the standard of selecting a group of objects and then moving them around together, but this is not a permanent grouping.

Using a Container

To use a container, drag the container control onto your mockup page, then using the frame handles, size your container to the appropriate size. To place objects inside the container, just drag them from the Controls panel and drop them within the boundaries of the container.

NOTE: an object that already exists on your page cannot be directly dragged into a container object to become a child of the container. A child object can only be dragged in from the Controls panel. If you have have objects already on your page and you want them to instead be in a container, you will have to use the copy & paste method. Copy the object(s) to the clipboard; then click somewhere inside the container; and then click the paste button.

That's it, so go fill up some containers!

There is one container control that we'll look at specifically - the Accordion. The Accordion doesn't look like the rest of the container types of controls, though it actually operates very much like the containers. To define the labels for the Accordion's panels, you double-click the control to get into edit mode, just like everywhere else. Enter the labels for each of the panels, with each panel's label on a different line. When you're done, hit the Enter or Return key and then get ready to start dragging in whatever children controls you want. In the example below, I've created an Accordion with the panels of "My Buttons", "My Pics", and "My Other".
my accordian details

This produces an Accordion that looks like this when it is empty.

may accordian

I then opened up the "My Buttons" panel of the Accordion and dragged in a bunch of Button controls that I modified. You can see below the buttons I have in the "My Buttons" section of my Accordion are slightly larger than the current visible space, so the Accordion automatically adds scrollbars to the control. I can continue adding buttons, or move on to the next section of my accordion and drag in other objects that I want. That's the Accordion

my accoridan

If there are specifics that you don't understand regarding any of the other container controls (or any controls for that matter), please don't hesitate to ask us, or to make suggestions on how we can improve our documentation.

Icons and Images [feedback]

There are a number of places where you can use icons and image within your mockup. For example, with the Button control, you can specify an icon and using the handy sizing slider on the Button's properties dialog, easily size the icon appropriate to the button. For any of the controls, or even simply adding an icon or image to a page, via the "Icon/Picture" control itself, you'll use the Image dialog (labeled "Pick an image..."), which will display the moment you select to work with an icon.

There are lots images available in this continually expanding library, and grouped into several different categories. The default category that is displayed is the "Hand-Drawn Icon Stock", which are simple black & white sketch styles images. There are also many colored icons available in the "Color Icon Stock" category (the above screenshot displays a couple rows of them). If none of these fit your needs, then you have the option to add your own images, which will be stored under the "My Pictures and Sample Images" category.

Adding Your Own Images

To add your own images for use in your mockups, you use the Image dialog, which you can get to by either adding a Icon/Picture control to your mockup, or by clicking to use an icon within one of the controls that supports icons (such as the Button control) . From within the Image dialog, click the "Add New Image" button at the bottom (see prior screen shot), and you'll be presented with a new dialog titled "Edit your image here...". From within this new dialog you can select an image from your desktop, and then you can modify the image as to the brightness, the contrast, the saturation, the hue, and the rotation.

NOTE: there is a size limitation of images that can be uploaded of 600 pixels wide by 360 pixels tall, so make sure your image fits within these dimensions.

add image

Once you're satisfied with the look of your image, click the "I'm Finished" button to save this image to your own personal images library. If during the editing of the image properties, you want to return the image to its original look and feel, click the "Reset Image" button to start your editing all over. To use this image, locate your newly added image in the "My Pictures and Sample Images" category and click on the image.

Projects [feedback]

A mockup "project" is a complete mockup, which could be a single page or, as is more common, multiple pages. You create a new project, then you add and design your individual pages. Projects can be "cloned" in order to either save a backup copy or to use one project as a start for another different project. You can also save "versions" of a particular project so that you can revert back to an earlier copy of your project. Both "cloning" and "versions" are covered in more detail below.

New Project Dialog

To create a new project, click the "New" button on the main menu bar. From the "Create a New Project" dialog, you can conveniently enter in a title for your new project, along with a name for the first page, or you can accept the default values - either way, when you're ready, click on the "Create Project" button. I You'll then be ready to begin designing the first page of your new mockup project.

NOTE: If you had clicked on the New button in the main menu bar, but you really meant to open an existing project, you can still do that from the "Create a New Project" dialog, just click on the "Open an Existing Project" button instead of clicking the "Create Project".

Existing Projects

After using the Lumzy mockup tool for a while, you may find that you have lots of different projects. You can have active projects, closed projects, and projects that are shared, and the "Open Project" dialog is your dashboard view as to which projects are in what state, plus it's also the place where you can do some house cleaning of your projects. To get to the "Open Project" dialog, click on the "Open" button in the main menu bar. We'll introduce each of the tabs and functions available in the next few sections.

My Projects

The first tab titled "My Projects", lists information related to all your active projects - i.e. projects you can access right now by simply clicking on the project and then clicking the "Open" button. In this display you can see all your active projects; the project titles; which version is currently the "live" version; who last edited the project; when the project was last edited; and the date the project was originally created. To open a project, click on the project you want to open, then click the "Open" button in the "Open Project" dialog.

If you look at the bottom of the My Projects tab, you'll also see several other buttons available, in addition to the "Open" button.

	You can delete a project by clicking on the project and then click the Delete button. This will permanently remove this project and you will not be able to get it back.
	Use the Refresh button to force the project list to refresh. This may not be as useful on this tab as with the Shared listing, but in any case, this will force the display of projects to be refreshed.
	If you are done with a project, and you don't want to delete it, but you want to get it out of your active project list, you can "close" it. Closing a project merely removes it from your "active" listing and moves it to the listing of projects on your "Closed Projects" tab. If you ever want to open a project you've closed, all you have to do is to "re-activate" the project (from the Closed Projects tab), and then open the project as you normally would from your active project list here on the My Projects tab.
	If you want to make a duplicate copy of your entire project, like maybe you want a separate backup copy (you may want to check out versioning for your project). Or maybe you have a great project starter you created that has all the standard pages you want to use for all your other projects. Cloning simply creates a copy of the entire project, and let's you give it a new title. Click on the project you want to clone; click on the Clone button; enter a new title for the resulting copy; and there you go.

Shared Projects

Projects that are shared with you are all listed in this tab. This is a read-only display of the projects - you still must access the projects through the URL and special code provided to you by the project's owner (improving this user experience is on our "to do" list).

Closed Projects

Projects that you've closed are removed from your active list of projects (the ones on the My Projects tab) and show up here on the Closed Projects tab. If you want to open a closed project, you first need to re-activate the project, then go to the My Projects tab to open the project.

Versions [feedback]

Within Lumzy you can save different copies of your project in case you need to revert back to an earlier version. Only one version can be active at a time, and the current active version is referred to as the "live" version. As you continue to work on a project and save your changes, you continue to update the current "live" version of the project. If you want to make changes, but want to be able to revert back to an earlier copy of your project, then you'll want to "create a version". When you "create a version" what you are really doing is saving a copy of your project, and then moving forward to continue to make changes to the "live" project.

To create a version of a project, you must first open the project. To open a project, click on the "Open" button from the main menu, then select the project you want to open, then the "Open" button from the "Open Project" dialog. Once you have the project open, click on the "Version" button on the main menu to get the "Project Versions" dialog, then click the button to "Create a Version of Live Project".

Clone a Project

To clone a project means to make a copy of the complete project. This may be useful where you want to create a copy to maybe experiment or markup, without actually touching the original (though you may want to checkout "versioning" as an alternative to this). Another, and very powerful, use for cloning is to create a project starter - pages that you tend to use in a majority of your projects. With the Clone feature, you can re-use your starter each time you begin a new mockup project. To clone a project, you need to access the "Open Project" dialog by clicking on the "Open" button on the main menu. From the "Open Project" dialog, click on the project you want to clone, then click on the Clone button. Note that you can only clone the current active version of a project, so if there's a specific older version you want to clone, you'll need to make the older version the current active version prior to using the cloning featur.

Collaboration - Share & Chat [feedback]

Lumzy has collaboration features built into it that allow you to work online with colleagues, as well as with customers. Customers can view your mockups in both design mode and simulation mode, and make annotations to note issues or changes.

share URL

In order to be able to share a project, click the Activate button to enable the display of the URL. You can then send this URL to a customer or colleague to enable them to view your mockup. If, however, you need others to be able to edit your mockup, then you'll need to add them as Participants. Click on the Participants tab and enter the information, then click the Invite button, and an email will be send to them with the URL and a special access code for them to use to gain access to your mockup. At this point you will also be able to establish Chat sessions with these participants through Lumzy as well.

share participants

Chat

Lumzy has a built in chat capability for realtime chats with your colleagues during your mockup development. To establish a chat session, you have to already have individuals defined as Participants (see the section on Share for adding participants). As soon as you add a participant you'll see a new icon button added to the Lumzy Main Menu bar.

disconnected

This new button will allow you to establish a connection to the system for the purpose of chatting. Click the button to connect and you'll see the icon change to indicate you are now connected.

disconnected

Not yet connected.

Connected

Once connected you use the Chat tab as you would a typical chat window, entering your messages in the text area at the bottom and clicking the Send button to send your message.

chat

Help document version: OCT-29-2010

Table of Contents