You are on page 1of 9

Axure RP Pro

Learn by Doing: Quick Start

Introduction
In less than thirty minutes, this tutorial will guide you through creating a wireframe and generating an interactive prototype
and specification using Axure RP. You will learn:

• How to use widgets


• How to use masters
• How to generate prototypes and specifications
• How to create dynamic interfaces with dynamic panels
• How to show conditional flow

To complete this tutorial, you will need Axure RP (www.axure.com/downloads.aspx) and the sample file QuickStart.rp
(www.axure.com/Samples/QuickStart.rp).

To begin, start Axure RP and open the QuickStart.rp file using File -> Open. The Home page will be open in the
Wireframe Pane.

Above is a picture of the Axure RP environment with labels that will be used in this tutorial.

311 Fourth Ave., Suite 414 San Diego, CA 92101 • www.axure.com • contactus@axure.com • t| 800.895.0810 • f| 415.651.9527
Page 1 © 2002-2008 Axure Software Solutions, Inc
1. Designing Wireframes
ADDING PAGE NOTES

Page level notes can be added to each page


in the Page Notes pane.

When you open the file, the Home page


will open in the Wireframe pane. In the
Page Notes pane, add the description,
“This is the Home page where users
can search for flights or login to their
account.”

ADDING WIDGETS

Design your wireframe by dragging and


dropping widgets from the Widgets pane.

Find the Button Shape widget in the


Widgets pane. Drag and drop a Button
Shape widget to the Account Login
section.

EDITING WIDGETS

Double clicking a widget allows you to edit


the most common property on a widget.

Right-clicking on a widget will display a


context menu with options to edit widget
specific properties.

Double-click the Button Shape and type


“Login” to edit the text.

Right-click on the Button Shape and


select Edit Button Shape -> Rectangle.

Page 2 © 2002-2008 Axure Software Solutions, Inc


FORMATTING WIDGETS

Format widget styles like font size, border


color, fill color, and font color using the
toolbars above the wireframe pane.

Format the Button Shape to have bold


text, a gray fill, and a thicker white border
using these buttons in the toolbar:

ADDING ANNOTATIONS

Annotations can be added to widgets by


selecting a widget and entering values in the
Annotations & Interactions pane. Annotation
fields can be customized by clicking the
Customize link.

Select the Button Shape widget and


label it “Login Button” in the Label field.
Add the description, “This button takes
the user to the My Account page.” in the
Description field.

ADDING BASIC LINKS

Basic links can be added using the Quick


Link shortcut in the Interactions pane.

Select the Login Button and click Quick


Link in the Interactions pane. Then,
select the My Account page and click
OK. Notice in the Interactions pane that
a case has been added to the OnClick
event.

Page 3 © 2002-2008 Axure Software Solutions, Inc


MORE ACTIONS

In addition to basic links, there are many


more Actions available. One or more Actions
can be added to each Case on an Event
(OnClick). For example, you can make the
click of a button open a new page in the
current window and open a popup window
at the same time.

Double-click on Case 1 under the OnClick


event to see the other available Actions.
Click Done.

2. Using Masters
ADDING MASTERS

Masters are collections of widgets that can


be reused throughout your design. Some
commonly created masters include headers,
footers, and navigation. A change to a
master is reflected everywhere the master is
used.

Add a master by clicking on the Add


Master button in the toolbar of the
masters pane. Right-click on the master
and select Rename, and name it “Footer”.
Double-click on the Footer master to
open it for design.

EDITING MASTERS

Masters are designed in the same way as


pages.

Add a Horizontal Line widget and a Text


Panel widget. Select the Text Panel
widget in the wireframe and enter the
text, “Copyright, 2008” .

Page 4 © 2002-2008 Axure Software Solutions, Inc


NESTING MASTERS

Masters can be placed on other pages or


masters by dragging and dropping from the
Masters pane.

Add another master and name it


“Template”. Double-click on Template to
open it for design. Drag Header from the
Masters pane and place it at the top of
the Template master. Then, drag Footer
and place it at the bottom of the Template
master.

MASTER BEHAVIORS

By default, masters are set to Normal


behavior, which allows the master to be
placed anywhere on the wireframe. Masters
set to Place in Background behavior will
snap into the position they were created
when added to a page. Masters set to
Custom Widget behavior will lose their
relationship to the master when added to a
page and can be edited like other widgets.

Right-click on Template in the Masters


pane and select Behavior -> Place in
Background.

ADDING MASTERS TO PAGES

To add a master to a page, drag and drop


the master from the Masters pane to the
wireframe pane.

Add the Template master to the Home


page by dragging it from the Masters
pane and dropping it onto the Wireframe
pane.

Open the My Account page by double-


clicking it in the Sitemap pane, and add
the Template master.

Page 5 © 2002-2008 Axure Software Solutions, Inc


MAKING GLOBAL CHANGES

A change made to a master is reflected


everywhere that master is used.

Open the Header master and change the


image by double-clicking and importing
one from your computer, or replace the
image widget with the Logo master. Then,
open the Home and My Account pages
and notice that the change has been
applied.

3. Generating Prototypes

GENERATING PROTOTYPES

When generating prototypes, there are a


number of options including the destination
folder and which page notes and annotations
to include.

Press the F5 key or select Generate ->


Prototype in the main menu. Click on
the Generate button to generate the
prototype. When asked if you would like
to create the destination folder, click Yes.

VIEWING PROTOTYPES

Axure RP Prototypes are HTML, javascript,


and image files, and can be viewed in
popular web browsers.

The prototype will launch in your web


browser*. You can navigate the pages
using the Sitemap pane on the left. Page
notes display in the bottom frame. Click
on the yellow note icon next to the Login
button to view the annotations. Click the
Login button to link to the My Account
page.
* If you are using Internet Explorer and receive an Active X warning, click
the Allow button. To disable the ActiveX warning, go to Tools->Internet
Options. In the Advanced tab, scroll down to the Security section and
check the box next to “Allow active content to run files on My Computer”.

Page 6 © 2002-2008 Axure Software Solutions, Inc


4. Generating Specifications
GENERATING SPECIFICATIONS

When generating specifications, there are a


number of options including the destination
file, which pages and masters to include,
and which page notes and annotations
to include. You can also customize the
template, such as adding a title page and
editing headers and footers.

Go back to Axure RP. Press F6 or


Generate -> Specification in the main
menu. Click the Generate button to
generate the specification.

VIEWING WORD SPECIFICATIONS

Axure RP specifications are generated


in Microsoft Word format complete with
screenshots, annotations, and interactions.

A Microsoft Word 2007 (.docx) file will be


created. The Office Compatibility Pack
installed with Axure RP allows you to view
and edit those files in earlier versions of
Word.

Scroll through the document. Each page


includes the page notes, a screenshot of
the page, and a table that contains the
annotations and interactions for the page.

Page 7 © 2002-2008 Axure Software Solutions, Inc


5. Creating Dynamic Interfaces and Conditional Flow

USING DYNAMIC PANELS

The Dynamic Panel widget allows you to


demonstrate dynamic functionality in the
prototype. Dynamic Panels can contain one
or more states. Actions are available to hide,
show, and change the state of Dynamic
Panels.

Go back to Axure RP. On the Home Page,


drag and drop a Dynamic Panel widget
above the Email field in the Account
Login section. Double-click on the
Dynamic Panel to open the Dynamic
Panel State Manager. Label the panel
“Error Panel” in the Dynamic Panel Label
field and click the Edit All States button.

EDITING DYNAMIC PANELS

Once open, panel states can be designed


like pages and masters by dragging and
dropping widgets from the Widgets pane.
A blue dashed outline on the wireframe
indicates the boundaries of the dynamic
panel.

Add a Text Panel widget and enter the


text “Login failed. Please try again.”

HIDING DYNAMIC PANELS

Dynamic Panels can be set to hidden by


default. This will hide the panel contents
which can then be dynamically shown using
interactions.

Go back to the Home page. Right-click


on the Dynamic Panel and select Edit
Dynamic Panel -> Set Hidden.

Page 8 © 2002-2008 Axure Software Solutions, Inc


CREATING MULTIPLE CASES

Multiple cases can be added to an Event to


communicate conditional flows.

Select the Login Button and double-click


on Case 1 on the OnClick event in the
Interactions pane. In Step 1: Description,
add the description “If Login Succeeds”
and click Done.

Then, add a second case by selecting the


OnClick event and clicking Add Case. In
Step 1: Description, add the description
“If Login Fails”, and in Step 2: Select
Actions, select “Show Panel(s)”. Click on
the blue link for “panel” in Step 3 below,
and select “Error Panel”.

Generate the prototype by pressing F5


and click the Generate button.

Click the Login button, and you will see in


the browser the descriptions for the two
cases. Clicking If Login Fails will show
the error message, and clicking If Login
Succeeds will link you to the My Account
page.

Conditional logic can also be added to


Cases to check the data entered in the Email
and Password fields and respond without
showing case descriptions. Visit www.axure.
com/expert.aspx for more on conditional
logic.

More Information
This concludes the Quick Start tutorial. Other features in Axure RP include conditional logic, storing
data in variables, and shared projects for collaborating on files. Please visit the online training at
www.axure.com/expert.aspx for articles and videos on these topics and more.

Page 9 © 2002-2008 Axure Software Solutions, Inc