Making Reuse Work
Before we look at a detailed example, I want to make a couple of points about developing with Axure. It’s worthwhile to set up a master Axure file for each of your clients—or for a UX professional who is part of an organization, a master file for your organization. This master can include
- basic page layouts—with centered content and any backgrounds
- styles a client uses—set up using the style master
- graphics and other assets the client uses
Once you’ve set up this master Axure file, it becomes the baseline for all prototyping work within an organization. Accuracy in wireframing is often a secondary consideration that gets sacrificed for greater development speed. In most cases, this is a false economy. Using accurate fonts and dimensions means page copy appears as it would in the real Web site or application, giving you a better understanding of how your copy fits. Having a single master prototype means you can use the widget style editor to ensure all your text panels use the correct font styles, as well as to create custom styles for various levels of headings. Using accurate width and height values for page elements means surprises are less likely when you progress to implementation.
Effective Use of Masters
In Axure, the effective use of masters is the key to reuse. Widgets have their place, but masters offer much more flexibility and control for the power user. Axure masters come in three types:
- normal master—Once you’ve created and employed this master, if you change the master, those changes appear everywhere you’ve used that master.
- background master—When you add this master, it snaps into the background of a page, using the same precise positioning you used when you originally created it.
- custom widgets—You can edit these widgets like any other widgets once you’ve placed them into a wireframe.
To create a Web page header, you could create a single normal header master, including the logo and navigation, as shown in the example that appears in Figures 1 and 2.
You can save time by creating the header as a background master, so it automatically snaps into the upper-left corner of the page. Tweaking your page setup so all content is centered on pages is another thing it’s good to set up in advance in your standard template!
While this approach is quick and easy, a better approach would be to take advantage of the ability to place masters within masters, thus creating four masters:
- a background master that you’ve positioned in the upper-left corner of the page that contains
- the header
- a normal master that contains