test

© 2002-2011 Axure Software Solutions, Inc. All rights reserved.

Axure RPQuick 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 LEARN:

- How to add and edit widgets

- How to create and use masters

- How to generate a prototype and spec

- How to create dynamic interfaces

with dynamic panels

- How to show conditional flow


Introduction

Let’s BeginTo 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


Part 1: Designing Wireframes

Step 1: Adding Page Notes Step 2: Adding WidgetsWhen you open the file, you will see the Home page in the

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

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

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

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

toolbar buttons at the top.

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

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

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

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

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

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.


Step 3: Editing Widgets Step 4: Formatting WidgetsIn general, double-clicking a widget allows you to edit the

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

a widget shows a context menu with options to edit additional

widget properties.

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

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

Button Shape > Rectangle in the context menu. You can also

choose other shapes from this menu.

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

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

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

with the formatting icon).

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

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


Step 5: Adding Annotations Step 6: Adding Basic LinksIn the Widget Properties pane, make sure the Annotations tab is

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

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

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

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

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

corner of the widget.

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

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

Login Button and click Quick Link in the Interactions tab. In the

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

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

My Account page in the current window.


Step 7: More InteractionsOn 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.


Part 2: Using Masters

Step 1: Adding Masters Step 2: Editing MastersUse masters to create reusable assets and quickly apply global

changes. Some commonly created masters include headers,

footers and navigation.

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

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

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

Wireframe pane. Design masters by dragging and dropping

widgets onto the wireframe (just like you do with pages). Add a

Horizontal Line widget and a Text Panel widget. Select the Text

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


Step 3: Nesting Masters Step 4: Master BehaviorsAdd another new master and name it “Template”. Double-click the

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

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

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

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

master onto the bottom.

There are three behaviors for masters: Normal, Place in

Background, and Custom Widget. Normal masters have a pink

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

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

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

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.


Step 5: Adding Masters to Pages Step 6: Making Global ChangesOpen the My Account page, and drag and drop the “Template”

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

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

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

Background) mask.

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

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

the Image widget.

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


Part 3: Generating Prototypes

Step 1: Generating Prototypes Step 2: Viewing PrototypesGo to Generate > Prototype in the main menu. This opens the

Generate Prototype dialog with various sections for customizing

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

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

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

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

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

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.


Part 4: Generating Specifications

Step 1: Generating Specifications Step 2: Viewing SpecificationsGo to Generate > Specification in the main menu. This opens

the Generate Specification dialog with various sections for

customizing the output. Click the Generate button.

Axure RP generates and launches the specification in Microsoft

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

that each page includes page notes, a screenshot, and a table

including the annotations and interactions added to widgets on

that page.


Part 5: Adding Dynamic Content and Conditional Flow

Step 1: Using Dynamic Panels Step 2: Editing Dynamic PanelsWhenever you want to show, hide, change, or move objects in

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

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

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

Dynamic Panel widget above the Email field in the Account Login

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

Manager. Label the panel, “Error Panel” in the Label field, and

click the Edit All States button. This opens the state for design.

Design panel states by dragging and dropping widgets from the

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

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

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

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

red using the editor toolbar at the top.


Step 3: Hiding Dynamic Panels Step 4: Communicating Conditional CasesYou can hide the contents of a dynamic panel by default and

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

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

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

hides the error message and the Dynamic Panel takes on a

yellow mask.

Add multiple cases to any interaction event and use case

descriptions to communicate conditional flow.

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

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

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

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.


Step 5: In the PrototypeGenerate 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 InformationTo 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.

test

Documents

button widget

button shape widget

login button

widget properties pane

button text

format widget styles

additional widget properties

page properties pane