Introduction to Axure - Part II - Using Axure RP

Posted 7/8/2014 1:51 PM by Michael Nelson and Curtis Lauterbach

In the first part of this article, we discussed the purpose of Axure and how it is used. In part II, we will break down some of the core functions and features of Axure.

Shapes and Images

Axure makes it incredibly easy to create shapes and images. Simply select the desired widget, image, or shape, and drag it from the library onto the page. From there the user can manipulate the size and shape of the image through different functions and import images onto the specified space. Although this process is very simple, designers can run into problems as changing the shape of elements and images can be difficult. For more complicated shapes, extensive editing or imported images are generally required.

Image Selection
Image Selection Window
Axure Icons
Add icons from your own files or purchase and download libraries from Axure

Positioning

For positioning everything evenly, Axure provides horizontal and vertical rulers to help align different elements. For example, when an element needs to be moved into place in relation to another, you can drag the element on the page and blue lines will appear indicating that the element is centered (or aligned left, right, top, etc.). This function makes the alignment process easy, and produces a smooth look and interaction in the end. In addition, with any object on the page, Axure allows the designer to type in the width and height of the element and exact placement they desire (using X/Y coordinates). With these combined features, positioning is smooth and quick.

Colors

Axure’s color options provide designers great flexibility in creating eye-popping prototypes.  Color provides personality to an element, and when a good color scheme is used, all of the element’s colors create a pleasant experience.  Designers are able to select colors from a color panel or edit the color by entering the RGB, hex codes, or by adjusting the color transparency. They can also use the eye dropper tool to quickly copy and apply colors to various elements. In addition, the color of all shapes, lines, and borders can be edited using these functions. This makes color editing incredibly efficient and easy for the user.

Templates

Axure comes standard with a library of basic shapes however, it is easy to acquire additional libraries of shapes, widgets, icons, and templates from the Axure website. For example, through the online resources at Axure.com, we found a great iPhone template that we use for phone apps. The template provides a frame for the user to build the interface in. This makes creating a design for an app easy to visualize as you can place all of the design elements within the allotted space. In addition to acquiring new templates online, the designer can make his or her own templates by creating master copies of the given design. By creating a master page, the designer can drag and drop the given “master copy” (just like any other element in Axure) to any other page they are working on. As an additional feature, if one would like to change the master copy, all edits done to the master page will automatically be updated in all other copied pages and places where that master was used. This makes editing and creating designs a rapid and easy process as all elements can be imported and then dragged onto the page.

Axure Templates
Axure Smartphone template and workspace

Interactions

For higher fidelity prototypes, Axure provides the option to include interactive features to design to mimic a fully functioning site or app. Functions such as linking pages, hover over information, dropdown menus, scrolling bars, or disappearing information are simple to add to the design. For each desired interaction, the conditions panel allows the user to determine specific conditions that must be meet in order for the desired action to occur.  For most of the functions this is a simple process however, when you have if/then conditions, things can become difficult.  Much like mathematics, there is an order of operations when creating interactions and understanding it takes practice. Once the functions of the interactions are understood, creating interactions becomes a breeze. Overall, the ability to add interactions is a great feature for presenting prototypes to others, as users and stakeholders can get the general feel and flow of the design. For expressing ideas and testing designs, the interactive functions in Axure are unique and helpful tools.


Creating certain interactions can be difficult as the options are not clear

Help and Resources

When learning Axure or searching for help to solve a problem, Axure’s online resources and community provide great assistance. For example, when we have run into trouble using Axure, we have been able to go online and get help through their online tutorials or online forums.  Videos and articles provide step by step instructions, making it easy to learn as a beginner. In addition, one can find tons of templates and libraries of elements available for download at Axure.com. Unfortunately many of the templates are for purchase only however, one can find free downloads in the list.

Online Training
Axure Online Training Topics
Axure Forums
Axure Forums

Article Series

  1. Introduction to Axure
  2. Using Axure RP
  3. The Pros and Cons of Axure RP
  4. Project Lifecycle with Axure RP
  5. Usablility Testing with Axure RP