Wireframes

You can use wireframes to design web-based and rich-client applications. A wireframe is a simple line diagram, or schematic, for mocking up user interfaces or web pages.

The diagram editor includes a wireframe palette and themes that you can use to create wireframes. The wireframe palette contains several container-based shapes. The wireframe shapes also have custom properties that you can configure.

The following image shows how you can use wireframe shapes to sketch your ideas:

A wireframe that contains examples of the available palette shapes..

  • In container elements, such as list boxes and vertical menus, you can arrange and organize the contents by dragging the items from one location to another.
  • In tree structures, you can drag items to organize and nest them.

When you create diagrams, you can choose a theme to control the look of the shapes. A theme is available specifically for wireframe. For details, see step 9 in Creating diagrams to support requirements.

When you create a wireframe, you can control how the shapes are rendered by specifying properties for each one. You can also specify the state of a wireframe shape. For example, you can show check boxes as selected or cleared in your wireframe.
Screen capture of the Properties dialog box for a check box shape with the Selected check box enabled.

As with the other diagram palettes, you can use the context menu, or toolbar, to perform various actions on a shape. The following image shows a context menu for a wireframe shape.

Screen capture of the context menu for a selected shape in the wireframe.

In the wireframe palette, most items are single-line text elements, which means that the text you enter in the field does not flow beyond the limits of the field, and it does not wrap to the next line. In these elements, you can press Enter to finish editing. The height of these elements in your wireframe is controlled by the size of the font that you choose.

When you add tables to your wireframe, you can control the line width, header row, and other characteristics by specifying properties for the table. You can select and add rows and columns to a table by using the context menu, and then organize them by dragging them within the table. The following image shows the context menu for a wireframe table.

Screen capture of the context menu for a selected column.