• Microsoft Visio Tutorial

Prototyping Software Using Wireframes



Wireframe diagrams are typically used by software developers to prototype the design of the software user interface. Wireframes help to visualize the position and behavior of various elements in the UI before the software can be deployed.

Opening the Wireframe Template

Click the File menu and then click New. In the Templates section, click the Software and Database category and scroll down to select the Wireframe Diagram template.

Wireframe Template

It opens the template for the Wireframe Diagram and the Shapes pane lists all the controls and buttons commonly used in a software UI as shown in the following screenshot.

Toolbars

Creating a Wireframe Dialog Box

In the following example, we will create a wireframe dialog box for the Print command. Click the Dialogs category in the Shapes pane and drag the Dialog form shape onto the canvas. You can resize the default shape as needed. Double-click the header text in the dialog box and type Print. We now have the outer frame for the dialog box.

Wireframe Dialog Box
Advertisements