Mobile App Diagram (Wireframing)

How to Create Mobile App Diagram

To add a Mobile App Diagram, click on the plus button after the last tab in the tab bar (or press CTRL + D) and click on the Mobile App Diagram item in the Wireframing group.

Alternatively, you can add the new diagram using the ribbon tab Project / Content (group) / Add New Diagram (button) (or press CTRL + SHIFT + D). It will show the New Diagram dialog where you can find the Mobile App Diagram item in the Wireframing group and enter the name of the new diagram.

Element Layouts

If you need to use an automatic layout for a list of elements that are part of your wireframe, you may find container elements useful. The simplest one is the Panel element, which is just a plain rectangle that can contain other elements. When the default container settings are used, it preserves the positions of nested elements where you place them. You can change the container layout using the context menu (right-click on the Panel) and its Container Layout submenu. There are multiple layout options: Simple, Flow, Stack, and Table. There are also other detailed tutorials about the container layouts and the container layout settings.

The other container elements apart from the Panel available for Mobile App Diagram are Group Box and Toolbar.

Smartphone Element

The Smartphone element allows you to place your view on a smartphone screen.

It is recommended to design your views in separate Mobile App diagrams. Then you can associate the view with the Smartphone element on the other diagram this way:

1. Right-click on the Smartphone element in the diagram
2. Choose the Diagrams submenu from the displayed context menu
3. Choose Associate Existing Diagram...
4. Choose the diagram with the desired wireframe from the tree view in the Existing Diagram dialog.
5. After confirming the dialog with the OK button, the chosen wireframe will be associated with the Smartphone element and displayed inside the screen area.

Or you can just drag the desired diagram of the UI view from the project tree (in the Project sidebar) and drop it over the Smartphone element in the diagram editor.

Smartphone with an associated diagram - app view design

It offers various parameters that allow you to adjust the appearance of the smartphone:

Front camera type - None / Bezel / Notch / Cutout / Capsule / Teardrop
Front camera alignment - specifies whether the front camera will be placed in the middle or on the left or right side.
Content alignment - specifies the alignment of the view content displayed on the smartphone screen.
Show notification bar
Display rounding - sets the rounding of the screen corners
Phone rounding - sets the outer shape rounding
Edge size - sets the size of the smartphone edges around the screen
Top bezel size
Bottom bezel size
Notch height
Cutout offset
Notch width

The Context Menu element allows you to specify a menu that will pop up in a specific place of your view. To edit the menu item, click on the area with the items - an edit box will show where each menu item is listed on a separate line. You can edit the item texts or add a new line with another menu item.

The context menu can have a vertical or horizontal orientation. You can also adjust the side of the menu arrow using the Side property. These parameters can be edited using the Properties sidebar or the Properties dialog.

App Title Panel

The App Title Panel element allows you to specify a section with your app header and menu button. You can adjust the menu button alignment via element properties. The menu can also be completely hidden.

The Accordion Menu element represents a horizontal menu with expandable and collapsible nodes with sub-nodes. To edit the menu items click on the element. An edit box with all menu items will show - each menu item on a separate line. The sub-items are prefixed with a hyphen (-). The number of leading hyphens determines the nesting level. The Accordion Menu supports multilevel nesting.

Size Labels

A size label allows you to show the exact size of the associated element in your diagram. You can add a new size label to the selected element using the context bar - click on the Add Size Label context button, and the size label connected to the active element will be added to the same diagram.

Each user interface element also has a property called Size Label. It allows you to show the size in pixels inside or outside the element near one of its corners. The size label can also be displayed in the middle of the target element. It is especially useful with Area elements.

Adding a size label using the context bar

Commented UI Elements

You can add comment notes to any user interface element to further describe the meaning of the important or ambiguous elements. The comment can also clarify the circumstances of element displaying or possible interactions.

Mobile App Diagram Elements

The Mobile App Diagram offers dozens of wireframing elements:

Accordion Menu
App Title Panel
Area
Button
Button Panel
Calendar
Combo Box
Context Menu
Drop Down Button
Expansion Detail
Expansion Table
Field List
Grid
Group Box
Check Box
Checked List Box
Keyboard
Label
List Box
Loading Spinner
Login
Map
Multi-Line Text Box
Named Box
Numeric Box
On Off Button
Panel
Paragraph
Progress Bar
Radio Button
Scrollbar
Search Box
Splitter
Text Box
Thumbnail View
Time Control
Toolbar
Track Bar
Tree

Mobile App Diagram Example

Mobile App Diagram (Example)