Repeatable design with Axure

By Tim Caynes @timcaynes

We use Axure. We use other things too, but for rapid development of interfaces, from low-fidelity wireframes, through to complex interactive prototypes, we like using Axure.

And we like using Axure, because, frankly, it makes things much easier for us. Having tried various flavours of development tools, dabbled in the dark arts of interface development environments (IDEs) and even considered those drag-and-drop applications that sound great, we come back to Axure, because it’s easy to learn, simple to use, but still produces output that looks professional, clean and clients rather like the look of.

One of the features of Axure that is really useful is the ability to create and inherit master widgets that can be re-used across multiple pages. If we’ve sketched out a framework that incorporates a tabbed navigation model, we shouldn’t have to build that from scratch or copy and paste it all over the place. If we know we’re going to suggest a persistent masthead, we should just design that in one place, rather than tracking those changes across multiple pages – particularly for a complex process-driven application prototype. I know, this just sounds like putting a slide master in your Powerpoint presentation so that every page has the same logo and says something like ‘Page 1 of 127’ at the bottom, but really, it’s much better than that.

Take the tabbed navigation example, for example. In Axure, it is almost embarrassingly easy to create a master widget for tabbed navigation that has multiple dynamic states. These states can be set through user interactions, or, more seamlessly, by switching states based on a variable condition.

For instance, once you’ve created the single instance of the tabbed navigation widget, you can simply drag it on to a newly-created page and then add an OnPageLoad case that sets the state of the master widget for the current page. You don’t have to fiddle around with moving a tab to the background, highlighting the label, de-highlighting the previous tab, etc. I mean, you did that once, when you built the master widget, but if you have 200 pages, you still only did it once, not 200 times.

Crucially, if your marketing department, who we always like to pick on in these examples, decides that the ‘Resources’ tab really need to say ‘OMG This Is Cool Stuff’, then you change that once, in the master, and it is instantly reflected across your 200 pages. You don’t have to touch them.

Really, I made that sound more complicated than it is. It’s simple. There are any number of ways that master widgets in Axure can accelerate the build of interactive prototypes, whether it’s tabbed navigation, pop-ups, pop-ins, modal dialogs, date pickers, carousels, or even backgrounds with logos that says things like ‘Page 1 of 127’. Even better than that, Axure 6 is currently in beta and has added a bunch of rather nice new features, such as ‘move with’ for dynamic positioning, which make master widgets more powerful than ever.

Tim Caynes

I’m a Principal Designer at Foolproof which means I’m responsible for the integrity of the design thinking that shapes the work that we do.

View Tim's profile

What do you think?