DISCOVER
×

How to Create GUI in Visio

Updated July 20, 2017

Microsoft Visio 2010 is a graphic design tool that can be used to create diagrams, interface elements, navigation menus and other visual objects. It offers a wide range of tools to create the design of a graphical user interface (GUI). The diagram will show how the application or Web interface will appear in its final form. Developing a GUI in Visio is not too difficult, and designs can be exported as PDF files. Follow a few guidelines to learn how to build a basic GUI wire-frame mockup for a website.

Open Microsoft Visio. Create a new drawing by clicking on the blank drawing icon. Click the "Create" button.

Click the Shapes window on the left side of the screen. Select "More Shapes." Select "Basic Shapes US units." Click "Quick Shapes."

Create a heading box by right-clicking on the rectangle box shape and dragging the shape to the drawing area. Resize the box to cover about 15 per cent of the top area of the drawing.

Create a navigation menu box by right-clicking on the rectangle box shape and dragging the shape below the header box. Resize the box to have a height of about half an inch and the same width as the header box.

Create a large main body box by right-clicking on the rectangle box shape and dragging it below the navigation menu box. Resize the box to have the same width as the header and navigation menu boxes and to cover the bottom of the drawing area.

Create two rectangle boxes by right-clicking on the rectangle box shape and dragging the shape over to the drawing area twice. Resize each box to fit one half of the main body box. Move each box to fit adjacent to each other inside the main body box.

Create text fields representing navigation links by clicking on the "A Text" button in the top of the navigation bar. Select an area inside the navigation box to create a small text field by clicking on the left mouse button. Move the mouse to resize the field to a desired length. Type in text to say "Home."

Create four more text fields by using the left mouse button. Type "Menu Item" in each box. Resize each box to match the size of the "Home" box.

Select an area inside the main header box and create a text field with the description "Main Header."

Create a text box inside each box located inside the main content box area of the drawing. Give each text box a description, such as "Content Area." Resize each text box to be the same size. Select the "Pointer" button on the top navigation menu.

Save the drawing by clicking on "File" from the top navigation menu and selecting "Save as."

Tip

While Visio does not come with GUI prototype stencils or objects, third-party companies do offer such tools for download. If you intend to use Visio to create a collaborative design, keep in mind that the Visio drawing file format is not compatible with most drawing software packages.

Warning

Overly complex drawings can causing Visio to slow down in refreshing a drawing after making a change.

Things You'll Need

  • Microsoft Visio 2010
bibliography-icon icon for annotation tool Cite this Article

About the Author

Bruce Emmerling began writing in 2009 and has professional experience in the fields of computers, usability research and Web development. His educational background includes a Bachelor of Arts in information systems management from the University of Maryland University College and is currently working on a Master of Arts in human-centered computing from University of Maryland, Baltimore County.