The wireframe template in Visio Professional and Visio Plan 2 is designed for creating medium-fidelity mock-ups of software applications. The template can be used for a wide range of software types, such as applications for Windows, the Internet, and mobile devices.
-
Start by clicking the Dialogs stencil and dragging an Application form or a Dialog form onto the page. Add other shapes from this stencil to outline the basic structure of the UI.
-
Click the Toolbars stencil to add menus and other application icons.
-
Use the shapes on the other four default stencils (Controls, Cursors, Common Icons, and Web and Media Icons) to fill in the UI and show the application’s functionality.
Some of the wireframe shapes have customizable properties. Here are some tips on using those shapes.
What do you want to do?
Create dialogs
|
Shape |
Tips |
|---|---|
|
Application form |
A container that gives the bounds of the entire application. A connection point in the upper right corner holds Windows button shapes in place. |
|
Dialog form |
A container to hold icons, controls, and text for dialog boxes. A connection point in the upper right corner holds Windows button shapes in place. |
|
Windows button |
Select which button you want to represent using this shape: Close, Maximize, Minimize, or Restore (the buttons that are usually in the upper right corner of applications and dialog forms). You select which button you want when you drop the shape on the form, and you can also right-click the shape and click Button Type to change it later. Change the shading of the button by right-clicking the shape and then clicking Show Active. |
|
Status bar |
A container for Status bar items, icons, and splitters. Status bar items are medium length bars you can add text to by double-clicking. They also have a center connection point for adding an icon, progress bar, slider, or other shape. Status bar icons are short bars with a center connection point that you can drop icons from Common Icons or Web and Media Icons onto. You can drop Status bar splitters between other shapes to make visible divisions. |
|
Scroll bar |
Right-click to designate as vertical or horizontal, and to set the length of the slider (thumb length). Use the yellow control handle to move the slider along the length of the scroll bar. |
|
Resize grabber |
Can be used only in Scroll bars and Status bars. A dialog box appears so you can set the type after you drop it on the page. |
|
Tab bar |
A container for tab items. After you add an Upper tab item or a Bottom tab item, you can add more by right-clicking the tab item or by clicking the blue Insert arrow that appears with the orange highlight when you hold the pointer over a corner of the tab. Change the shading of a tab by right-clicking the shape and then clicking Set Active Tab. When the Tab bar is selected, you can use the Format tab under Container Tools to change the Tab bar style. |
Create toolbars
|
Shape |
Tips |
|---|---|
|
Menu bar |
A container for Menu bar items. After you add a Menu bar item, right-click the item to set the state (such as enabled or selected), the type (normal or drop-down), and whether to add room for an icon. You can also use the shortcut menu to add more Menu bar items, or you can click the blue Insert arrow. |
|
Drop-down menu |
A container for Menu items. After you add a Menu item, right-click the item to set the state (such as enabled or selected), the type (such as normal or radio), and whether to set it to menu width. You can also use the shortcut menu to add more Menu items, or you can click the blue Insert arrow. You can connect a drop-down menu to a Menu bar item to show an open menu. The Menu bar items have connection points in the lower corner that can be connected to the upper corner of a drop-down menu. |
Add controls to forms
|
Shape |
Tips |
|---|---|
|
Hyperlink |
When you drop a Hyperlink shape on the page, the Hyperlinks dialog box appears so you can set the link target. |
|
Button |
Right-click the Button shape to set the state, or appearance, of the Button (for example, enabled or selected). |
|
List box |
A container for List box items. Right-click the List box to set the direction of the list (for example, top to bottom or left to right). After you add a List box item, right-click the item to set the state (such as enabled or selected), and to set placeholders if you want to add extra room to the item, for example to add an icon. You can also use the shortcut menu to add more List box items, or you can click the blue Insert arrow. When the List box is selected, you can use the Format tab under Container Tools to change the List box style. |
|
Checkbox |
Right-click the Checkbox to set the Choice (for example, Selected or Unselected), and the State (such as Enabled or On hover). |
|
Tree control |
A container for Tree control items. After you add a Tree control item, right-click the item to control indentation and to set properties of the tree such as the expanded or collapsed state and placeholder spaces. You can also use the shortcut menu to add more Tree control items, or you can click the blue Insert arrow. When the Tree control is selected, you can use the Format tab under Container Tools to change the Tree control style. |
|
Slider |
Right-click the Slider to set properties such as number and position of tick marks. Use the yellow control handle to move the slider. |
|
Progress bar |
Use the yellow control handle to move the progress indicator. |
|
Calendar |
When you drop a Calendar on the page, a dialog box appears so you can set the month and year. To change the setting later, right-click the shape and then click Configure. |
