Microsoft Visio Series: Creating a Basic Wireframe File

To start the process of creating a wireframe, launch Microsoft Visio. For those that do not know if you have Visio installed, you can check for the application under Microsoft Office folder in your Programs list or within Control Panel > Programs and Features.

Figure 1: Microsoft Windows Start Menu

Once the application has been launched, you will need to select a base template from the categories available on your system or connect to Office.com to view more online templates. For the purposes of this demonstration, we will select the Software and Database template category (Figure 2) and the Wireframe Diagram template (Figure 3). For most users it is ok to leave the units as US Units and click Create.

Figure 2: Visio Template Categories

Figure 3: Software and Database Diagram Templates

This will create your initial file. I would recommend saving this file on your local system under an appropriate name. Ensuring that your AutoRecover feature is on may also help avoid any loss of work in case of a system issue (Figure 4). The AutoRecover feature can be found under File > Options > Save.

Figure 4: Visio Options Menu

For ease of access, it will be helpful for you to ensure that a few handy task panes are displayed on the screen. I recommend the Shapes, Shape Data and Size & Position task panes under the View tab of the ribbon control (Figure 5).

Figure 5: Visio View Tab

In the Shapes task pane, you will notice that the Wireframe template is associated with several preset shape categories, including: Controls, Cursors, Common Icons, and Web and Media Icons. However, I also regularly use Quick Shapes, Dialogs, and Toolbars. To add these additional shape categories to the Shapes task pane, click More Shapes > Software and Database > Software (Figure 6).

Figure 6: More Shapes – Software and Database Shapes

Now we are ready to start creating our wireframe! In the next article of this series, we will cover adding shapes to the diagram as well as manipulating the properties such as the state, orientation and other data.