Axure 

RP Pro  Lab Tutorial 
 
Introduction 
 
Axure  RP Pro is a wireframing​
, rapid prototyping​ , documentation and specification software tool 
aimed  at  web  and  desktop  applications.  It  offers  drag  and  drop  placement,  resizing,  and 
formatting of widgets. 
 

Features 
Axure  supports  prototyping  Rich  Internet  Applications  by   mapping  desired  interface  behaviors 
(such  as  displaying  or   hiding  an  element)  in  response  to  actions  like  mouse  clicks  or  touch 
[2]​
gestures.​  Axure RP generates HTML web sites and​  Microsoft Word​  documents as output. 
The Axure RP Pro application window is divided into 7 main areas: 
● sitemap ­ a hierarchical list of pages 
● widgets 
● masters (templates, or reusable collections of widgets) 
● design area 
● page notes and interactions 
● widget annotations and interactions 
● widget manager ­ a list of all elements on the page 
 
Widgets available include: 
● wireframe​ :  image,  text  panel,  hyperlink,  rectangle,  table,  line  (horizontal/vertical), menu 
(horizontal/vertical), tree 
● form  controls​ :  button  (various  shapes,  including   tab  buttons),  text   field,   textarea,  
dropdown list, list box, checkbox, radio button 
● placeholder, inline frame, dynamic panel (used to achieve interactivity) 
 
Users  create  custom  controls  by  combining  existing   widgets  and  assigning  actions  in response 
to  events  such  as  OnClick,  OnMouseOver   and  OnMouseOut  or  touch  gestures  like  pinch  and 
swipe.   For   example,  interface  panels  can  have  a  number  of  states,  each  being  activated  by 
clicking on an element such as a tab button, list­box item, or action button. 
 
 
 
 
 

 
 
When you open Axure you can get a window like below, 

 
 
 
select Widgest and take images icon to backgroud the dobule click image icon. 

 
 
 
 
 
 
 
 
 
 
1 
select a picture from the folder as follows, 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
You will get a picture as follows and resize that picture. 

 
2 
 
 
Put a Frame to the picture by taking Rectangle icon from widgets 

 
3 
After putting frame send the frame to back of the picture 

 
 
You can see the picture with frame 

 
4 
Exercise 01  
In this Exercise, you have to create a prototype for a phone shop. Here you have to design 3 
pages named as Login, Registration and ViewDetails. And also you have insert relevant image 
all three pages. In Home page you should add hyperlink to login page.See the Homepage 
image as follows. 

 Login page should look like as follows.In Login page you should add two hyperlinks to 
Registration page  and login page. 
 

 
5 
Registration page should look like as follows 

 
viewDetails page should look like as follows 
 

 
6 
Then select the submit button and go ​
onclick​
 event on your right hand side. Then double click 
on it. 

 
Then You can see the new Dialog box as follows. and double click on case1. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7 
Then you have to select the as follows and type the username as “abc”. 

 
Then press the plus sign and select the things as follows and enter the password as “123”.Then 
Press OK. 

 
 
Then you can see the changes which has given to username and password as follows. 
 
 
 

 
8 
Then go to open link under Links on your left hand side.and select the response page as 
Registration page as follows.Then click OK. 

 
 
Finally run the prototype which you created using Preview button or F5.See the below figure. 
 
 

 
9 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
The Output can be seen as follows. 

 
10