Axure Basic Concepts

AXURE: BASIC CONCEPTS

What is Axure?
Axure Environment
Create Annotated Wireframes
Understanding Interactions
Show/Hide Dynamic Panels
Make Global Changes with Masters


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 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.


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.


2

2. WIREFRAME PANE
Design your pages in this drag and drop environment with options like snap to
grid.


3

3. SITEMAP PANE
Add, remove, rename, and organize the pages in your design.


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.


5

5. MASTERS PANE
Add, remove, rename and organize masters to reuse throughout your design.


6
6. PAGE NOTES & PAGE INTERACTIONS PANE
Add and organize page level notes and page interactions in your design.


7

7. DYNAMIC PANEL MANAGER PANE
Hide and show dynamic panels. Add, remove, and manage dynamic panel
states.


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.


ANNOTATIONS
Add notes to help clarify functionality. Use default
fields like description, status and benefit or click
Customize to create your own fields.


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.


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.


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.


How to create and organize pages, design using
widgets, and annotate the wireframes.


SITEMAP
WIDGETS
ANNOTATIONS
PAGE NOTES


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.


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.


ANNOTATIONS
Add Annotations.

Customize Annotation
Fields.

Renumber Footnotes.


PAGE NOTES
Add Page Notes.

Add Notes Fields.


How to use events, cases and actions to add
interactivity to your wireframes.


INTERACTIONS OVERVIEW
ADD INTERACTIONS
DEFINE MULTIPLE CASES


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).


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.


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.


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.


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.


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.


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 case's actions.

(PROTOTIPE
VIEW)


Learn the basics of dynamic panels and see how
to dynamically show and hide content.


DYNAMIC PANEL WIDGET OVERVIEW
ADD AND EDIT DYNAMIC PANEL STATES
USING THE DYNAMIC PANEL MANAGER
SHOW AND HIDE DYNAMIC PANELS


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.


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.


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”.


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.


Learn about masters and how to use them to
build reusable assets and save time making
global changes.


MASTERS OVERVIEW
CREATE AND ORGANIZE MASTERS
SET MASTERS BEHAVIORS
ADD AND EDIT MASTERS


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.


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.


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.


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.

Axure Basic Concepts

More Related Content

What's hot

Viewers also liked

Similar to Axure Basic Concepts

Recently uploaded

Axure Basic Concepts