Lab09-UI Prototyping

This document provides instructions for creating UI wireframe prototypes using Microsoft Visio. It discusses how wireframes can help visualize a software interface design before development. The steps outlined include opening Visio's Wireframe template, adding common interface elements like dialog boxes, dropdown menus, and buttons to create a prototype print dialog box wireframe. The tutorial encourages designing additional wireframe prototypes, such as for a mobile messaging app's landing page.

Uploaded by

Sharanka Logendiran

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

28 views

Lab09-UI Prototyping

Uploaded by

Sharanka Logendiran

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 4

System Analysis and Design

Lab Session 9
UI Prototyping in Visio - Wireframe

In this lab, you will practice using the Wireframe template of Microsoft Visio for designing user
interface prototypes. There are many other online tools or desktop applications that you may also
use for UI prototyping, some of which are specialised for mobile phone UI design. Among them,
Visio’s Wireframe template is a general prototyping tool.
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.

To begin with, start Visio (a part of MS Office) on your PC.

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.

1
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 right side.

Here is the full set of Wireframe shapes that is included:

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.

2
Once you have created an outline for a wireframe dialog box, you can add elements, such as text
boxes and dropdown menus. We are creating a wireframe for a print dialog box, so the first
dropdown menu should be one in which the user can select the printer from a list of printers.

Adding a Dropdown Menu

First drag the Label shape onto the dialog box. You can use horizontal and vertical guides to help
you position the shape. Next, drag the Drop down shape onto the far right of the Label shape so
that it glues to it. Double-click the Label shape to type the text. In this case, the name of the
printer. Note − This is just a prototype to visualize a dialog box and the menus will not actually
work.

Adding Other Buttons and Controls

Now that one dropdown menu is added, you can continue to add another dropdown menu to
indicate the printer presets. You can also drag a box into the dialog box to designate a document
preview area.

Most print dialog boxes will also have a page setup button to set various attributes of a page and it
makes sense to include one here as well. To add a button, click the Controls category in the
Shapes pane and from the list of shapes, drag the Button shape onto a suitable area on the page.
Double-click the shape to enter text and name it, Page Setup.

You can also add backward and forward arrows as navigation guides under the document preview
pane.

3
You may continue to add as many elements as you wish to get a feel for the prototype. Just
remember not to clutter the wireframe with too many buttons.

Now as an example, try to design a UI prototype for one of the UIs of an IM applications you use
daily on your mobile phone (e.g., the landing page of WhatsApp).

This tutorial is adapted from: https://techcommunity.microsoft.com/t5/Visio-Blogs-Archive/Wireframe-Shapes-in-

Visio-2010/ba-p/237562 and
https://www.tutorialspoint.com/microsoft_visio/microsoft_visio_prototyping_software_using_wireframes.htm