Create Annotated Wireframes
Learn to create and organize your pages, design using widgets, and annotate your wireframes.
Contents
Sitemap
Add and Delete Pages
Organize Pages
Open a Page for Design
Widgets
Choose a Widget Library and Search for Widgets
Add, Move, and Size Widgets
Edit Widget Styles and Properties
Work with Multiple Widgets
Change Selection Modes
Annotations
Add Annotations
Customize Annotation Fields
Renumber Footnotes
Page Notes
Add Page Note
Add Notes Fields
Video
Annotated Wireframes (3:46 min)
Sitemap
The sitemap is used to add, delete and organize pages in your design.
Add and Delete Pages
To add a page, click on the “Add Child Page” button in the sitemap toolbar.
To rename a page, do a slow double-click on the page or press F2.
To delete a page, select it and click the “Delete Page” button in the sitemap toolbar.
You can also add, rename and delete pages using the context menu shown when you right click on a page.
Organize Pages
Drag and drop pages in the sitemap or use the arrow buttons in the sitemap toolbar to move pages in the sitemap.
Open a Page for Design
Double click on a page to open it for design in the wireframe pane.
Widgets
Widgets are user interface objects for designing your wireframes. The widgets pane contains a library of commonly used objects such as buttons, images and text panels.
In addition to the default set of widgets, you can create and edit your own custom widget libraries and load them in the widgets pane. To learn more about custom widgets visit Custom Widget Libraries.
Choose a Widget Library and Search for Widgets
To select a library click on the dropdown menu and choose the library. The widgets in that library will display in the widgets pane. To view all the widgets in all of the loaded libraries select “All Libraries”.
To search across the current library, click the search icon and type into the text field.
Add, Move, and Size Widgets
To add a widget, drag and drop the widget from the Widgets pane onto the wireframe pane. You can also copy (Ctrl+C) and paste (Ctrl+V) widgets from one wireframe to another.
To move a widget, drag and drop them into place or use the arrow keys.
To size a widget, drag the green handles that surround the widget or use the Location and Size pane (select View->Location and Size if not visible) to specify the exact location and size.
You can also select multiple widgets to move and size them at the same time.
Edit Widget Styles and Properties
There are several ways to edit the styles and properties of widgets:
Double-click: Double-click the widget to edit the most commonly edited property of that widget. For example, double clicking on an image widget opens a dialog to import an image.
Toolbars: Use the buttons in the toolbar above the wireframe pane to edit widget styles like font name, size, style, text color, fill color, line color etc.
Context menu: Right-click on a widget to display the context menu with additional widget-specific properties. These properties vary depending on the widget.
In the Mac version, you can also use the Formatting Tab to edit widget styles and properties.
Work with Multiple Widgets
Select the widgets and right-click to use the context menu to group, order, align, distribute or lock widgets. You can also use the toolbar buttons above the wireframe pane to perform these actions. Select View->Toolbars->Object if the toolbar is not visible.
You can edit a widget within a group without affecting the others in that group by selecting the group and clicking on the desired widget.
Change Selection Modes
There are two selection modes in Axure RP, "Select Intersected Mode" and "Select Contained Mode". "Select Intersected Mode" is the default. When you create a selection area by clicking and dragging your cursor, any widget that is intersected by the selection area will be included.
The "Selected Contained Mode" is similar to Visio and only selects the widgets entirely contained in the selection area. To change to the “Select Contained Mode”, click the Select Contained Mode button in the toolbar or press Ctrl+F9. To switch back to the default mode click the “Select Intersected Mode” or press F9.
Annotations
Annotations allow you to add notes to your widgets and can be used to clarify functionality in your design. Widgets that have annotations or interactions have a yellow numbered footnote displayed in the top right corner of the widget.
Add Annotations
Select a widget in the wireframe pane and type your notes into the fields in the *Annotations and Interactions pane to the right.
*In the Mac version, the Annotations and Interactions pane is called the Widget Properties pane.
Tip: Name your widgets in the Label field at the top of the Annotations and Interactions pane. This is helpful when you add interactions to your design that affect those widgets.
Customize Annotation Fields
Click Wireframe->Customize Annotations Fields and Views in the main menu or click the “Customize” link in the Annotations and Interactions pane to open the Customize Fields and Views dialog.
Renumber Footnotes
Right-click on the widget and select Footnotes->Decrement/Increment Footnote or use the keystrokes Ctrl+D (increment) and Ctrl+Q (decrement).
You can also type a footnote number in the footnote field at the top of the Annotations and Interactions pane. The number must be less than the total number of widgets with footnotes.
Page Notes
Page notes allow you to collect page level information about your design. You can organize page notes into separate fields. For example, you may want to separate notes for different audiences like clients, developers, or testers.
Add Page Notes
Type your page notes in the area below the wireframe pane.
Add Notes Fields
Click Wireframe->Manage Page Notes in the main menu, or click on the down arrow next to the “Page Notes” header, and select Manage Notes. Add, remove, rename and reorder your notes fields in the Page Notes dialog.
To switch between notes fields, click on the down arrow next to “Page Notes” and select the appropriate field.
Summary
Now, you can create and organize pages, design using widgets and annotate your wireframes. Next up, adding interactions. If you need a little more help, email us at support@axure.com.
