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.

image

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.

image

Figure 2: Visio Template Categories

image

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.

image

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).

image

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).

image

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.

Leave a Reply

x

We use cookies to ensure the best possible experience on our website. Detailed information on the use of cookies on this site is provided in our Privacy and Cookie Policy. Further instruction on how to disable our cookies can be found there.