Tutorial 13 - Mobile 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 mobile 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.

Before running this tutorial, be sure to first go through the more general "Quick UI Sketching" tutorial. That tutorial introduces the various sketching features found in Maqetta. This tutorial supplements the "Quick UI Sketching" tutorial with some features and techniques specific to mobile UI sketching.

In the previous tutorial, "Tutorial - Mobile User Interfaces", you learned how to use Maqetta's drag/drop authoring features to visually compose an actual running mobile application, all within a life-size replica of the target device (e.g., silhouette of an iPhone). This tutorial shows how to use an alternate technique for mocking up a mobile user interface using Maqetta's quick UI sketching features. With these techniques, you will create a WYSIWYG drawing of a proposed user interface, using actual mobile widgets, but the result will be a static image of the proposed user interface rather than an actual working application.

Here are some advantages/disadvantages between mobile visual composition and mobile sketching:

• Mobile visual composition:
  • Pro: Because you are creating an actual running mobile application, you will end up much further along the path towards delivering a production application.
  • Pro: Users can actually run the application and therefore test out the application's interactivity either either in Maqetta's desktop previewer (where the application runs within a life-size device silhouette) or actually try out the application on target devices.
  • Con: Users sometimes have to ascend some HTML and CSS learning curves
  • Con: In many cases, it takes more time to build a mobile composition than a mobile sketch.
• Mobile sketching:
  • Pro: You can usually create mobile UI mockups quickly (in minutes).
  • Pro: Low learning curve.
  • Con: The result is just a picture of an application, not an actual running application.
  • Con: Viewing the mobile UI mockup on the actual device won't be particularly useful.

The steps below introduce mobile sketching.

• Go to the Create menu at the top of the application, and issue a "Create Sketch (high-fidelity)" command. You can either accept the default filename (e.g., file1.html) or enter a custom filename. Click on the Create button.

In the Palette, open up the Clip Art section of the Widgets palette, then click on Device Silhouttes to open the Device Silhouttes subsection. You should see various clip art entries for mobile devices (e.g., Android_340x480, Android_480x800, AndroidTablet, Blackberry, iPad, iPhone).



Drag/drop a iPhone clip art widget onto the page canvas, dropping it near the top/left corner of the canvas. Your canvas should now look like this:



Adding a Heading widget

In the Palette, open up the "Heading" section and then drag/drop a Heading widget into the picture of the iPhone. Attempt to drop the widget at the top/left corner of the inner rectangle of the iPhone clip art widget. When the prompt appears for the Heading widget's text, enter ""Mobile UI Sketch".



Click/drag on the interior of the Heading widget to move it so that it is repositioned such that its top/left corner is exactly aligned with the top/left corner corner of the inner rectangle of the iPhone clip art widget. You might want to first move the Heading down and to the right so that you can see where the top/left inner corner is and then move the Heading back into alignment with the top/left inner corner.

You can also use the arrow keys to move widgets one pixel in a particular direction. You can also go to the Layout section of the Properties palette to adjust the 'left' and 'top' properties there. The "+" and "-" icons can be convenient for pixel tweaking operations.

Once the top/left corner is in the right location, now drag the right edge of the Heading widget to the right until the right edge of the Heading widget is exactly aligned with the right edge of the iPhone's inner rectangle.

You can also go to the Layout section of the Properties palette to adjust the 'width' property there. The "+" and "-" icons can be convenient for pixel tweaking operations.

Your canvas should now look like this:



If you check the Outline palette, you will see that the Heading is a child of the device clip art widget, and therefore positioned "absolutely, but relative to its parent". In other words, the Heading is at a fixed (x,y) location relative to the top/left of its parent widget (i.e., the device clip art widget). What this means is that if you move the device clip art widget, the Heading will move along with it.

Adding a RoundRectList widget and a TabBar widget

Drag/drop a RoundRectList widget (found in the Lists section of the Palette) into the picture of the iPhone below the Heading widget. When the prompt appears, type in 4 lines of text:

Active
Pending
Approved
Deleted

With the RoundRectList widget selected, drag it to a position such that it is directly under the Heading and centered horizontally within the iPhone's inner rectangle.

If you click on a RoundRectList in an attempt to select it, you might find that one of the ListItem child widgets has been selected instead of the RoundRectList container widget. In this case, to select the RoundRectList container widget, you can use either of these options:
• Select one of the child ListItem widgets, then bring up the context menu (right mouse button on a multi-button mouse) and choose the "Select parent" command.
• Go to the Outline palette and find the RoundRectList widget there, and click on it in the Outline palette to select it.
• You might also be able to select the RoundRectList container widget by carefully clicking on its border (versus clicking on its interior).

Drag/drop a TabBar widget (found in the ToolBars, ButtonBars subsection of the Controls section of the Palette) into the picture of the iPhone and drop near the bottom of the iPhone's inner rectangle. When the prompt appears, type in this text:

Tasks, Alerts, Messages

With the TabBar widget selected, drag it to a position such that its bottom-left corner is exactly aligned with the bottom-left corner of the iPhone's inner rectangle.

With the TabBar widget selected, drag on the right edge of the TabBar so that the right edge of the TabBar is exactly aligned with the right edge of the iPhone's inner rectangle.

Your canvas should now look like this:



Your mobile sketch is now complete.

Landscape sketching

The device clipart widgets (e.g., Android_340x480, Android_480x800, AndroidTablet, Blackberry, iPad, iPhone) can be changed to landscape orientation if you need to do quick mobile UI sketching for how user interfaces will look in landscape mode. To do so, select the clipart widget on the canvas, then go to the Widget-Specific section of the Properties palette. You can then change the value of the 'Orientation' property of the given device clipart widget to 'landscape'. But if you do this, only that one widget will change its orientation. Any other widgets that might have been added to the page will not automatically reposition and resize themselves because Maqetta is in quick sketching mode. (Note: if instead of quick UI sketching, you had composed an actual mobile page in Maqetta, the child widgets would indeed automatically reposition and resize themselves.)

Previous / Next