Lumzy Documentation




Table of Contents



Introduction to the layout [feedback]

This section will provide a brief overview of the layout of the Lumzy prototyping tool, showing you where general functions are located.  If you're anxious to create a prototype, feel free to give it a try, or jump ahead to Create your first Prototype - 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.

lumzy app


The interface can be split up into four major areas:
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 prototype projects and application settings.  In this section we'll explore each of the menu items.
Actions toolbar
Contains all the actions that relate to working within the pages of your prototype projects, and related to working with the various components you place on your prototype pages.
Component panel (also referred to as the "Component library")
This is the library of all the base or foundation components that you'll use in building your prototypes.  We're use the term "foundation" components here to differentiate from other components that have been pre-built to save you time - these pre-built components are called "templates" (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.
layout1

Project Panel elements  [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 prototypes 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 prototype pages themselves stand out (however, some text may be difficult to see in this mode).
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 components 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 prototype pages themselves show up within the Project panel using a tabbed interface, so can easily and quickly switch between your prototype pages.
layout3
At the very bottom of the Project panel is the Page 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


Component library panel  [feedback]

The last panel we'll explore in this brief introduction is the Components panel (also referred to as the "Component library").  This panel is where all the foundation components live, and from where you'll drag components to drop onto your prototype pages.  This panel uses an accordion interface to organize the various components into categories.   The topmost category (titled 'Common') is a where the most commonly used components have been organized for quicker access.  The components 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 components. 

layout2

Another way to quickly locate a component 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 components will instantly begin filtering out all components that do not match.  From the example screen shots below, you can see that entering in "tex" quickly limited down the list of components to just the text related components.  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.

quick search       quick search result

Create your first Prototype - 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 prototype on your own, and then refer back here if you get stuck:
  1. Login
  2. Create a new project, giving it a name as well as a name for the first page of our prototype
  3. Create the prototype by dragging components onto the page.  Our prototype with be a very simple mail list sign-up page (see picture below)
  4. Save our work
  5. 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 login 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 prototype

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 components that we'll be using to build this prototype - this will help you in locating these components in the Components panel or "library".  You'll see the terms "components" and "objects" used interchangeably to refer to things you place on your prototype page, so don't assume there's any actual difference between the two terms.

email signup

Start by locating the Dialog Window container component that we'll use as a parent to place all the other components inside.  This is not something required, and these container components are considered experimental (see the section covering containers). We could instead simply drag the other components onto our blank page, but using a container will provide a nice frame around our small set of components for this demonstration.  All components that can "contain" other components in this manner are grouped under the category labeled "Containers & Layout" in the Components panel.  So click on the "Containers & Layout" category and find the component 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 components to select from to just the Dialog Window component.

containers


Grab the Dialog Window component by clicking on it with your mouse and continue holding down the mouse button to drag the component onto your currently blank page in the Project panel area.  When you've placed the Dialog Window component 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 component, or any component 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 labeledit label finished

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 component onto our page.  These follow the standard user interface for changing the dimensions of the component.  The frame and the frame handles indicate this component 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 components we want for our simple mail list sign-up example.  On your own, locate and drag in the following components and perform the indicated tasks:

Drag in a Text Label component and change the label to "Salutation:"
Drag in a Combobox component and place it to the right of the "Salutation" text label.  Edit the values of this combobox component 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 Components panel, and type in "tex" to filter down the components. 
Drag in the Text Label components for the Lastname and the Email Address and give them the appropriate labels.
Drag in the Text Field components 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 component 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 components, 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 components.  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 prototype projects and application settings.

menu bar


new project 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.
post login


open 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.
open project


save Save


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.


manage images Manage Images

The images referenced here are images you have uploaded to Lumzy through the "Add Icon or Picture" component.  Once images have been uploaded, you use the Manage Images to delete or archive your collection of images.

Deleting an image will remove it from your storage, and any projects referencing that image will show the default "Add Icon or Picture" image.  Due to caching of images, your deleted image(s) may still be viewable in your projects, until your next session.

Archiving an image is simply a way to manage your images and move the ones you don't readily need access to, out of the way, while still keeping them viewable within any projects that may be using that image.
project properties

project properties 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.
project properties

versions 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
versions

export History

If you need to grab an earlier copy of your project from your recent session, the History function will provide you with a list of snapshots (taken every 30 minutes during an active project session). These snapshots are stored in our recent history table, and are only kept in the table for a short period of approximately 5 days - intended to support recent work sessions only (use the Version function for creating your own longer term backups and savepoints).  To grab an earlier copy, simply select the record from the list, click on the Copy button, and optionally enter in a new title (so you can tell this project apart from the original).
export

export Export

If you need to produce static images of your prototype, 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.
export

templates 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 prototype 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 prototypes 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 Share

The most powerful aspect of a prototype is being able to click and use the prototype 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 prototype.  see the Share section for more information.

share URL

chat Logs & Chat


Future feature under development



tokens Tokens


Use the tokens (piggy bank) icon to:

A) View your token status (ex. how many you have; when you last used a token; when you last purchased tokens)

B) See your token usage history (displays up to the last 30 usage dates)

C) Transfer tokens to other users (useful by organizations whereby one individual can the purchase the tokens and then distribute to the rest of the team).
token usage

feedbackFeedback

This pops up a feedback form that will be sent to our Lumzy Support team. Use this to provide 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). 

Note: make sure to copy your text if you want to change the type of message, as your text will not be saved if you switch between the different message types.


help Help


Gets you to this documentation



My Account


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]

actions panel The Actions toolbar contains all the actions that relate to working within the pages of your prototype project, and related to working with the various components you place on your prototype pages. 

In the discussion covering the Lumzy main menu bar, we talked about functions related to more global settings and functions that relate to your projects, whereas with the Actions toolbar we're now dealing at the page level within a project. 

Each function on the Actions toolbar is described in detail in the section below


undo Undo and redo Redo

The Undo and Redo actions in Lumzy work a little differently than what you might expect, and operate at the Page level, as opposed to a Project level. Project level changes, such as adding a page, are not included in the stack and cannnot use the Undo/Redo functions. Even at the page level, not all changes are recorded in the stack. Below is a table highlighting those actions that are handled differently than you might expect:
Action
Recorded?
Notes
Move a component
Not generally
Only the current location is recorded, unless an Alignment function has been used (see the Alignment discussion further in this table). Generally, a component moved from point A, to B, to C, will only end up with point C being in the stack
Add a new page to a project
No
This is a project level action
Add a component to a page
Yes
Note - since the location of a component generally only records its current position, the typical history for a component (even if you've moved it from point A to point B to point C, etc...) will simply be the two records - 1) adding the component; 2) its current location. So an Undo on a component basically just removes the component from the page, and a Redo, places the component back on the page at its current location.
Clipboard contents
No
When a component is copied to the virtual clipboard, the Undo/Redo has no affect on the contents of the clipboard, so the component will remain in the clipboard.
Add/Edit Actions or Events
No
These changes are outside the scope of the page itself, and reside at a layer inside the component, so we don't currently pick these changes up.
Alignment functions
Yes, initially
When using one of the Alignment functions, the alignment action will become part of the history stack, at least temporarily. Using one of the alignment functions seems to somewhat override the general lack of records being generated for the movement of components, and then the alignment action itself will drop out of the stack, while many of the other component locations will remain.

The Undo and Redo functions only support the changes made since you last saved your project, so be aware, especially if auto-save is on. 

duplicate 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 Cut, copy Copy, paste Paste

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. 

lock Lock

Locks 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.

The lock images will not show up during simulation, however, they do currently display show up if you export your project as static images (i.e. the JPG or PDF export feature).

delete Delete

Delete key
Deletes the currently selected object(s).

layer forward Move forward one layer
layer back Move backward one layer
layer front Move to the front
layer back Move to the back
Standard layering functions that allow you to arrange objects or components 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 left, align right Align right
align top Align top, align bottom Align bottom
align vertical middle Align middle
align center Align center

The alignment functions can help you to quickly line up your components 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 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.




Page Toolbar  [feedback]

This toolbar is primarily focused on attributes of a Page - width, height, background color, whether it uses a master page or not, etc...

page toolbar


status area
status area

The area to the far left of the toolbar is the "project status" area. This is where you will see text letting you know information related to the state of your project, such as when it was last saved, or if it is currently in the middle of being saved.

When you open a new project this status will simply let you know when the project has been completely loaded.

This is also the are you may seen information if there is an error during the save process, so make sure to check the message in this area now and then while you are working on your project pages.
post login


Add page
Add a page

Adds a new blank page to your project.

Use the Edit page function to change the title to something useful, but stay away from using non-alphanumeric characters, such as /, <, >, -, as these can sometimes cause issues with your project, including the inability to export your project to an image file.

Edit page
Edit page

Edit some page properties - the name of a page, and/or to designate the current page as a master page.

When naming your page, stay away from using non-alphanumeric characters, such as /, <, >, -, as these can sometimes cause issues with your project, including the inability to export your project to an image file.

Please see the Master Pages section for more information about using a master.



Duplicate page
Duplicate page

Makes a complete copy of the current page and creates it as a new page added to your project. Make sure you're not using this function, however, in place of setting up a master page, for displaying common elements across the pages in your project. (see the Master Pages section for more information)

Delete page
Delete page

Deletes the current page.

Use this function with caution, as it cannot be undone once you've executed it.

page size
Page size

Use the Width and Height settings to modify a page's dimensions. The current window size for Simulation supports up to a maximum size of 1024 pixels wide by 550px in height. Any window larger than this will automatically have scrollbars added during the simulation.

Make sure you use these dimension adjustments when you create things like a popup window. Popup windows generally have a much smaller dimension than the window they are popping up within, and attempting to popup a page larger than the page in which the popup is supposed to display, can cause issues with your project.

page background
Page background

Simply defines the background color to use for the current page.

Selecting a value here only affects the current page, so you can use different background colors for different pages if you wanted to.

page background
Page Master

You'll likely find that many of your pages use several of the same components, such as a banner, menu, footer, maybe even a some standard left or right columns. Instead of duplicating these common elements on every page, and severely bloating your project, create a master page that is referenced by the other pages that will use these similar elements.

Using the Master: dropdown, you can specify whether or not the current page uses a master, and select which master (if you have multiple set up).

Refer to the Master Page section for detailed instructions.



page background
Emulation Theme

While this setting is on the Page Toolbar, it actually affects the view of all pages within your project, and changes the style of quite a few components. The image to the right shows several images, as they appear within each theme.

You can change the emulation theme at any time during your development of your project, or wait to the very end, it doesn't matter.   Just click on the emulation theme, and the selected theme will be applied throughout your project.




Working with Text and Labels  [feedback]

To change the label of any component, you simply double-click near the current label to get into edit mode.  You can do this for any of the components 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 component we have a separate detailed section - simply search the page to locate the component, or go to the Working with Components section.
edit text

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

rich text format       bullet list


Changing an Object's Size [feedback]

Lumzy uses the standard interface for indicating a component 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 component.  Grab one of the corner frame handles and drag horizontally and vertically out away from the component in order to make it larger and taller, or drag the handle in closer to the middle of the component to make the component smaller.  Similarly, if you just want to grow the component 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 component 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 components 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 prototype, 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 prototype 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.

edit page properties

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.

page properties

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 prototype (also referred to as a "mockup") 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 prototype 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 components support events, and the events may differ among the components as appropriate.  For example a Button component 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 component 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 component.  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 component or object on the page can be given access to the Events and Actions through the use of the Hot Spot component.  A Hot Spot is simply a transparent component 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!
  • The simulation window currently supports pages up to 1024 pixels wide by 550 pixel in height. Any pages larger than these dimensions will display scrollbars during the simulation, so the viewer will be able to see the entire page. If you don't want the scrollbars to show up, then you'll need to limit your pages to within these dimensions.

Events

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

Component
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.

Note: These actions are based on the position in the Datagrid and not the data elements - so, for example, if you have an action defined for the second row in a table. If you now sort the table, the action will be performed against the second row, even though this row now contains different data.
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 component.  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           actions short
            Events tab in the Properties dialog                                        Actions tab in the Properties dialog



Actions  [feedback]

While the Events may differ slightly among the various components, the available Actions are consistent across these components.  Some components have more granular definitions, such as a List component, 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 prototypes and then experienced during simulation mode:
Go to Another Page
This action simply takes the user to another page within the current prototype 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.

alert box

The icons for the other alert types are:
alert box okOkay | alert box cancel Cancel  | alert box help Help  | alert box file File 
alert box warning Warning  | alert box next Next  | alert box previous Previous

Show a Page as a Popup
This particular action let's you specify any of your prototype 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 also include a "Remove current Popup Window" action - 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 component, 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 prototype 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 component that makes sense, so that the popup disappears and reflects the desired user experience.


Working with Components  [feedback]

In this section we will cover the details for some of the components that offer additional functionality or that differ slightly from the general population of components.  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 components operate in a similar manner to one another, so once you understand one component, especially within a category, you'll readily understand the others.  We've broken out the information on Components into two sections: Containers and Non-containers.  The first section is a table where we'll cover a majority of the non-container components, though not all of them.  Instead of covering every single component (which would be a massive list - most of it repetitive) we've chosen to discuss those components that may be a little tricky or offer something unique as compared to the bulk of components.  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 Components


Hot Spot

hotspot
The Hot Spot component, is a special component in that it can be used to enable ANY component 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 component onto your prototype 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 component 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 or Picture

add icon image

The Button component 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 prototype pages through the use of the Icon/Picture component.  Drag this component on to your prototype 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

button

The Button component is a straight forward component, 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

combobox
Specifying values in your dropdown is to simply edit the labels.  Double-click to get into edit mode for this component, 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 component also allows you to specify which of the values you want the component to display when simulation is started.


Menu bar and Link bar

menu bar
link bar

These two components 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 prototype, 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)

menu bar

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 component, 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 prototype page within your project, you need to make sure you enter in the page's name exactly as it's listed in your prototype.

TIP:  instead of using the Breadcrumb component, 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.



Menu

menu
The Menu component is really a static visual component - meaning it does not support any events or actions itself, so it would be one of those components that is a good candidate for use with some Hot Spot components.  This component does, however, provide a lot of visual elements that are interesting, and all the visual cues (like the selected radio button, and checkmark next to a selection) are all based on specific values you enter in the labels for this component.  So let's take the stock Menu component 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

tree pane
The Tree Pane component is very similar to the Menu component, in that it is a static visual component - meaning it does not support any events or actions itself, so it would be one of those components that is a good candidate for use with some Hot Spot components.  This component 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 component.  So let's take a look at a custom Tree Pane component 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

datagrid
The Datagrid Table component is a set of columns and rows of data that you specify.  You have complete component 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 component as you build your prototype.

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 component, 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 component 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 component'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. Avoid using other non-alphanumeric characters (especially a period ".") as they can cause parsing issues during the rendering of the table.

Here's the data that appears in the default component:

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 component does support Events and Actions, and is one of the components that has additional granularity related to the Events/Actions so you can specify different Actions based on which row is selected by the user.
Important Note: These actions are based on the position in the Datagrid and not the data elements - so, for example, if you have an action defined for the second row in a table. If you now sort the table, the action will be performed against the second row, even though this row now contains different data.



Tag Cloud

tag cloud

This simply applies some randomness to whatever text is entered.  There is no way to control which tags appear larger or bold, and each time you edit the contents, the display will be generated differently.

Modal Screen

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 component on a page and layer it in front of the components on your page to have it look like a modal view of the page.

Column Chart

Bar Chart

Line Chart

column 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 componentsbar chart data
Sample for the Pie chart component         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                               pie chart


Draw Circle, Triangle, Rectangle, Line

circle
There are four "Draw" components that you can use to draw simple shapes (triangle, circle, rectangle), or to free hand.  To draw one of these shapes, drag the object onto the page, where you'll see your mouse cursor change to a "+" sign (indicating you're in "draw mode"). Using your mouse, hold the button down to begin "drawing" the shape. If you're using the Draw Line, the default drawing mode will let your do a free-hand type of scribble, but if you want a straight line, then hold the Shift key down as you draw your line.

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 component with various corner radius settings.

corner radius



Container Components  [feedback]

 What is a container?

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

NOTE: all the container components are currently considered "experimental" and should be used sparingly in your projects. Due to the hierarchical nature, use of containers can add bulk and size to your project files, as well as cause problems in projects. It is suggested that you instead use the "Draw" components to create your own borders, until we can provide static versions of these components as an alternative, while we continue to work out the challenges.


Using a Container

To use a container, drag the container component onto your prototype page, then using the frame handles, size your container to the appropriate size.  To place objects inside the container, just drag them from the Components 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 Components 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 component that we'll look at specifically - the Accordion.  The Accordion doesn't look like the rest of the container types of components, though it actually operates very much like the containers.  To define the labels for the Accordion's panels, you double-click the component 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 components 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 components 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 component.  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 components (or any components 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 prototype.  For example, with the Button component, 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 components, or even simply adding an icon or image to a page, via the "Icon/Picture" component itself, you'll use the Image dialog (labeled "Pick an image..."), which will display the moment you select to work with an icon.

pick an image                  pick color 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 prototypes, you use the Image dialog, which you can get to by either adding a Icon/Picture component to your prototype, or by clicking to use an icon within one of the components that supports icons (such as the Button component) .  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 prototype "project" is a complete prototype, 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 prototype 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".

new project


Existing Projects

After using the Lumzy prototype 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.

open project

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. 

delete project
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.
refresh project list
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.
close project
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.
clone project
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".


versions


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 prototype 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 feature.


Sharing Projects with Others   [feedback]

Lumzy has a sharing features built into it that allow you to work with customers. You can also share projects with colleagues so they can have access to the designer area to work on and modify the project (read the cautions below regarding sharing designer area access).

Customers can view your prototypes in simulation mode. If they have a Lumzy login, they can also make annotations to note issues or changes.  (Note: viewers can not edit the Annotations you include in your prototype - they can only add/edit the text of Annotations they've added themselves).

share URL

In order to be able to share a prototype with a customer, click the Activate button to enable the display of the URL.  Once the URL is activated, you can provide access in a couple ways:
  • If you need secure access to the prototype (i.e. user must not only have the URL, but must also enter in a passcode), then use the built in "Send by Email" tab to send the URL (it will include a key as part of the link). This also provides permanent access to the user you send this to (regardless of whether the project is activated or not).
  • If you want to control the user's access, based on whether you have the project activated or not, then copy the URL and send it via your own personal email.  This also means anyone having the URL will be able to view your prototype.
If you need others to be able to edit or work on your prototype directly (i.e. in design mode), then you'll need to add them as Participants, however you must use this feature with caution.
If multiple users are attempting to work on the same project at the same time, then each user will be overwriting the other's changes, and the last user to save their changes to the project wins. You must make sure to coordinate with your collaborators when sharing a project so that only one person has the project open and is working on the project at a time.

  To add someone as a participant, click on the Participants tab and enter a name and their email address information, then click the Invite button, and an email will be sent to them with the URL and a special access code for them to use to gain access to your prototype.

share participants


Customer Edits

As mentioned above, by 'activating' your project and providing your customers with a URL, they will be able to view/run your project in simulation mode. In addition, if the customer has a Lumzy login, they can add Annotations and draw highlights to help communicate changes, comments, etc...

IT'S IMPORTANT TO NOTE, customer highlights and annotations will appear on your source project, so you may want to either caution customers to be judicious with their markups (since you'll have to clean it all up afterwards), or a better option may be to first clone your project and share the clone with your customer (see the section on how to clone a project)

The image below displays an example of what a customer sees after entering in a URL to an activated project. This image breaks down the various sections of what the customer will see.

shared URL view


For a customer who has a Lumzy login, that customer will be able to use the various annotation tools available. Note the current tools display contains a large Comments section, which is not functional and is at this point a placeholder for future functionality. The two tools that are functional include Highlights and Annotations.

highlight


To add highlights (can be used to underline, circle, etc...), simply click the tool and then use the button on your mouse and hold it down to draw on the page.

highlight


To add Annotations, click on the tool and move the cursor to where you want the Annotation object placed, then click the mouse button to place the Annotation. The customer can then enter in whatever notes they desire. The Annotation, by default, will identify the name of the customer and date/timestamp the entry.

annotation

If you find this doc missing or lacking any information that would be helpful to you, please let us know.




Help document version: JAN-07-2014

About Lumzy | Terms of Use | Privacy Policy | Support | FAQs
Copyright © 2010. All Rights Reserved, Crunch Frog, LLC