Tag Archives: axure

The Ten Commandments Of Efficient Design In Axure

axure7

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.

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.

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.‘

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?’

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.

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.

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.

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.

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.

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.

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.

Axure RP 6 Update——Pixel Font Sizes

Axure is a rapid prototyping software,recently released version 6.0,today,let’s look up what new features it has!

Pixel font sizes-72dpi

The default dpi for Axure RP documents has been changed from 96 dpi to 72 dpi. At 72 dpi, a font size of N points is equal to a font size of N pixels. Essentially, font sizes are in pixels by default. The default font size of the widgets is now 13 px versus 10 pts at 96 dpi or 13.33 px.

If you prefer to think of your font sizes in pts at 96 dpi, you can change the dpi setting for your document in Wireframe->Grid and Guides->Grid Settings.

Loading widget libraries automatically

In addition to library files (rplib) in your “My Axure RP Libraries” or “Axure/Libraries” folder, all previously loaded libraries will be automatically loaded on start up. That includes library files stored on a network drive. Libraries are automatically loaded until the rplib file is removed from the location it was loaded from or if you choose to Unload Library from the Widgets pane menu.

Convert button shape to image

Now you can convert button shapes to image widgets by right-clicking and selecting Edit Button Shape->Convert Shape to Image. So you could import an image to replace a placeholder shape without having to copy the interactions and annotations to another widget.

You also have the option to Convert Shape and Text to Image. This can be helpful if you need to convert text to an image. For example, when working with fonts that aren’t web friendly.

Show links in prototype

The Sitemap tab in the prototype has a new option to Show/Hide Links.You can copy a direct link to the current page with the sitemap or to the page without the sitemap.  There’s also the “link” that opens the current page without the sitemap (like Close Frames in 5.6).

Widget properties shortcuts and asterisks

Many of the features in Axure RP come directly from customers and these are a couple of them. So, thank you!

One, there are shortcuts for each of the tabs in the widget pane – Ctrl+1 / Cmd+1 for Annotations, Ctrl+2 / Cmd+2 for Interactions, Ctrl+3 / Cmd+3 for Formatting. The shortcuts put focus on the appropriate field or tree in each tab. For example, Ctrl+2 focuses on the interaction tree so you can arrow through the cases and actions and press Enter to open the Case Editor dialog before touching the mouse.

Two, if the selected widget has annotations or interactions an asterisk (*) is drawn on the Annotations and/or Interactions tab buttons.