Prev Next

Wire Frame Diagram

Getting to know the Wire Frame Diagram

Aspect

Description

Introducing the Wire Frame Diagram

Wire Framing is a productive tool that can be used to create visually compelling and realistic models of commercially available phones, tablets, screens and web pages. The diagrams assist Business Analysts, Experience Designers and others communicate with stakeholders, allowing them to demonstrate the solution interfaces.

Many stakeholders will understand how a solution is going to work if they can see something concrete and visual. The Wire Framing tool is perfect for this situation where a mock-up of the user interface of a phone, tablet or web page is created including page layout, interface and navigational controls representing different parts of a User Story or Use Case.

Where to find the Wire Frame Diagram

Ribbon: Design > Diagram > Insert > Wireframing > Apple, Android, Dialog, Webpage, Windows Phone Wireframe

Project Browser Toolbar : New Diagram icon >  Wireframing > Apple, Android, Dialog, Webpage, Windows Phone Wireframe

Project Browser context menu | Add Diagram... >  Wireframing > Apple, Android, Dialog, Webpage, Windows Phone Wireframe

Usage of the Wire Frame Diagram

A Business Analyst or Experience Designer will typically create Wire Frame models for the devices that are being targeted in the solution. The interface elements and navigational controls can be connected to other elements in the Repository. For example a drop down list could be connected to a data source indicating the origin of the data. A slide show could also be created to walk a stakeholder through a sequence of diagrams representing the flow through a User Story or Use Case.

Options for the Wire Frame Diagram

There are built in toolboxes for the most common types of devices, including:

  • Android Phones and Tablets
  • Apple iPhones and Tablets
  • Windows Phones
  • Screen Dialogs
  • Webpages

The toolboxes contain elements for the devices, pages and screens and a wide range of controls, widgets and other elements. Tagged Values can be set to hide or display elements of the interface such as phone menu buttons and notification bars.

Diagram Filters can also be used when presenting the diagrams to draw attention to parts of the diagrams, and the diagrams can be presented as hand drawn or in a whiteboard style by changing the properties of the diagram.

Learn more about the Wire Frame Diagram

Wire Framing