Prototyping and spec generation with Axure RP

Axure RP and making life easier

As a business analyst in the web arena, a large part of my job is building and spec’ing interfaces for web applications. While this can be done with the standard office suite (Word and Visio), I always like to use gadgets and tools that can make my life easier. Axure is a prototyping, wireframing and specification application that can make designing web applications faster and also more enjoyable.

Axure RP provides a WYSIWYG, drag-and-drop interface by allowing the user to drop widgets onto the workspace and assign them proeprties. See the standard user interface below (with branding removed):

Interfaces can be built page by page, using these easy and familiar style. Concepts such as master pages can be used for reusable content such as headers, footers and navigation menus.

Building wireframes is only part of the functionality though, with the real weight coming in the form of field/widget properties and dynamic actions for prototypes.

Let’s start with field/widget properties and how they can greatly speed up specification generation.

Widget Properties and Spec Generation

A simple  scenario would involve the wireframes and specification developed independently in Visio and Word respectively. This leaves a lot of room for inaccuracies and inconsistencies across the two work products and requires greater effort in QA and governance to keep them aligned.

With Axure the two products are generated from the same source, within the same application and as a result will always match each other. Every element on the Axure canvas has a set of user-defined properties which are used to populate the specification when it is generated.

Each of the above properties can be defined by the user to meet the application needs (I have included a few staples above). Defining properties using select lists and number formats can increase the consistency of the generated specification. Below is a shot of the interface for defining widget properties.

Once you have your property list and have assigned values to all the elements, generating a specification complete with these properties is as easy as hitting ‘F6’. An example of a generated spec can be seen below.

The template that the specification is generated from can easily be edited to change values that are displayed in the spec, as well as heading and font styles.

Axure has a number of other useful features, which i haven’t covered in this article. Next I hope to cover dynamic panels and interaction’s for prototyping and source control using subversion and my backup process.