LAB – AXURE RP10 USER INTERFACE

This introductory lab is designed to help you establish a basic familiarity with Axure RP10
user interface (UI) and its rich capabilities. The following concepts will be covered in this lab:

• Getting started and the Axure RP10 Workspace

PART A: GETTING STARTED AND AXURE’S WORKSPACE

Once you open up Axure RP10, you will be presented with an interface as shown in the
followingscreenshot.

On this screen, you have the following options −

• Start a New File in Axure

Let us now create a new file with Axure.

UNIVERSITY OF GREENWICH 1
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema
 LAB – AXURE RP10 USER INTERFACE

When you click the button “New File”, you will be presented with the following screen to create a
new prototype.

As shown in the figure above, the workspace is divided into 6 basic parts.

• Pages [1]
• Outline [2]
• Libraries [3]
• Interactions [4]
• Style [5]
• Design Area [6]

Let us walk through some of those parts in this lab.

PART B: PAGES

This section shows the pages you are working on. These pages will be shown in a default tree
structure, which you can change as per your needs. For doing so, right-click on ‘Page 1’, then you
will be presented with options such as – Add, Move, Delete, Rename, Duplicate etc.

Like most of the different tools available, this section allows you to interact with the pages in your
prototype. You can use it to plan the screens in the intended prototype.

UNIVERSITY OF GREENWICH 2
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema
 LAB – AXURE RP10 USER INTERFACE

PART C: LIBRARIES AND CONTROLS

In the ‘Libraries’ pane [3], most of the controls required for the prototype are available. Typical
controls available in this part of the UI are – Box, Image, Placeholder, Buttons, etc. Axure provides
a rich set of UI controls categorized according to their area of application.

As shown in the figure above, the Libraries pane is categorised in – Default, Flow, Icons, etc.. All
these categories are expanded when you open the application.

Please go ahead and explore the different Library options and Controls available to you before you
proceed to the next part of this Lab.

PART D: DESIGN AREA AND TOOLS

This is your actual playground. This space will be used for creating the prototypes as per your
requirements. To start with, refer to the area highlighted with number [6] in the figure above.

In this area, you can drag and drop your desired controls from the Library. Let us create a quick
menu bar using the library.

1. In the Libraries Pane, scroll down until you find “Default > Menus and Table” and drag the
“Classic Menu – Horizontal” control onto the design area.

2. Once you’ve dragged the control in the design area, you will see the following screen:

UNIVERSITY OF GREENWICH 3
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema
 LAB – AXURE RP10 USER INTERFACE

3. As pointed by the second arrow on the top right, the Style pane shows the properties of the
control. Use this section to create a name for your control for unique identification, when
creating complex prototypes. Let us give a name to this control as “TestMenu”. We will use
this name in the proceeding examples.

Page Properties

When planning for a prototype, it makes sense to have a clear idea of the user, and hence, the
device on which the prototype will be showcased/viewed. For the best experience of interacting with
a prototype, Axure has provided a feature to set the page properties in the Style pane [3].

Click on Page 1 in the ‘Pages Pane’ (left) and view the options in the ‘Style Pane’ (right). The
‘Style’ pane allows you to see the Page Dimensions dropdown and the sub-section Adaptive
Views. The Page Dimensions section deals with the possible output formats for the prototype
(iPhone, Web, Galaxy, etc.). In the dropdown, you can see all supported output formats to configure
the prototype.

With the Adaptive Views section, Axure allows to create different layouts for different screensizes.
Nowadays, designingan experience for one device type is often not sufficient.

The Interactions Pane for Control [3]

The ‘Interactions’ pane is the most critical section in Axure. You can use this pane by clicking on
any control or a page in the design area and click on the tab ‘Interactions’ (right side).
Consider the example of the menu control that we used earlier. Select the menu control named
“TestMenu” and click on the ‘interactions tab’. As you can see under the ‘Interactions’ tab, there
UNIVERSITY OF GREENWICH 4
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema
 LAB – AXURE RP10 USER INTERFACE

is the option to add ‘new interactions’. Click on it and look at the options (Moved, Shown, Hidden,
Loaded). These are specific to the Menu control as a whole. Similarly, if you click on the page in the
design area (i.e. not the menu control) and the ‘new interactions tab’, you will see interactions
available to the page only.

Now, click File from the menu control. You will notice a change in the type of interactions in the
‘Interactions’ pane when you click ‘New Interaction’. Also, it provides flexibility to provide a name
for this menu item.

The ‘Notes’ pane allows you to add certain points to remember, for the control of your choice.

PART E: RULERS, GRID, AND GUIDES

For a prototype with maximum level of quality and precision, the ability to align/position a control
with another control is crucial. For instance, consider you want to show a login popup. If this popup
is to be shown right in the middle of the screen, you need the overall dimensions of the screen. Also,
to align exactly in the middle of the screen, you should have the grids to align it appropriately.

Axure provides the feature of ‘Rulers, Grid, and Guides’, so that you can use your design area
effectively. To see the Rulers, Grid, and Guides available, right-click on the design area [6], and a
context menu will pop up. Now, select ‘Rulers, Grid, and Guides’ and let us understand the options
available.

Rulers – This is pretty straightforward, as it allows you to show the Rulers in the design area. If this
option is already selected “✓”, keep it enabled.

Grid − The next few options shown in the context menu are associated with grids. They are “Show
Grid”, “Snap to Grid”, and “Grid Settings”.

• Show Grid − When Show Grid is enabled, you will be able to see the grid on the design area
as shown in the following screenshot (notice the dots appearing on the design area). This is
very useful in aligning the controls with the other controls on the screen.

UNIVERSITY OF GREENWICH 5
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema
 LAB – AXURE RP10 USER INTERFACE

• Snap to Grid − When Snap to Grid is enabled, the controls will automatically get attached
according to the grids present around. You will be able to see this behaviour when you will
drag a control and it will attach itself to the grid nearby.

• Grid Settings − More settings related to Grids are present in this dialog. Spacing between
the grid, type of a grid, etc. will be available in this dialog. You can select the grids of type
intersection, as per your convenience.

Guides − In this context menu, the options after the second separator are related to the guides. We
will cover the options which are commonly used for Guides.

• Show Global Guides − These guides will be visible when you drag from both the horizontal
and vertical rulers in the design area. Try it for yourself!

• Show Page Guides − Guides are also available at a page level. These guides are created
when you drag them from the vertical and horizontal rulers. They are more common than
Global Guides. Having a page guide increases the flexibility of design at a page-level.

• Show Print Guides − When it comes to designing the pages for different printing output, it
is worthwhile to have the print guides in place. This option enables visibility of print guides,
which will be used to align the objects to fit into a print output.

• Snap to Guides − When arranging the different screen elements in the design area, this
functionality enables the objects to be snapped to the guides. This comes handy when you
place a particular object on the screen and arrange it with respect to the other object.

FINALLY…

This lab has helped you learn how to:

• Get started with Axure’s Workspace

UNIVERSITY OF GREENWICH 6
Tutorial adapted from: https://www.tutorialspoint.com/cgi-bin/printpage.cgi, edited by Fotios Spyridonis and Annemarie Zijlema