How to Create GUI in Visio
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.
Things You'll Need
- Microsoft Visio 2010
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 percent 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."
Tips & Warnings
- 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.
- Overly complex drawings can causing Visio to slow down in refreshing a drawing after making a change.
References & Resources
- Microsoft: Visio 2010
- Microsoft: Getting Started with Visio 2010
- Spaanjaars: Sketch and Prototype Tools Review; Part 3; Microsoft Office Visio 2010
- Cunningham & Cunningham: Gui Prototyping Tools
- Smashing Magazine: 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
- YouTube: Visio 2010 Tutorials: Introduction