AXURE: BASIC CONCEPTS What is Axure? Axure Environment Create Annotated Wireframes Understanding Interactions Show/Hide Dynamic Panels Make Global Changes with Masters
AXURE: BASIC CONCEPTS What is Axure? Axure RP is a wireframing, prototyping and specification tool used by user experience designers, information architects, business analysts and product managers to design applications and websites.
AXURE: BASIC CONCEPTS Axure Environment Axure RP’s interface is similar to many desktop applications. It includes menus and toolbars for performing common tasks like opening and saving files and formatting your design.
AXURE: BASIC CONCEPTS 1 1. MAIN MENU & TOOL BAR Perform common actions like opening and saving files, and formatting widgets in a wireframe. Change the selection mode (Select Intersected Mode and Select Contained mode) or switch to connector mode.
AXURE: BASIC CONCEPTS 2 2. WIREFRAME PANE Design your pages in this drag and drop environment with options like snap to grid.
AXURE: BASIC CONCEPTS 3 3. SITEMAP PANE Add, remove, rename, and organize the pages in your design.
AXURE: BASIC CONCEPTS 4 4. WIDGETS PANE Drag and drop widgets like buttons, images, text panels and rectangles to design your page. Create and load custom widget libraries.
AXURE: BASIC CONCEPTS 5 5. MASTERS PANE Add, remove, rename and organize masters to reuse throughout your design.
AXURE: BASIC CONCEPTS 6 6. PAGE NOTES & PAGE INTERACTIONS PANE Add and organize page level notes and page interactions in your design.
AXURE: BASIC CONCEPTS 7 7. DYNAMIC PANEL MANAGER PANE Hide and show dynamic panels. Add, remove, and manage dynamic panel states.
AXURE: BASIC CONCEPTS 8 8. WIDGET PROPERTIES PANE Edit widget annotations, widget interactions and formatting. The Widget Properties Pane organizes the widget annotations, widget interactions and formatting into a tabbed interface.
AXURE: BASIC CONCEPTS ANNOTATIONS Add notes to help clarify functionality. Use default fields like description, status and benefit or click Customize to create your own fields.
AXURE: BASIC CONCEPTS INTERACTIONS Add interactivity to widgets. Add cases to events and open the Case Editor dialog (below) to add actions like links and popups. To add a case, click "Add Case" or double-click an event like OnClick. This opens the Case Editor dialog for configuring actions.
AXURE: BASIC CONCEPTS FORMATTING Edit widget styles and properties. Set location and size, change font styles, group and align widgets. Most of these properties can also be found in the toolbars.
AXURE: BASIC CONCEPTS CASE EDITOR DIALOG Use the Case Editor dialog to configure the actions in an interaction case. Edit the case description in the description field in Step 1. Add one or more actions to a case by clicking on the action in Step 2. The action will be added to the Organize actions tree in Step 3. You can add each type of action multiple times. In Step 3, order or remove actions. Clicking on the down arrow on an action (or control clicking) brings up a context menu to move the action up, down or delete it. Selecting an action in Step 3 brings up its properties in Step 4 Configure actions. Configure the action in Step 4.
AXURE: BASIC CONCEPTS SITEMAP The sitemap is used to add, delete and organize pages in your design. • Add and Delete Pages. • Organize Pages. • Open a Page for Design.
AXURE: BASIC CONCEPTS 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. • 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.
AXURE: BASIC CONCEPTS INTERACTION OVERVIEW You can add a wide range of interactions to your wireframes from basic page links to dynamic behaviors. The interactions you define will work in the generated prototype. Every interaction is made up of: • An Event. • Case(s). • Action(s).
AXURE: BASIC CONCEPTS INTERACTION OVERVIEW (EVENTS) Events are the trigger for an interaction like the click of a button. Different widgets can respond to different events. • OnClick. • OnMouseEnter. • OnMouseOut.
AXURE: BASIC CONCEPTS INTERACTION OVERVIEW (CASES) Cases are the possible paths in response to an event. For example, when a Login button is clicked, one case would be if the login succeeds and another case would be if the login fails.
AXURE: BASIC CONCEPTS INTERACTION OVERVIEW (ACTIONS) Actions are what happens within a case. For example, within the login failed case, there may be an action to display an error message or link to an error page.
AXURE: BASIC CONCEPTS ADD INTERACTION Select a widget to display the events available for that widget in the Widget Properties Pane. To add a case, select an event in the Interactions pane and click "Add Case". You can also double-click on an event to add a case.
AXURE: BASIC CONCEPTS ADD INTERACTION To add actions, check the actions from the list that you would like to perform. To configure the action (i.e., choose which page to link to, choose which widget to affect, etc.), click on the link in the actions description below the list. Click OK button when you are finished defining the case.
AXURE: BASIC CONCEPTS DEFINE MULTIPLE CASES Select a widget, select an event, and click Add Case. Define the case in the Interaction Case Properties dialog. Repeat these steps to add a second case, and any additional cases. When you generate the prototype and trigger the event (click the button), the case descriptions are displayed. Clicking on a description performs that cases actions. (PROTOTIPE VIEW)
AXURE: BASIC CONCEPTS Show/Hide Dynamic Panels Learn the basics of dynamic panels and see how to dynamically show and hide content.
AXURE: BASIC CONCEPTS Show/Hide Dynamic Panels DYNAMIC PANEL WIDGET OVERVIEW ADD AND EDIT DYNAMIC PANEL STATES USING THE DYNAMIC PANEL MANAGER SHOW AND HIDE DYNAMIC PANELS
AXURE: BASIC CONCEPTS DYNAMIC PANEL WIDGET OVERVIEW The dynamic panel widget allows you to demonstrate functionality in your prototype like custom tooltips, lightboxes, and custom tab controls. A dynamic panel can contain one or more states (like layers). Using interactions, you can make the panel visible or hidden as well as set the current visible state.
AXURE: BASIC CONCEPTS ADD AND EDIT DYNAMIC PANELS To add and size a dynamic panel, drag and drop the dynamic panel widget on to the wireframe pane and use the green handles to resize it. The size of the dynamic panel widget determines the boundaries of the contained states. To edit the dynamic panel, double-click the panel to open the Dynamic Panel State Manager dialog. In this dialog, you can add, remove, rename, reorder and edit states. The first state in the panel is the default state of the panel. Select a state from the list of states and click “Edit State” to open it for editing. Once open, you design panel states like any other wireframe by dragging and dropping widgets. The blue dashed outline in the state show the boundaries of the dynamic panel.
AXURE: BASIC CONCEPTS USING THE DYNAMIC PANEL MANAGER To add or remove states, right-click on the dynamic panel name or a state and use the options in the context menu. To hide a dynamic panel from view in the wireframe pane, click on the blue square to the right of the dynamic panel name. To hide all the panels on a page, right-click on the page name and select Hide All. To open a state for editing, double-click the state. To open all the states of a dynamic panel, right click on the Dynamic Panel name and select "Edit All States”.
AXURE: BASIC CONCEPTS SHOW/HIDE DYNAMIC PANELS Once you have a dynamic panel in your wireframe, you can use interactions to dynamically show and hide the panel in the prototype. Add a case to an event and open the Interaction Case Properties dialog (like the OnClick of a button). Select the Show Panel or Hide Panel actions and click on the panel link below to choose the panel(s) to show or hide. Dynamic panels can also be set to be hidden by default. To do this, right click on the dynamic panel in the wireframe and select Edit Dynamic Panel- >Set Hidden. This hides the panel contents and changes the mask for dynamic panels from blue to yellow. This is different than hiding the dynamic panel from view in the editor using the Dynamic Panel Manager.
AXURE: BASIC CONCEPTSMake Global Changes with Masters Learn about masters and how to use them to build reusable assets and save time making global changes.
AXURE: BASIC CONCEPTSMake Global Changes with Masters MASTERS OVERVIEW CREATE AND ORGANIZE MASTERS SET MASTERS BEHAVIORS ADD AND EDIT MASTERS
AXURE: BASIC CONCEPTS MASTERS OVERVIEW Masters are collections of widgets that you can reuse throughout your design. Common elements created as masters include headers, footers, navigation and page templates. A change to a master is reflected everywhere that master is used. You can add masters to pages as well as other masters. Masters can have three different behaviors: • Normal. • Place in background. • Custom widget.
AXURE: BASIC CONCEPTS CREATE AND ORGANIZE MASTERS To create a master, click on the “Add Master” button in the toolbar of the Masters pane, or right- click in the pane and select “Add Master”. Double- click the master to open it for design in the wireframe pane. You can design masters the same way you design your wireframe pages. To organize masters into folders, click the folder icon in the toolbar of the Masters pane. Drag and drop masters into the appropriate folder.
AXURE: BASIC CONCEPTS SET MASTERS BEHAVIOR Right-click on the master in the Masters pane and choose the behavior from the “Behavior” submenu. The behavior of a master can be changed at any time. However, the new behavior only applies to instances of the master added after the behavior was changed. For example, if an instance of the master was added as a custom widget, changing the behavior of the master to Normal does not affect that instance.
AXURE: BASIC CONCEPTS ADD AND EDIT MASTERS To add a master to a wireframe, drag and drop the master from the Masters pane onto the wireframe pane. Depending on the behavior of the master, the instance of the master might have a pink (normal) or grey (place in background) mask. To edit a master, double-click on the master in the Masters pane or on the instance of the master in a wireframe.