As with any structure, the foundation is critical for stability. Having a solid understanding of Axure's environment and interface provides us with a solid foundation. Once you are familiar with specific aspects of the environment, you will be able to rapidly create interactive prototypes. The interface comprises the main menu, a toolbar, a sitemap, the design area, and several panes.
In this chapter, you will learn about:
The environment and interface
Please open a blank Axure document so we can familiarize ourselves with the tool. In future, this chapter can serve as a quick reference for Axure interface elements. More advanced users may want to skim this section as a refresher.
When you open a blank Axure document, the interface looks like this:
The preceding screenshot depicts the Mac version of Axure RP. The PC version may differ slightly in appearance.
File: This provides us with options such as New for creating new RP files, Open, Save As, and Import from RP File, and also allows us to print, export, backup, and recover.
Edit: This menu facilitates options such as Cut, Copy, Paste, Find, and Replace.
Arrange: This menu has options such as Group, Ungroup, Bring to Front, Send to Back, and alignment (for example, left, right, center, and so on). It also covers options for grids and guides.
Publish: This menu facilitates us with the new Preview option that enables quickly viewing your prototype, the Generate HTML Files option, and the option to generate specifications. It also has the More Generator and Configuration option.
Team: Team projects allow you to share and work on single projects in a team environment. Items in this menu are Generate Team Project from Current File, Get and Open Team Project, and Browse Team Project History.
Window: This covers the Minimize and Zoom options.
Help: This menu will have options to search, access Axure forums, manage license keys, and check for updates.
Selection mode: Intersected Mode, Contained Mode, and Connector Mode
Zoom: A dropdown to set the default zoom level
Publishing: Preview your prototype, AxShare (for example, publish your prototype to Axure's cloud-based sharing service), and options from the Publish menu
Arrangement of widgets: Group, Ungroup, Front, Back, Align, Distribute, and Lock and Unlock widget positions
Interface layout: Left or Right. Click on this to toggle (show or hide) left and right panes
Dropdown for selected widget style
Widget style editor
Font formatting options (for example, font family, typeface, size, bold, italics, underline, color, bulleted list, and insert text link)
Text alignment (for example, left, center, right, top, middle, and bottom)
Line options (for example, color, width, pattern and arrow style)
Widget location and visibility (for example, coordinates (x,y), w: for width, h: for height, and hidden)
In the center of the interface is the design area. The design area is where you open pages, and drag and drop widgets to build your interface. The design area is surrounded to the left, right, and bottom by panes. The panes are organized as follows:
The left-side column contains the following panes:
Sitemap: The Sitemap pane provides a hierarchical overview of the pages in your design.
Widgets: The Widgets pane shows widget libraries that enable us to rapidly create wireframes and flow diagrams.
Masters: The Masters pane organizes templates that can be reused throughout your design. Common uses for masters are page elements such as headers and footers.
Under the design area, the bottom-center column contains the page properties pane, which has the following three tabs:
The right-side column contains the following panes:
Widget Interactions and Notes: The Widget Interactions and Notes pane has two tabs: Interactions and Notes (in the Axure RP Pro version)
Axure is available in two versions: Standard and Pro. The Pro version includes additional functionality such as documentation and team projects. Learn more at http://www.axure.com/compare.
Traditionally, a sitemap provides a top-down view of the pages for a website. In Axure, the Sitemap pane can comprise pages and folders organized in a hierarchical fashion. Just under the toolbar, you will find the Sitemap pane.
In the Sitemap pane, you will notice (4) next to Sitemap. This number indicates the total number of pages currently in the Sitemap pane.
Icons of the pages highest in the hierarchy are left justified. When a page becomes a parent page by having a child page association, a grey arrow is shown to the left of the page icon. The gray arrow enables you to collapse or view pages in that branch of the hierarchy.
Another method is to click and drag the page to the right, and drag up or down if you need to move the page. You will see a blue box appear around the page that will become the parent page.
You can also create child pages by right-clicking on the parent page, moving the cursor over Add, and then clicking on Child Page, as shown in the following screenshot:
Pages can be opened in the design area by double-clicking on the page name or icon in the Sitemap pane. Masters are also opened in the design area by double-clicking on the master name or icon in the Masters pane (bottom-left). When a page or master is opened in the design area, a tab will be added to the top of the design area with the name of the page or master (for example, double-clicking on the Home page in the Sitemap pane will display that page in the design area in a tab named Home.)
When you open more than one page or master, the tabs will remain available in the design area until you choose to close the tab. Inactive tabs will be colored gray and the active tab will be white as shown:
When placing widgets in the design area, you may prefer having a grid to use as a visual reference. To show the grid, right-click in the design area, mouse over Grid and Guides and click Show Grid as shown:
You can also add page guides to pages in your design. You can select from preset guides or add single page guides. To add page guides, right-click in the design area, mouse over Grid and Guides and click on Create Guides. In the Create Guides dialog window, click on the Presets dropdown to select from the following options:
960 Grid: 12 Column
960 Grid: 16 Column
1200 Grid: 12 Column
1200 Grid: 15 Column
You can also create custom guides by changing the default values offered in the Create Guides dialog window. The options presented are as follows:
By default, guides are created as global guides. To create a guide just for the current page, uncheck the checkbox next to Create as Global Guides.
To create a single guide, click on the left or top ruler, and drag the guide onto the wireframe.
To reposition a guide, click and drag the guide to the new position.
By default, single guides are blue and only appear on the current page. To make a global single guide that will be shown on all pages, hold down the Command key on a Mac (or the Ctrl key on Windows) while clicking and dragging the guide onto the wireframe. By default, global single guides are pink.
Guides can easily be removed as well. To remove a single guide, click on the guide and press Delete.
To remove all guides, right-click on the design area, mouse over Grids and Guides, and select Delete All Guides.
The Widgets pane allows you to view and use common interface objects also known as widgets (for example, Image, Button Shape, Rectangle, and so on) in your design. Widgets are organized into custom libraries that can be shared and loaded into the Widgets pane.
In the Masters pane, you will notice (1) next to Masters. This number indicates the total number of masters available in the opened Axure project file.
The Masters pane contains all of the masters available in an RP file. Masters can range from a single widget to a collection of widgets (including interactions) used in your design. In most cases, masters enable you to make changes or updates in a single place. When you update a master, each page that contains the master will be updated as well.
Masters have three types of drop behavior (that is, the master's default behavior for location when placed on the wireframe). Possible drop behavior options are as shown:
There are three default events: OnPageLoad, OnWindowResize, and OnWindowScroll. Click on More Events to display the additional events shown earlier.
You can use the default page style or define your own custom page styles. The Page Align property allows you to left or center align the page (applies to HTML only). You can also set the back color, back image, horizontal alignment, vertical alignment, and whether the back image repeats itself. Sketch effects can also be applied to give the page a handwritten feel.
Learn more about page formatting at https://www.axure.com/learn/basic/page-style.
The Widget Interaction and Notes pane has two tabs: Interactions and Notes. The Interactions tab presents interaction options based on the widget selected. An example from an Image widget is shown as follows:
The Widget Properties and Style pane has two tabs: Properties and Style. The Properties tab presents interaction options based on the widget selected. An example from an Image widget is shown as follows:
Interaction styles refer to a widget's visual appearance as a result of an interactive event. For example, we can define different styles when a widget is selected or disabled. We also can define styles for MouseOver and MouseDown events.
Some widgets will have additional styles and properties. For example, an Image widget's Widget Properties and Styles pane has slice (looks like a fountain pen) and crop buttons. The Widget Properties and Styles pane for a Paragraph widget would not require this functionality.
Learn more about individual widgets and styles at https://www.axure.com/learn/basic/widgets.
Location + Size
Borders, Lines + Fills
Alignment + Padding
The Style tab is shown as follows:
With a widget selected in the design area, we can also access individual widget styles in the Editor toolbar. We can create custom widget styles as well. Under the Base Style dropdown, by using the Widget Style Editor (available by clicking on the icon), you can create custom widget styles as well. Visit https://www.axure.com/learn/basic/widgets to learn more.
The following is an example Widget Manager with two dynamic panels labeled Panel 1 and Panel 2:
Next to the dynamic panel labeled Panel 1, there is a blue rectangle. This indicates that the default for Panel 1 is Show in view. In contrast, next to the dynamic panel labeled Panel 2, there is a gray rectangle. This indicates that the default for Panel 2 is Hide from view. Clicking on the icon will toggle the state.
Axure RP 7 and beyond allow us to create adaptive prototypes with less effort than the previous versions. This is accomplished through a new feature called Adaptive Views. Adaptive Views enable us to create variations of a given screen design. Design variations are optimized for each breakpoint associated with the Adaptive View. Breakpoints are defined based on the browser window's width and/or height in pixels.
If available, we can refer to analytics for our website or application to determine the appropriate width and height to set our breakpoints. When we add an Adaptive View, we are given the opportunity to define new views based on width and/or height, or select from five presets. The preset options are as follows:
Large display (1200 x any and above)
Landscape tablet (1024 x by any and below)
Portrait tablet (768 x any and below)
Landscape phone (480 x any and below)
Portrait phone (320 x any and below)
Adaptive Views inherit properties from the parent or base view. The initial design will be created in the base view (or default view). We would then complete additional designs for each child view.
There are two primary workflows that individuals and teams leverage when working with Adaptive Views. The workflows and details are as follows:
The base view is the smallest view
Each child view inherits from the previous as the views get larger
Large to small:
The base view is the largest view
Each child view inherits from the previous as the views get smaller
To open the Adaptive Views dialog box, click on the Manage Adaptive Views icon located in the upper-left corner of the design area as shown:
We can also access the Adaptive Views dialog box from the main menu (Project | Adaptive Views…).
The following screenshot shows the default Adaptive Views dialog box:
In the Presets dropdown, select Portrait Tablet. Click on the green plus sign to add another new view.
In the Presets dropdown, select Portrait Phone. Once you have added each view, click on the OK button to close the Adaptive View dialog box.
The following screenshot shows an Adaptive Views dialog box with two views defined:
We now see three additional tabs in the Adaptive View toolbar corresponding to each of our views: Base, 768, and 320.
By default, tabs for base or child views are not shown at the top of the design area. Tabs corresponding to Adaptive Views appear once the associated view has been created. Learn more about setting up Adaptive Views at http://www.axure.com/learn/adaptive/setting-up.
Tabs can be in one of four colors: blue, orange, gray, or green. In our example, the Base tab is blue, indicating that the view is currently open for editing. The 768 and 320 tabs are orange, indicating that they are child views and could be affected by style changes made on the selected view. If a tab is gray, it indicates that the view will not be affected by style changes (for example, a selected child view would be orange and all the preceding parent views would be gray). Tabs turn green when the Affect All Views checkbox is selected, indicating that style changes will impact all views.
In this chapter, you have learned about the various aspects of Axure's environment and interface. We have explored the main menu, toolbar, sitemap, design area, and panes. We have also become familiar with pages, widgets, and masters. An introduction to Adaptive Views was also explored.
In the next chapter, we will learn how to create common interactions for several widely used web design elements, while building a community site. After organizing these elements into reusable masters, we will design a header, carousel, and a global footer.