Test by Stijn Schip

Axure RP

Quick Start

This tutorial guides you through creating an annotated wireframe, generating an interactive prototype and generating a functional specification using Axure RP. It takes about an hour to complete.

YOU WILL LEAidRgeNts:

d edit w - How to add an masters se u d n a e t a e r c - How to ype and spec ot t ro p a e t a r e n - How to ge ic interfaces m a n y d e t a e r c o - How t nels with dynamic pa ional flow it d n o c w o sh o t - How

Page 1

Introduction Let’s Begin To complete this tutorial, you will need to download Axure RP and the Quick Start sample file: www.axure.com/download www.axure.com/quickstart To begin, launch Axure RP. Then, open the AxureQuickStart.rp file using File > Open in the main menu.

Above is a guide to the Axure RP environment

Page 2

Part 1: Designing Wireframes

Step 1: Adding Page Notes

Step 2: Adding Widgets

When you open the file, you will see the Home page in the

In the Widgets pane, scroll through the library and find the Button

Wireframe pane. In the Page Notes tab of the Page Properties

Shape widget--be careful, though! There are two types of buttons in

pane (located below the wireframe), enter the description “This is

this library: the Button widget and the Button Shape widget. What’s

the Home page where users can search for flights or login to their

the difference? The Button widget is a standard gray form button

account.” If you’d like, you can also format the text using the editor

and the styles are fixed. The Button Shape widget, on the other

toolbar buttons at the top.

hand, lets you format styles like fill color, line color, and line pattern. Drag and drop a Button Shape widget onto the Account Login area of the wireframe.

Page 3

Step 3: Editing Widgets

Step 4: Formatting Widgets

In general, double-clicking a widget allows you to edit the

Format widget styles like font size, border color, fill color and font

most commonly-edited property of that widget. Right-clicking

color using the editor toolbar above the wireframe pane, or the

a widget shows a context menu with options to edit additional

Formatting tab of the Widget Properties pane (the tab on the right

widget properties.

with the formatting icon).

To edit the button text, select the widget in the wireframe and

Using the editor toolbar buttons, format the button to look like the

type “Login”. Then, right-click on the widget and choose Edit

one above (bold text, gray fill, and a thick white border).

Button Shape > Rectangle in the context menu. You can also choose other shapes from this menu.

Page 4

Step 5: Adding Annotations

Step 6: Adding Basic Links

In the Widget Properties pane, make sure the Annotations tab is

Now, switch over to the Interactions tab in the Widget Properties

in view (the tab on the left with the note icon). Select the button

pane (the tab in the middle with the lightning bolt icon). Select the

shape widget in the wireframe and name it “Login Button” in the

Label field. In the Description field, add the description, “This

Link Properties dialog, choose the My Account page and click OK.

button validates the login info and takes the user to their My

This adds a case to the OnClick event of the button to open the

Account Page”. You’ll see a yellow footnote display in the top right

My Account page in the current window.

corner of the widget.

Page 5

Step 7: More Interactions On the OnClick event in the Interactions tab, double-click on Case 1. This opens the Case Editor dialog, which includes a list of all the available actions. You can add more than one action to each case (i.e., On the click of a button you can set a variable value and open a new page at the same time). We won’t add any additional actions here, so click OK to close the dialog.

Page 6

Part 2: Using Masters

Step 1: Adding Masters

Step 2: Editing Masters

Use masters to create reusable assets and quickly apply global

Double-click the Footer master to open it for design in the

changes. Some commonly created masters include headers,

Wireframe pane. Design masters by dragging and dropping

footers and navigation.

widgets onto the wireframe (just like you do with pages). Add a Horizontal Line widget and a Text Panel widget. Select the Text

In this file, the Masters pane already includes a “Header” master.

Panel in the wireframe and enter the text, “Copyright, 2011”.

To add a new master, click on the Add Master button in the Masters pane toolbar. Right-click on the new master, choose Rename and name it “Footer” (or, do a slow double-click on the master).

Page 7

Step 3: Nesting Masters

Step 4: Master Behaviors

Add another new master and name it “Template”. Double-click the

There are three behaviors for masters: Normal, Place in

new master and open it for design. You can add masters to other

Background, and Custom Widget. Normal masters have a pink

masters (in other words, “nest” them). Similar to adding widgets,

mask, and you can move and position them anywhere on a

drag & drop the “Header” master from the Masters pane onto the

wireframe. Place in Background masters have a gray mask, and

top of the Template wireframe. Then, drag & drop the “Footer”

snap to the background of a wireframe into the same position they

master onto the bottom.

were created. Custom Widget masters have no masking, and you can edit them like other widgets (similar to a copy/paste). Right-click on “Template” in the Masters pane and choose Behavior > Place in Background.

Page 8

Step 5: Adding Masters to Pages

Step 6: Making Global Changes

Open the My Account page, and drag and drop the “Template”

Any changes you make to a master apply to every instance of that

master from the Masters pane onto the page. Since it’s set to

master. Let’s change the site name and import a logo to replace

Place in Background behavior, it should snap into position and you

the Image widget.

will see a pink (for the Normal masters) and gray (for the Place in Background) mask.

Open the “Header” master. To import an image, double-click on the Image widget in the top left corner. In the file browser, go to the Axure Quick Start folder, and open the file, “logo.jpg”, or an image of your choice. This replaces the Image widget with the new one. If you take a look at both the Home and My Account pages, you’ll notice the change. Next, edit the text “My Company Site” to something else (we changed it to “Log Lady Travel”).

Page 9

Part 3: Generating Prototypes

Step 1: Generating Prototypes

Step 2: Viewing Prototypes

Go to Generate > Prototype in the main menu. This opens the

The prototype launches in your default web browser. The left hand

Generate Prototype dialog with various sections for customizing

frame contains two tabs: the Sitemap tab allows you to navigate

the output. Click the Generate button. When it asks if you would

the pages in your file, and the Page Notes tab allows you to view

like to create a destination folder, choose “Yes”.

any notes added to the current page. Click the yellow note icon next to the Login button to view the annotations you added earlier. Then, click the Login button and it will open the My Account page.

Page 10

Part 4: Generating Specifications

Step 1: Generating Specifications

Step 2: Viewing Specifications

Go to Generate > Specification in the main menu. This opens

Axure RP generates and launches the specification in Microsoft

the Generate Specification dialog with various sections for

Word (a .docx file). Scroll through the document and you’ll see

customizing the output. Click the Generate button.

that each page includes page notes, a screenshot, and a table including the annotations and interactions added to widgets on that page.

Page 11

Part 5: Adding Dynamic Content and Conditional Flow

Step 1: Using Dynamic Panels

Step 2: Editing Dynamic Panels

Whenever you want to show, hide, change, or move objects in

Design panel states by dragging and dropping widgets from the

your prototype, the Dynamic Panel is your go-to widget. Dynamic

Widgets pane. The blue dashed outline indicates the size of the

panels can contain one or more states (similar to layers).

panel and is the boundary for what you can see in the state.

Go back to Axure RP. On the Home page, drag and drop a

Add a Text Panel widget to the dynamic panel state and enter the

Dynamic Panel widget above the Email field in the Account Login

text, “Sorry, dude. Login failed.”. You can change the text color to

area. Double-click the panel and it opens the Dynamic Panel State

red using the editor toolbar at the top.

Manager. Label the panel, “Error Panel” in the Label field, and click the Edit All States button. This opens the state for design.

Page 12

Step 3: Hiding Dynamic Panels

Step 4: Communicating Conditional Cases

You can hide the contents of a dynamic panel by default and

Add multiple cases to any interaction event and use case

use interactions to show, hide, or toggle the panel’s visibility.

descriptions to communicate conditional flow.

Go back to the Home page wireframe. On the dynamic panel,

Select the Login Button and double-click “Case 1” on the OnClick

right-click and choose Edit Dynamic Panel > Set Hidden. This

event. In Step 1: Description, change the case description to read

hides the error message and the Dynamic Panel takes on a

“If Login Succeeds”, and click OK. Then, add a second case to the

yellow mask.

OnClick by clicking “Add Case”. Give this case the description, “If Login Fails”, and choose the action “Show Panel(s)” from the list of actions on the left side of the dialog. In “Step 4: Configure actions”, select “Error Panel”, and click OK.

Page 13

Step 5: In the Prototype Generate the prototype again (Generate > Prototype in the main menu). In the browser, click on the Login Button and it will present two case descriptions. Clicking “If Login Fails” shows the error message. Clicking “If Login Succeeds” takes you to the My Account page. When needed, you can define conditional logic on interactions. The prototype can actually check the values entered for Email and Password, and perform actions based on those values.

More Information To learn more about other features such as conditional logic, variables, and shared projects, head to the online training at www.axure.com/howto. You will find articles, videos and examples on these topics and more.

Page 14