Tutorial 3 - User Interface Overview

When going through Maqetta's tutorials, it is suggested that you have two side-by-side browser windows open, one showing the tutorial, and the other where you run the application and perform the steps listed in the tutorial.

This tutorial provides an overview of the Maqetta's overall user interface - in particular, those parts of the user interface that you see upon launching the application for the first time (i.e., immediately after completing the steps from the previous tutorial Launching Maqetta). Topics covered:

• Welcome screen
• Main menubar
• Left- and Right-Side Palettes
• Welcome Screen Buttons

Welcome screen

When you launch the Maqetta application for the first time (or any time when you have no files opened), the Maqetta application will appear as follows:

The welcome screen has a Main menubar that appears at the top of the application (with Create and Open menus at the top/center) and the various large-size buttons on the left- and right-side of the application that open up Maqetta's various Palettes (e.g., the "Files" palette will show the files in your cloud workspace).

Main menubar

1. ⇒ Click and hold on the Create menu at the top of the page. (Don't actually choose one of the menu commands yet - we'll get to that soon.) You should see a menu that looks like this, which shows all of the "Create" commands in Maqetta.


• The first four Create commands (Mobile Application..., Desktop Application..., Sketch (high-fidelity) and Sketch (low-fidelity) will open up the Maqetta visual page editor for the given type of composition.
• Create Folder... will add a new folder to the current project
• Create CSS... and Create JavaScript... will create a new source file and open the Maqetta source editor
• Create Theme... will create a new CSS theme and open one of Maqetta theme editors
• Create Review... will create a new review session and open the Maqetta review/commenting editor
• Create Project... will create and initialize a new project in your workspace. The new project will become your current project.
2. ⇒ Click and hold on the Open menu at the top of the page. (Don't actually choose one of the menu commands yet.) You should see a menu that looks like this, which shows all of the "Open" commands in Maqetta.


• Open File... allows you to open one of your workspace files
• Open Theme Editor... opens one of your CSS themes within one of Maqetta's theme editors
• Open Review... shows the list of review/commenting sessions in which you are participating, and allows you to open a review file in the review/commenting editor
• Open Orion Navigator... will open a separate browser window where you can use the source editing and file management tools from the Eclipse Orion project (which is built into Maqetta) to manage the files in your workspace.

At the top-right of the main menubar you'll see three icons:

3. ⇒ Press and hold each of these icons, and you should see drop-down menus with the following commands:
• User menu:
  • User login - Shows the login being used for this session
  • Log out - Terminates this session, returns to login page
• Application settings menu:
  • Preferences - Shows a dialog that provide options for customizing Maqetta
  • Theme sets - Maqetta include advanced features for managing which CSS themes should be used for different target devices
• Help menu:
  • Documentation - Opens new browser tab/page showing Maqetta's doc set
  • Tutorials - New browser tab/page showing tutorials within doc set
  • Videos - New browser tab/page showing Maqetta YouTube channel
  • Cheat sheets - New browser tab/page showing cheat sheets within doc set
  • How-to - New browser tab/page showing how-to articles
  • About - Popup window showing current product version
4. ⇒ Go back to the Create button. Press on Create button and choose the first command - Create Mobile Application. A dialog similar to the following should appear:

5. ⇒ In the dialog, accept the default settings and click on the Create button. You should see a page that shows the life-size silhouette of a mobile device (probably an iPhone). Up towards the top of the application, you should see a list of file tabs (probably with only one file tab showing now) and the page editor's toolbar.
6. ⇒ Click on the file tab's close button - - to close the page editor. Click Discard on the Save/Discard/Cancel alert that appears. (If any another files are open now, close them, too.) The welcome screen (with all of the large-size buttons) should re-appear in the middle of the screen.

Left- and Right-Side Palettes

On the left- and right-side of the application you will see large-size buttons with the following labels:

• Left/top
  • Palette - When the visual page editor is open, shows the list of widgets you can add to pages.
  • Outline - When the visual page editor is open, this will show the hierarchical list of widgets that are included in the currently open file.
• Left/bottom
  • Files - Shows the files in your cloud workspace.
  • Reviews - Shows the list of review/commenting sessions in which you are participating.
• Right/top
  • Widget - Widget-specific properties.
  • Events - Allows you to define actions to occur at run-time when certain events happen (e.g., clicking on a widget).
  • Layout - CSS properties having to do with layout, size and positioning.
  • Padding - CSS padding properties
  • Margin - CSS margin properties
  • Background - CSS background properties
  • Border - CSS border properties
  • Fonts/Text - CSS font and text properties having to do with fonts
  • SVG - (For Line, Arrow, and Polyline widgets only) SVG fill and stroke properties
• Right/bottom
  • Scenes - This palette allows you to define custom "application states" - a key feature in allowing non-programmers to create interactive prototypes without programming. For mobile applications, this palette also allows you to manage the various mobile "views" (which can be thought of as different screens).

1. ⇒ Click on the Files button. The left-side palettes should expand and become visible.
2. ⇒ Click on the Files button again. The left-side palettes should collapse and become invisible.
3. ⇒ Click on the Reviews button. The left-side palettes should expand and become visible, but instead of seeing the Files palette at the bottom/left of the screen, you should see the Reviews palette (probably empty).
4. ⇒ Click on the Files button. The left-side palettes should stay open and the Files palette should be visible instead of the Reviews palette. (For each of the four palette areas - left/top, left/bottom, right/top/, right/bottom - only one of the palettes in that group can be visible at a time.)
5. ⇒ Position the mouse over the dark-gray vertical splitter that separates the left-side palettes with the central area of the application. When you see the cursor change to a move symbol, mouse down and drag the splitter to the right. Notice that the palette region expands and the central area gets smaller. Repeat this operation (i.e., drag the splitter again) to restore the left-size palette size to their approximate original size.
6. ⇒ Position the mouse over the dark-gray horizontal splitter that separates the left/top palettes (Palette and Outline) from the left/bottom palettes (Files and Review). When you see the cursor change to a move symbol, mouse down and drag the splitter upwards. Notice that the Files palette region expands and Palette region gets smaller. Repeat this operation (i.e., drag the splitter again) to restore the left-size palettes to their approximate original sizes.
7. ⇒ With the left-side palettes still open, click on the small collapse icon - - at the top/right corner of the left-side palettes. The left-side palettes should collapse. Note that you can collapse palettes either by clicking on the collapse icon or clicking on the large palette button for the currently open palette.
The right-side palettes operate the same way as the left-side palettes, except in mirror-image. (For example, the right-side palettes expand to the left.)
Note that sometimes Maqetta shows different palette arrangements that what you are seeing now. For the theme editor and for the review/commenting editor, some palettes go away and other palettes get added. Occasionally, palettes shift to different locations. For example, with the review/commenting editor, the Reviews palette moves from left/bottom to left/top.

Welcome Screen Buttons

1. ⇒ If you have any open files, click on the file tab's close button - - for each file until no files are open. The welcome screen (with all of the large-size buttons) should re-appear in the middle of the screen.

The welcome screen shows two rows of buttons.



The first row contains common actions that users will want to do:

• Create a New Mobile Application - Press this button if you want to create an actual mobile application that will run on popular mobile devices such as smartphones and tablets. (Note: this button is equivalent to the Create -> Mobile Application... command found on the Create menu at the top of the application.)
• Create a New Desktop Application - Press this button if you want to create an actual desktop application that will run modern browsers (desktop or mobile). (Note: this button is equivalent to the Create -> Desktop Application... command found on the Create menu at the top of the application.)
• Create a New Sketch - Press this button if you want to use Maqetta's quick UI sketching feature to create a high-fidelity sketch. (Note: this button is equivalent to the Create -> Sketch (high-fidelity)... command found on the Create menu at the top of the application.)
• Create a New CSS Theme - Press this button if you want to create a new CSS theme (by cloning one of the existing themes). After the clone-and-create operation, Maqetta will open up the new theme in one of Maqetta's theme editors. You can clone/create both new desktop CSS themes or mobile CSS themes. (Note: this button is equivalent to the Create -> Theme... command found on the Create menu at the top of the application.)
• Create a New Review - Press this button if you want to create a new review/commenting session where you want to share one of your compositions with your colleagues for them to review and comment on your creation. (Note: this button is equivalent to the Create -> Review... command found on the Create menu at the top of the application.)
2. ⇒ Click on the Create a New Desktop Application button. You should see a dialog that allows you to choose a filename for your new composition. Accept the default values and click on the Create button. You should see a blank canvas (onto which you can start dragging and dropping widgets).
3. ⇒ Click on the file tab's close button - - to close the page editor. Click Discard on the Save/Discard/Cancel alert that appears.

The second row of buttons contains links to learning resources:

• Tutorials - Opens a new browser tab/page showing tutorials within doc set (equivalent to Help button -> Tutorials on the top menubar)
• Videos - Opens a new browser tab/page showing Maqetta YouTube channel (equivalent to Help button -> Videos on the top menubar)
• Cheat sheets - Opens a new browser tab/page showing cheat sheets within doc set (equivalent to Help button -> Cheat sheets on the top menubar)
• How-to - Opens a new browser tab/page showing how-to articles (equivalent to Help button -> How-to articles on the top menubar)
4. ⇒ Click on the Cheat sheets button. A new browser window should open that shows the list of Maqetta's cheat sheets.

Previous / Next