Book a Demo
Prev Next

User Interaction & Experience

Visualize User Interfaces for Smart Phones, Tablets and Notebooks Using Wireframes

The Wireframe Toolbox pages provide a wide range of icons that you can use in wireframe modeling to represent the appearance of a device at a particular point in the execution of an application. Devices you can model include:

  • Android Phones and Tablets
  • Apple iPhones and Tablets
  • Windows Phones
  • Screen dialogs
  • Web pages - to model how the web pages work

Wireframe Modeling

This collection of images shows a variety of wireframing controls.


Access

On the Diagram Toolbox, click on Search to display the 'Find Toolbox Item' dialog and specify 'Wireframing', 'Android', 'Apple', 'Dialog', 'Windows Phone' or 'Webpage'.

Ribbon

Design > Diagram > Toolbox

Keyboard Shortcuts

Ctrl+Shift+3

Notes

  • Each of the Wireframing Diagram Toolboxes provides one or more Patterns that you can drag onto a diagram as an illustration of what you might achieve, or to act as the basis of the model you are developing
  • The 'Properties' dialog for Wireframe elements automatically opens to either a top-level 'Wireframe' tab on which you can edit the element rendering directly, or a second-level 'Wireframing' Tagged Values tab if you define the element rendering by editing the XML for the properties of that element type
  • Some of the elements you create from the 'Wireframe' Toolbox pages are properly rendered after you edit the Tagged Values that define their characteristics
  • As you develop your Interface diagrams you can establish the positions and layout of the elements freehand by dragging and 'nudging' the elements, or impose some regularity using the 'Snap To Grid' diagram options

Learn more