The Ten Commandments Of Efficient Design In Axure

Advertisement

Axure is a powerful tool for creating software prototypes quickly. Getting started with it is really easy; however, therein lies a danger. The tool is so intuitive that many users can be productive without undergoing any formal training. What they might not be aware of is that they probably aren’t using Axure optimally.

In my experience as a UX designer, I seldom draw a page and get it right the first time. Most of the time, I go through five to ten iterations. When your UX design is used as the blueprint of an agile project, you might need to keep the entire project up to date with the scope of development. Sometimes these changes will affect a dozen or more other pages. It is at these times when some of the less evident features of Axure can become huge time-savers.

I generally work in teams to create wireframes and prototypes. To do this, I make use of Axure’s “shared projects” functionality (“team” projects in Axure 7). Multiple people being able to work on a design project at the same time remains my favorite feature of Axure, but it does demand a tidy and structured way of working. You will undoubtedly find someone else working on a page that you’ve designed or yourself working on another’s page. I’ve written these commandments with Axure in mind, because that is the tool I presently work with, but I’m certain many of the principles apply to other tools.

This list of 10 commandments is what I’ve found to be crucial techniques to save time in the long run. This way of working does not always provide the quickest results in the short term, but it does allow for optimal flexibility further down the line.

I) Thou Shalt Never Use Two Widgets When One Will Do.

The most common time-consuming behavior that I see with beginner and advanced Axure users is the use of unnecessary widgets. I still catch myself making this mistake and have to remind myself constantly of this first commandment. Each widget that you add to your project will require a bit more work when you need to make changes in the future. All of these little bits of work start to add up after ten iterations. Below is a simple example of how two visually identical objects can be built up in different ways.

Axure-RP-Pro-7.0-BetaScreenSnapz015_500_mini
Larger view

Both examples show a situation in which someone uses a separate widget for the text and the button. When this person then wants to add onClick behavior to the entire object, they have two options. The first option is to add a hotspot over the group, which results in three widgets to maintain. The second option is to create the onClick interaction for both elements, which results in two behaviors to maintain.

Both of these options will cost unnecessary time when changes need to be made. A much leaner way is to create this object by adding text to a box widget.

Axure-RP-Pro-7.0-BetaScreenSnapz016_500_mini
Larger view

Your text can then be positioned using the “alignment and padding” tools. You will now have only one widget to maintain and will need to connect only one behavior to it.

Axure-RP-Pro-7.0-BetaScreenSnapz002_500_mini
Larger view

II) Thou Shalt Not Duplicate, But Rather Make The Object A Master.

When I find myself in a late stage of a design and realize that we need to change the main navigation on every single page, I experience tremendous joy. Not because I enjoy a big pile of repetitive work, but because all I need to do is edit my single master object and — presto — the whole project has been updated.

Using a master for the main navigation would seem to be quite obvious, but it pays to create a master for anything you use more than once. Whenever you find yourself copying and pasting a group of widgets, always remember that creating a master is probably better.

Axure-RP-Pro-7.0-BetaScreenSnapz004_500_mini
Larger view

After creating a master, such as the product tile above, if you decide to change the button’s label to “Buy now,” you will need to edit it only once to see the change in every instance of the master.

Axure-RP-Pro-7.0-BetaScreenSnapz019_500_mini
Larger view

Remember not to turn overly large groups into masters. The larger a group of objects, the higher the chance you will need a variation of that master at some point. Combining masters into another master is often better. This can be convenient when you need some variations of one master, with certain elements always included and other elements varying, as below:

Axure-RP-Pro-7.0-BetaScreenSnapz020_500_mini
Larger view

This base master has no pricing information included, but it can be combined with one of the other masters to create new masters for full product tiles.

Axure-RP-Pro-7.0-BetaScreenSnapz021_500_mini
Larger view

III) Thou Shalt Place Styles Before Masters.

Masters are great for creating reusable elements, but they do not allow for variations. Each instance of a master will be exactly the same as the others. This is where styles come in. Suppose you have a button design that needs to be replicated on multiple pages, but the labels on the button need to vary. Styles can help you achieve this easily. Every property of a button can be managed through styles; all you need to do is change the label.

Axure-RP-Pro-7.0-BetaScreenSnapz007_500_mini
Larger view

The affordance of buttons is often enhanced with mouseOver and related behaviors. These behaviors are often created in Axure by using dynamic panels. The different states are then placed in different panel states and selected with scripts. With this method, however, you would need to go into each of the panel states to change the copy of the button.

A much faster way of dealing with button behavior is to use the “Interaction Styles” dialog box. With this feature, simply set different styles for each behavior state, and then you would need to set the copy and size of your button only once.

Axure-RP-Pro-7.0-BetaScreenSnapz009_500_mini
Larger view

Axure-RP-Pro-7.0-BetaScreenSnapz010_500_mini
Larger view

Tip: Use the “Auto fit width” function, introduced in Axure 7, on your buttons. If you set up the left and right padding in your style, all you will need to change is the button text, and then the size of the button will automatically adapt.

Axure-RP-Pro-7.0-BetaScreenSnapz008_500_mini
Larger view

IV) Thou Shalt Keep Thy Project Organized And Shalt Name Clearly.

Axure provides many options for keeping things organized. Every element that you place on a page can be given a unique name. Pages may be named and organized in a tree structure. Masters may be given names and sorted in folders and so on. But why go through the effort of giving everything a clear name?

  • Keep things organized for yourself.
    When you have an elaborate page and you want to create an interaction with a dynamic panel, you will have to sift through a long list of elements to find the one you are looking for. You can use the search field — but only if you have thoughtfully named your items.
  • Allow for team members to step in.
    If, like me, you work in teams on your projects, unexpected things will always happen. You or your colleague could become ill or unexpectedly have to work on another project. It is critical, then, that the project be so clearly set up that the other can just step in and take over. Interactivity built by another can be particularly complicated to step into.
  • You will be sharing with third parties.
    In the average project that I work on, my wireframes get shared with at least 10 people. Some people will sit at a table with me and can be carefully guided through. Others, I will never meet and will have no idea of their understanding of wireframes. Ideally, a prototype should be viewable autonomously.

Several things I do to achieve this are the following.

Create a Landing Page

You could set up the home page of your prototype as a starting page that explains what people are looking at and how they can use it. Additionally, you could provide your contact information or links to flowcharts.

Google-ChromeScreenSnapz007_500_mini
Larger view

Give the Pages Unique and Self-Explanatory Names

The prototype will be easier to understand if the page names are clear and explain what the pages are. People will also use these names in future communication. If, for example, a graphic designer works on a comp based on your design, they will likely use the same names for the pages as you did. If a page’s name is not unique, then different names for the page will appear.

Create a Flowchart of the Most Common User Flows

Most people don’t think of a design as a tree of pages; they think in terms of a flow of activity. You can create flowcharts in Axure to reflect the important user flows and to link the nodes to the relevant pages. You would then provide an extra way to navigate the prototype. (The names in the flowchart would be based on those in the site map. Thus, it would become evident whether you are naming clearly.)

Axure-RP-Pro-7.0-BetaScreenSnapz023_500_mini
Larger view

V) Useth Always Global Guides And A Grid.

Axure allows users to create two kinds of guides: local guides, which exist only on one page, and global guides, which are visible on all pages. The guides can be set up using the “Create Guides” dialog box. If you set up guides in, for instance, a default 960 grid, then consistently positioning elements over the different pages becomes a lot easier. Also, your team members will see these global guides in a shared project.

Axure-RP-Pro-7.0-BetaScreenSnapz011_500_mini
Larger view

Using a grid can help you keep your designs clean and structured. I usually set my grid to 10 × 10 pixels and create all of my objects with dimensions of multiples of 10; for example, a button of 60 × 20 pixels, and not 55 × 18 pixels. When you place these objects on the grid, everything becomes easier to align and will satisfy any obsessive-compulsiveness you may have. Of course, allow yourself to stray from the grid for special objects that need different dimensions.

Tip: In Axure 7, you are able to set up different sets of global guides for mobile and desktop pages. Here’s an example of a mobile grid I like to use:

Axure-RP-Pro-7.0-BetaScreenSnapz012_500_mini
Larger view

VI) Forgeteth Not The Import Tool.

In most projects, people create elements that are useful in other projects. Instead of reinventing the wheel for each project, reuse things that have worked in the past. Many of the basics will remain the same throughout projects, such as styles, guides and certain masters. Although copying and pasting objects from one .rp file to another is possible, not all information would be carried over. When you paste a button that has a particular style, that style will not be pasted along with it.

The best way to reuse elements is by using the powerful import function. This enables you to import pages and masters, but also styles and guides.

Axure-RP-Pro-7.0-BetaScreenSnapz013_500_mini
Larger view

Tip: Create a “mother” .rp file, in which you keep all of your standard masters, to import for new projects.

VII) Thou Shalt Keep Old Versions Of Pages.

I often find that I need to go back to an old version of a project. In the “good” old days (I won’t bore you with the reasons why “good” is in quotation marks), when I was often required to create wireframes in Visio, managing projects with many pages was difficult, so I would end up taking out the legacy pages. I would also save a new file every few days with an incremental number, so that I had some sort of history of the project. In other words, I ended up with a folder of hundreds of pretty large files, wasting space.

In Axure, keeping track of old versions is easy. Simply create a folder (or a page in Axure 6.5 and earlier) named Bin.

Axure-RP-Pro-7.0-BetaScreenSnapz014_500_mini
Larger view

Place old versions of pages in there, so that you can easily refer to them when you need to go back in time. When exporting, simply use the option to not export all pages. This way, you can share a clean version with clients and still have old versions be directly accessible.

Axure-RP-Pro-7.0-BetaScreenSnapz024_500_mini
Larger view

VIII) Thou Shalt Not Make Unnecessary Interactions.

First-time users of Axure are often impressed by the ease with which interactivity can be added to a prototype. When I started out, I couldn’t resist creating every possible interaction on my pages. However, in many cases, my designs could be clearly communicated without any interactivity — simply as still images. I now add interactivity only if the answer to one of the following questions is yes.

1. “Do I Need Interactivity to Communicate My Design Unambiguously?”

Could your design be interpreted incorrectly if you supplied only still images, instead of an interactive element? This might be the case for an interaction that relies on certain animations to be understood.

2. “Will This Interactivity Save Time in the Long Run?”

Would making an element interactive be quicker than showing different states on different pages? For example, creating and maintaining an interactive page with tabs would be easier than creating multiple pages for each tab.

3. “Do I Need to Convince Someone of a Concept for an Interactive Element?”

When I come up with what I believe to be the best solution for a problem, but I know it will be heavy to develop, then I need people to support the idea. I have found that making something interactive can help sell the idea.

But if the answer to all of these questions is no, then I prefer to create multiple versions of a page that simply show different states of an interactive element.

IX) Useth Font Icons Instead Of Images.

Another simple but often overlooked way to keep Axure projects manageable is by minimizing the number of images. To change the color of an icon image in a prototype, you would have to go through several steps. You would need to open an image editor, make the changes to the icon, export to a new bitmap, and finally import into your Axure project.

Another option would be to use an icon font. With one, you can change color and scale within Axure. A great source of basic icon fonts is CopyPasteCharacter, whose fonts work right out of the box on most platforms.

SafariScreenSnapz011_500_mini
Larger view

With an icon font, you can add a graphic to a button and still obey the first commandment.

X) Previeweth Thy Prototype In The Browser Or On A Device.

Designers get frustrated upon learning that their prototype doesn’t look the same in the browser as it does in Axure. In particular, text spacing and positioning look off. What’s more, there are even differences between browsers. To avoid surprises, constantly preview your prototype in a browser or on a device if you are designing for mobile.

Even though you will never be able to eliminate all differences between Axure and the browser, there are some ways to limit them.

Text Wrapping

Here is how Axure wraps text:

Axure-RP-Pro-7.0-BetaScreenSnapz025_500_mini
Larger view

And here is how a browser wraps text:

SafariScreenSnapz010_500_mini
Larger view

To prevent text from wrapping to the next line, make sure your text boxes have sufficient breathing space. The safest bet is to always give text the maximum amount of space that it might need. Thus, if you need to edit your text in the future, you won’t need to resize the text box; it will wrap the way text should.

Vertical Spacing

Vertical spacing can look significantly different between a browser and Axure. You can tweak the spacing in Axure until you find the setting at which the text will look good in the browser, but this is quite an effort with an uncertain outcome. The only way to be certain of the positioning of text is either to break up the copy into chunks or to convert the text to an image. The first option breaks the first commandment, unfortunately, although it is sometimes unavoidable.

Summary

A few of these commandments bring results in the short term, but most yield benefit in the long run. All will save time and, perhaps more importantly, keep your work pleasurable.

10-commandments_500_mini
Larger view

I hope these commandments become as useful to you as they are to me. I’m certain that other people think other rules are more important, and it would be interesting for us all to hear about them, so post your ideas in the comments.

If you haven’t yet, try out the beta version of Axure 7. Some of the changes really help to keep one’s work organized.

One last point: These rules, like any others, are made to be broken. Never let them hinder your work. As smart designers, we need to know when to break the rules.

(al, il)

↑ Back to top

David Morgan is a Senior Human-Centered Designer at Namahn in Brussels. Next to doing design work for international clients, he gives trainings on Mobile Design and compulsively explores new tools to optimise productivity in UX Design.

  1. 1

    XI) Covering the image with a rectangle – using it as an eraser
    ✖ Wrong: You have an image that should be cut off in a place. You cover it with a rectangle in the background color. The rectangle covers the picture like an eraser wipe it.
    ✔ Right: Please right-click on the picture: select “slice image” – and you can crop the image as you like.

    0
  2. 3

    These are great commandments. I’d add a few corollaries:

    “Searchest thou the forums and libraries before reinventing the wheel”

    There are lots of helpful folks out in the Axure user community that have created libraries and samples that are there for the taking. When all else fails, I post to the forum to find a solution. On a long-term or permanent project? Create a library of common elements for sharing and importing.

    “Plan thy prototype before creating”

    Sketching is still your friend. Plan out what interactivity you’ll need to communicate. Fit the level of detail to the need. For example you could use low fidelity and include key interactions for developers, but need a high fidelity version with more robust interactivity for usability testing.

    “Limit thy variables and name them well”
    ‘nuf said.

    0
    • 4

      Thanks Jo Anne, for those additions. The Axure community in my experience has always been very open and helpful, so that should definitely be a starting point for any problems or questions people have.

      Although I’m all for sketching and do that myself before getting started in the digital domain, I find that Axure doesn’t punish you too much for not having a plan. After you have drawn a page, you can easily decide at the end to turn things into masters. These kinds of things do not necessarily need to be planned ahead.

      What is you main reason for limiting variables? Does it slow your prototype down too much? In Axure 7 it is easy to create local variables. These don’t clutter or slow down the rest of your prototype.

      0
  3. 5

    I love using fonts instead of images, but they often break on others’ computers. My workaround has been to work with the font until things are set the way I want, then Convert Shape and Text to Image. It makes revisions a pain and technically I’m still using images, but the end result is more predictable.

    0
    • 6

      I have also found some font icons not to work everywhere, for instance some don’t work on Android, but do on iOS. This is a good tip for dealing with this problem at a later stage of the project. Perhaps there could be a collection of ‘safe’ icons that work in ‘all’ browsers.

      0
      • 7

        Use the standards in CSS font-face for naming an included file as the font. There are 4 commonly accepted file types to include the font original in your code and have any device (android, iOS, WinMac) download and use that font.

        Check out http://www.fontsquirrel.com/tools/webfont-generator but be sure you only use a font you have legally obtained rights for, or a public license. some fonts are open to use freely in print but not online. Others are fine to use in print, online but only in a non-commercial setting.

        Respect others hard work at creating the font and get permission. There are plenty of license free fonts to choose from if you can’t afford the royalty the artist requires

        0
        • 8

          Using icon fonts is a great idea but unfortunately doesn’t work when hosting at share.axure.com.

          0
          • 9

            When using icons from Copy Paste Character, you wil find that most icons work in almost all browsers, thought not 100% as theHilker points out above. In Axure 7, it has become easy to add webfonts, which will work on share.axure.com. So, as long as you add your icon fonts as a webfont (see am Beresford comment), your font icons will work on share.axure.com.

            0
  4. 10

    Good read! Still, I miss some points. For example, I find it very useful to create own libraries, especially of you are working for one client in continuing projects.

    1
    • 11

      Very true, I do a lot of work for one client and we have a kind of master project where we collect all our different masters that we reuse. I refer to this in rule VI, where i use the import tool to reuse these elements. I find it important to only use masters though and not a widget library, because I almost always reach a point where the widgets need to be changed throughout my prototype. If they were instances of a widget library, I’d be in trouble and would have to change each one individually.

      I am still looking for the best workflow for reusing elements throughout different projects though. How do you go about this?

      0
  5. 12

    Very nice article. Very useful for UX designer. This I hope would help to create better wireframes and prototypes for clients. As well as ease some of the design frustrations that are create when wireframes are not solved solutions.

    0
  6. 13
  7. 15

    Thou shalt not use Axure should be the first and only rule.

    0
    • 16

      Chris, I would be interested in your argumentation about why not to use Axure. Do you prefer alternative tools or do you prefer to work straight in HTML?

      0
      • 17

        I would rather work in straight html. If you’re spending time doing a wireframe with dynamic hover and things it’s best to learn jQuery and HTML. Why figure out the Axure way to do this, when the result is garbage automated HTML?

        If want to be real simple about it, why use Axure at all? Write down some boxes on paper, buy Photoshop or Illustrator.

        It seems the primary focus for a designer who doesn’t know anything about HTML or CSS is to learn about it. Things on paper don’t magically come to life in a web browser.

        0
        • 18

          Hi Chris, I find your approach very useful when working alone and knowing that my code will be reused during development.

          In my case, my team works on 3 projects at the same time, and we have 3 large development teams and they need things done very quickly (and since they use Java and Primefaces for development, HTML prototypes would be rapidly discarded).

          I’ve worked on both ways and I have to that Axure is indeed the best solution for large prototypes within complex projects.

          I believe it should take always into consideration the type of work you’re about to start along with timeline, budget and team. HTML prototypes can be very easy to do and avoid duplicated work when it can be reused by your dev team.

          I would use HTML or even Balsamiq for starting projects, when you are just sketching some ideas that needs to be validated with your client. Moreover, when all requirements are in place, Axure can save lives in terms of time consuming to maintain lots of changes within teams.

          0
    • 19

      i think you need to review your stance. Axure is quickly becoming the industry standard for any serious UX designer….if it isn’t already.

      0
    • 20

      point taken but I think you’re assuming that implementation is the only context in which this tool is used. My experience with it is very different. I’d never use axure as a substitute for proper development. In fact as much as I dig it, there is a complexity threshold beyond which it becomes pretty tedious, as does every visual “programming” environment. Where I’ve found value is using it as a kind of sketchbook. it’s an easy way to explore possibilities and make discoveries. I find it especially useful to validate ideas and build consensus in an interdisciplinary team.

      0
  8. 21

    Thanks! Great article!

    0
  9. 22

    We found using Axure to be a very interesting tool. We would recommend it to anyone in need.

    0
  10. 23

    Great article.
    I have been designing in Axure for years, but I will make sure to always have those commandments on my desc when I start a project from now on.

    0
  11. 24

    Not a bad set of rules. I have written similar things in the past.

    The first commandment should be:
    Thou shalt not use Axure unless you are building an interactive prototype.

    It’s not a ‘wireframe’ tool, it is for testing simple to complicated logic and nobody seems to ever use it for that.

    0
    • 25

      I used to feel the same way, but being able to tie the annotation notes directly to the object is incredibly helpful. I find it’s type control incredible clunky and overall dealing with any content is a real PIA, but wireframes aren’t really the place where that sort of detail should be part of the conversation.*

      That being said, I had no idea about the widget style capabilities! I have lamented this before and just never knew it existed. In typical Axure fashion it is a UX nightmare to actually use it, but it works, and for that I am grateful.

      *Clients will always ignore this no matter what.

      0
  12. 26

    Great article David! Axure is my go to tool for communicating designs and building prototypes for evaluative research. I am glad that you didn’t classify Axure as a design tool and instead as (primarily) a prototyping tool. Personally, I feel the power of Axure is being able to rapidly turn a design you’ve already thought through, into an interactive prototype.

    Also, I totally agree with all ten commandments (and the caveat of knowing when to break the rules). The two commandments I notice being violated the most are: “Thou Shalt Not Duplicate, But Rather Make the Object a Master” and “Thou Shalt Keep Thy Project Organized and Shalt Name Clearly”. The one addition I’ll add to commandment regarding masters is understanding when and how to use raised events. And as for the “Shalt Name Clearly” commandment, do you have a standard naming convention that you like to use for differentiating your controls, hotspots, states, etc?

    0
  13. 27

    Anders Ekkje Slettebø

    October 14, 2013 5:31 am

    “Thou Shalt Place Styles Before Masters” is a problem in shared projects. The rest of the team don’t have access to the styles you define. How do you solve that?

    0
    • 28

      Anders, actually when you ‘Send All Changes’ in a shared project, all the styling information is also shared with your team members. You need to check out the styles pane before you can edit it. If you use a webfont that isn’t installed on another user’s computer, they might not see it in Axure, but it would still work in the prototype. Give it a try.

      0
  14. 29

    Why is this showing Axure 7 functionality when the release is still in Beta? The commandment for button styles is not in 6.5!!!

    0
    • 30

      All main rules apply to Axure 6.5, including the button Styles. You access them by right-mouse clicking a button, select ‘Edit Button Shape’ and the select ‘Edit Rollover Style’ or one of the other options.

      I have added additional information about Axure 7, because I have been happily using it for quite some time now and wanted to share some of the new productivity tips I found in there.

      0
  15. 31

    How does one get their hands on a copy of Axure 7?? I don’t see any info on their website about joining the beta release…

    0
  16. 33

    Very practical tips and extremely well illustrated, thanks for these

    0
  17. 34

    I’ve been using axure religiously for 3 years. I wish I’d had this article when I started in ux.

    0
  18. 35

    Great article. Very useful tips for a noob like myself. Had previously been using Omnigraffle for wireframing. One bit of frustration I’m encountering is bringing in vector elements from tools like Illustrator or Omnigraffle. Axure ONLY allows these to be brought in as bitmaps! How do other Axure users incorporate Vector files in their projects?!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top