Tutorial 8 - Quick UI Sketching

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 introduces various features in Maqetta that allow for quick sketching of user interfaces. The sketching features are often useful in the early stages of designing a user interface when you want to create a visual mockup quickly and solicit early feedback from colleagues and customers.

Initialize the Maqetta page editor in hi-fi sketch mode following the steps below.

1. ⇒ Issue a Create Sketch (high-fidelity) command from the Create command at the top of the application. In the dialog that appears, click on the Create button to create a new file with the default filename.
2. ⇒ A new blank HTML file is opened in the page editor, with the filename displayed at the top. Your workspace should now look something like this:
   

   Click on the image to enlarge it.
3. ⇒ In the Palette, click on the HTML section to open that section, and then click on the Common subsection to open that subsection.
4. ⇒ Find the <div> widget. Drag the <div> widget somewhere in the middle of the canvas.
   

   Click on the image to enlarge it.
   Notice that the <div> widget is placed such that its top/left corner is placed at the mouse location where you dropped the widget. The <div> is using absolute positioning because composition type "desktop hi-fi sketch" initializes the page editor in absolute positioning mode.
   Also, notice that default size of the <div> widget in absolute positioning mode is small (1em wide and 1em high), where an "em" unit is based on current font size.
5. ⇒ Drag the bottom-right selection handle for the <div> widget down and to the right until the <div> is roughly 250px by 150px.
   

   Click on the image to enlarge it.
6. ⇒ Drag the interior of the <div> until the <div> is approximately 50px from both the top and left edges of the page editing canvas.
7. ⇒ In the Properties palette, open up the Borders section, and set the 'border' property to "1px solid black" using the drop-down menu on the 'border' property. Your screen should now look like this:
   

   Click on the image to enlarge it.
8. ⇒ In the Palette, in the HTML section find the <label> widget. Drag a <label> widget inside of the black-bordered <div> but in the top/left area of the <div>. A data popup will appear. Enter "First name:" into the data popup:
   

   Click on the image to enlarge it.
   and then click OK. The page canvas should show a <label> element whose text content is "First name:".
9. ⇒ Drag another <label> widget from the Widget palette onto the canvas, and while dragging, position the mouse directly under the left edge of the "First name:" label. You should see a magenta-colored dynamic snap line (vertical line) when the mouse is at the same "x" location as the left edge of the "First name:" label. When the snap line appears, let up on the mouse to complete the drag/drop operation. A data popup will appear. Enter "Last name:" into the data popup and then click OK. The page canvas should show a second <label> with text content "Last name:" directly under the first label.
10. ⇒ In the Palette, in the Controls section find the TextBox widget. Drag a TextBox widget, and while dragging, position the mouse to the right of the "First name:" label such that the mouse is aligned with the vertical center of the "First name:" label. You should see a magenta-colored dynamic snap line (horizontal line) coming from the vertical middle of the label. If the snap line is coming from the top or bottom of the label, move your mouse a little bit up or down until you see a snap line coming from the vertical middle of the label. With the snap line coming from the vertical middle of the label, release the mouse button to complete the drag/drop operation. The TextBox should be aligned with the "First name:" label such that the vertical center of the TextBox is at the same location as the vertical center of the label.
    

    Click on the image to enlarge it.
11. ⇒ Drag another TextBox widget from the Widget palette onto the canvas, and while dragging, position the mouse to the right of the "Last name:" label such that the mouse is aligned with the vertical center of the "Last name:" label. You should see a magenta-colored dynamic snap line (horizontal line) coming from the vertical middle of the label. If the snap line is coming from the top or bottom of the label, move your mouse a little bit up or down until you see a snap line coming from the vertical middle of the label. While still dragging, move the mouse horizontally (left or right, depending) to that the mouse is directly under the left edge of the first TextBox widget. Move the mouse small amounts left, right, top, bottom until you see two magenta-colored snap lines - a horizontal snap line from vertical center of the "Last name:" label, and a vertical snap line from the left edge of the first TextBox. When you see both of the snap lines, release the mouse button to complete the drag/drop operation. The second TextBox should have snapped in both x and y to the TextBox and "Last name:" label.
    

    Click on the image to enlarge it.
12. ⇒ Drag a Button widget from the Widget palette anywhere in the bottom area of the <div>. After dropping the Button, move it around in various ways. First, press on arrow keys (on your keyboard) and notice that the Button moves 1px in the given direction with each press on an arrow key. With the Shift key depressed, press on the arrow keys and notice that the Button moves 10px in the given direction. Now, position the mouse over the interior of the Button and drag the Button slowly around to different positions in the bottom area of the <div>. You should sometimes see magenta-colored dynamic snap lines. While dragging, hold down the shift key and drag the button left, right, up and down, and you should notice that the shift key constrains dragging to either horizontal or vertical movement. Lift up on the shift key and drag the Button to the horizontal middle of the <div> until you see a vertical snap line that is coming from the horizontal center of the <div>. When this snap line is visible, release the mouse button to complete the drag/drop operation. The horizontal center of the Button should snap to the horizontal center of the <div> and your screen should look something like this:
    

    Click on the image to enlarge it.
13. ⇒ Click on the interior of the <div> to select it. Position the mouse over the interior of the <div> and drag the <div> to the right by about 50px, then lift up the mouse, The <div> and all of the widgets inside should all now be approximately 50px to the right of their previous locations.
    In sketch mode, if you move a container widget, all of the container's children will move also because children are positioned relative to their parent.
14. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

In this exercise, we will sketch out a user interface in low fidelity mode, using widgets, clip art and shapes.

Initialize the Maqetta page editor in Sketch (low-fidelity) mode following the steps below.

1. ⇒ Select the Create > Sketch (low-fidelity)... command from the Maqetta menubar.
2. ⇒ Click the Create button to create a new file with the default filename.
3. ⇒ A new blank HTML file is opened in the page editor, with the filename displayed at the top.
4. ⇒ In the Palette, click on the Drawing Tools section to open that section.
5. ⇒ Find the Rectangle widget. Click on the Rectangle widget in the Palette. Then move the mouse over the canvas and drag out a rectangular area approximately 300px by 300px. Your screen should now look something like this:
   

   Click on the image to enlarge it.
6. ⇒ Now find the Rectangle widget again but this time drag the Rectangle onto the canvas such that the mouse is inside the first rectangle, but near the top-left corner of the first Rectangle, and then release the mouse button to complete the drag operation.Your screen should now look something like this:
   

   Click on the image to enlarge it.
7. ⇒ Put the mouse over the interior of the second Rectangle and drag the second Rectangle until its top/left corner is at the same location as the top/left corner of the first Rectangle. You will probably see magenta-colored highlighting due to the automatic snapping feature. Release the mouse and the top/left corner of the second Rectangle should be positioned at the exact same location as the top/left corner of the first Rectangle.
8. ⇒ Put the mouse over the bluish grab handle at the bottom/right of the second Rectangle and drag the bottom/right corner to the right and slightly up until the second Rectangle's right edge aligns with the right edge of the first Rectangle, and also so that the second Rectangle is about 40px high. Make sure there is a magenta-colored snap line (vertical) that aligns with the right edge of the first Rectangle. Release the mouse to complete the resize operation. Your screen should now look something like this:
   

   Click on the image to enlarge it.
9. ⇒ In the Palette, within the Drawing Tools section, drag a Text widget from the Palette onto the canvas and drop the Text widget inside of the second Rectangle and near the left edge of the second Rectangle. When the data popup appears, enter "Dialog Title" and click OK. Put the mouse over the interior of the new Text widget and drag the Text widget to a position that is very close to the left edge of the second Rectangle and centered vertically within the second Rectangle. (You should see a magenta-colored snap line when the close icon is at the vertical center of the second Rectangle. Release the mouse to complete the drag operation. Your screen should now look something like this:
   

   Click on the image to enlarge it.
10. ⇒ In the Palette, click on the Clip Art section to open that section, then click on the User Interface Icons subsection to open that subsection.
11. ⇒ Find the Close widget. Drag the Close widget from the Palette onto the canvas until the mouse is inside the second Rectangle and near the right edge. Release the mouse and a 16x16 close box icon should appear within the second Rectangle. Put the mouse over the interior of the close icon and drag the close icon widget to a position that is very close to the right edge of the second Rectangle and centered vertically within the second Rectangle. (You should see a magenta-colored snap line when the close icon is at the vertical center of the second Rectangle.) Release the mouse to complete the drag operation. Your screen should now look something like this:
    

    Click on the image to enlarge it.
12. ⇒ In the Palette, make sure the Clip Art section is open, then click on the Media subsection to open that subsection, then find the Map widget. Drag the Map widget from the Palette onto the canvas until the mouse is inside the first Rectangle and below the second Rectangle (which is the Rectangle with the title and close box). Release the mouse and a large image of a map should appear, most likely too large to fit in the first rectangle. Drag the lower-right bluish selection knob of the Map widget to resize the Map so that it fits inside of the first Rectangle. While dragging, hold down the shift key so that the resize preserves the aspect ratio of the original Map widget. When the widget is the correct size, release the mouse to complete the resize operation. Your screen should now look something like this:
    

    Click on the image to enlarge it.
    Note that the clip art widgets are rendered by Maqetta as SVG, and therefore the clip art widgets are "scalable vector graphics" that preserve graphics quality no matter how small or large.
    You can import your own clip art into Maqetta by simply uploading arbitrary artwork (*.png, *.jpg, *.gif and even *.svg) from your laptop computer's disk into your cloud workspace using the "Upload files" command found on the context menu (right-mouse-button) within the Files palette. Once uploaded, you can then drag the uploaded images from the Files palette onto your page canvas.
13. ⇒ From the Controls section of the Palette, in the TextBox sub-section, find the ComboBox widget. Drag a ComboBox widget from the Palette onto the canvas until the mouse is inside the first Rectangle and to the right of the Map. After dropping the ComboBox, drag the resize knob to make it small enough to fit inside the first Rectangle.
14. ⇒ From the Controls section of the Palette, find the Button widget. Drag a Button widget from the Palette onto the canvas until the mouse is inside the first Rectangle and to the right of the Map and under the ComboBox. Your screen should now look something like this:
    

    Click on the image to enlarge it.
    Note that the Dojo widgets have been styled using a pseudo hand-drawn CSS theme. Note that the visual styling for the Dojo widgets, the shapes (in this example, the two Rectangles) and the clip art is similar. All of the objects use black&white coloring and similar stroke widths.
15. ⇒ On the page editor toolbar, press on the Document settings icon (2nd from the right) and issue a "Switch themes" command. This will bring up a dialog that allows you to switch to a different theme. Notice that the current desktop theme is "Sketch". Change the current desktop theme to "claro" and click OK. Your screen should now look something like this:
    

    Click on the image to enlarge it.
    Note that the Dojo widgets are now rendered using the high fidelity Claro theme instead of the pseudo hand-drawn look from the Sketch theme. For example, notice that the button has a blue background instead of having simple black&white styling. In Maqetta, you can switch between high fidelity and low fidelity at any time by issuing a "Switch themes" command.
16. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Previous / Next