A step-by-step guide to help get you familiar with Axure RP.

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.

In this tutorial, you will learn:

          - How to add and edit widgets

          - How to create and use masters

          - How to generate a prototype and specification

          - How to create dynamic interfaces with dynamic panels

          - How to show conditional flow

To complete this tutorial, you will need to download Axure RP and the Quick Start sample file.

To begin, launch Axure RP. Then, open the AxureQuickStart.rp file using File > Open in the main menu. Below is a guide to the Axure RP environment.

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 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 on to the Account Login area.

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.

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

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

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.

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)

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

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.

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.

Open 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 behavior masters) and gray (for the Place in Background behavior) 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”).

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

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.

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.

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.

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.

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.

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

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.

Still need help? Check out the forum or drop us a line at support@axure.com.

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

The Round Up

(AxureQuickStart.zip)

This zip file contains the sample file, a logo file, and a PDF version of this tutorial.

To learn more about other features such as conditional logic, variables, and shared projects, head to the online training.

Walkthrough Axure RP

Quick Start

Introduction

Let's Begin

Part 1: Designing Wireframes

Step 1: Adding page notes

Step 2: Adding widgets

Step 3: Editing widgets

Step 4: Formatting widgets

Step 5: Adding annotations

Step 6: Adding basic links

Step 7: More interactions

Part 2: Using Masters

Step 1: Adding masters

Step 2: Editing masters

Step 3: Nesting masters

Step 4: Master behaviors

Step 5: Adding masters to pages

Step 6: Making global changes

Part 3: Generating Prototypes

Step 1: Generating prototypes

Step 2: Viewing prototypes

Part 4: Generating Specifications

Step 1: Generating specifications

Step 2: Viewing specifications

Part 5: Adding Dynamic Content & Conditional Flow

Step 1: Using dynamic panels

Step 2: Editing dynamic panels

Step 3: Hiding dynamic panels

Step 4: Communicating conditional cases

Step 5: In the prototype

Back to Tutorials

Online Training Home