Axure RP

This tutorial guides you through creating an annotated wireframe, generating an interactive

Quick Start
N YOU WILL LEARets: idg

prototype and generating a functional specification using Axure RP. It takes about an hour to complete.

d edit w - How to add an asters create and use m - How to pe and spec nerate a prototy - How to ge interfaces o create dynamic - How t nels with dynamic pa al flow to show condition - How

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

Page 1

Introduction
Lets 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

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

Page 2

Part 1: Designing Wireframes

Step 1: Adding Page Notes

When 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 youd like, you can also format the text using the editor toolbar buttons at the top.

Step 2: Adding Widgets

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

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

Page 3

Step 3: Editing Widgets

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

Step 4: Formatting Widgets

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

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

Page 4

Step 5: Adding Annotations

In 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. Youll see a yellow footnote display in the top right corner of the widget.

Step 6: Adding Basic Links

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.

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

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 wont add any additional actions here, so click OK to close the dialog.

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

Page 6

Part 2: Using Masters

Step 1: Adding Masters

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

Step 2: Editing Masters

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.

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

Page 7

Step 3: Nesting Masters

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

Step 4: Master Behaviors

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.

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

Page 8

Step 5: Adding Masters to Pages

Open the My Account page, and drag and drop the Template master from the Masters pane onto the page. Since its 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.

Step 6: Making Global Changes

Any changes you make to a master apply to every instance of that master. Lets 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, youll notice the change. Next, edit the text My Company Site to something else (we changed it to Log Lady Travel).

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

Page 9

Part 3: Generating Prototypes

Step 1: Generating Prototypes

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

Step 2: Viewing Prototypes

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.

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

Page 10

Part 4: Generating Specifications

Step 1: Generating Specifications

Go to Generate > Specification in the main menu. This opens the Generate Specification dialog with various sections for customizing the output. Click the Generate button.

Step 2: Viewing Specifications

Axure RP generates and launches the specification in Microsoft Word (a .docx file). Scroll through the document and youll see that each page includes page notes, a screenshot, and a table including the annotations and interactions added to widgets on that page.

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

Page 11

Part 5: Adding Dynamic Content and Conditional Flow

Step 1: Using Dynamic Panels

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

Step 2: Editing Dynamic Panels

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.

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

Page 12

Step 3: Hiding Dynamic Panels

You can hide the contents of a dynamic panel by default and use interactions to show, hide, or toggle the panels 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.

Step 4: Communicating Conditional Cases

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.

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

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.

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

Page 14