1. Annotated Wireframes Demo
Please turn on speakers for audio
To view in HD on Vimeo, please click here.
2. Sitemap
The sitemap is used to manage the pages in your design. In the Sitemap pane, you can add, delete and organize the pages.
Adding and Deleting Pages:
To add a page, click on the "Add Child Page" button in the sitemap toolbar.
Right-click on the page and select "Rename Page" or do a slow double-click on the page to edit the page name.
To delete a page, select it and click the "Delete Page" button in the sitemap toolbar or right-click and select "Delete Page".
Organizing Pages:
Pages can be moved around the sitemap by dragging a page in the sitemap and dropping it on the target parent page. You can also use the arrow buttons in the sitemap toolbar to move pages up, down, indent, and outdent.
Opening a Page for Design:
Double-clicking on a page in the sitemap will open it for design in the wireframe pane.
3. Widgets
Widgets are user interface elements used to design the wireframes. The Widgets pane contains a library of commonly used wireframe widgets such as buttons, images, and text panels.
Add Widgets to a Wireframe
To add a widget to a wireframe, drag and drop the widget from the Widgets pane onto the wireframe pane.
Widgets can also be copied (Ctrl+C) from one wireframe and pasted (Ctrl+V) onto another.
Working with Widgets
After widgets are added to a wireframe, they can be moved by dragging and dropping them and sized by dragging the handles that surround the widget when it is selected. Multiple widgets can be selected, moved and sized at one time.
In addition, widgets can be grouped, ordered, aligned, distributed, and locked. These can be applied by right-clicking on the widgets and using the context menu. They can also be applied using the Object toolbar which can be made visible using View->Toolbars->Object.
Editing Widget Styles and Properties
There are a several ways to edit the styles and properties of widgets:
- • Double Clicking: Double clicking the widget allows you to edit the most commonly edited property of that widget. For example, double clicking an Image widget lets you import an image, and double clicking a Droplist or List Box widget lets you edit the option items.
- • Toolbars: Edit widget styles like text size, border color, fill color, and font color.
- • Context Menu: Right clicking on a widget will display a context menu with options to edit widget specific properties. Those properties vary from one widget type to another.
4. Annotations
Annotations can be added to any widget to clarify functionality.
Adding Annotations
To add annotations, select a widget on the wireframe and edit the field values in the Annotations and Interactions pane. Labels can also be given to widgets using the Label field at the top of the pane.
Customizing Fields
The annotation fields are customizable and can be edited by clicking Wireframe->Customize Annotation Fields and Views in the main menu or clicking on the "Annotations & Interactions" header.
Footnotes
Once an annotation has been added to a widget, the widget will be given a Footnote number indicated in a yellow box next to the widget. The Footnote number can be incremented or decremented by right-clicking on the widget and using the Footnote submenu or editing the Footnote field at the top of the annotations and interactions pane.
5. Page Notes
Page notes can be used to collect page level descriptions or requirements.
Adding Page Notes
Page notes are captured in the pane below the wireframe.
Managing Page Notes
Additional notes fields can be added to better organize notes for different stakeholders and team members.
To edit the notes fields, click Wireframe->Manage Page Notes in the main menu or click on the down arrow next to "Page Notes - Default" and select "Manage Page Notes". The Page Notes dialog will appear. Using the dialog, you can add, remove, rename, and reorder the notes fields.
To switch between notes fields, click on the down arrow next to "Page Notes - Default" and select the field to add notes to.