I’ve recently spent some quality time in Axure Pro 5.6 creating a public facing high-fidelity demo site, with a goal of representing a new visual style as accurately as possible within the constraints of Axure’s capabilities. I don’t expect Axure to support a feature set that creates perfect front-end production code because that’s really not the purpose of the software. However, it does sport a number of advanced features that help to design a pretty impressive-looking prototype if you have a particular business reason to do so.
Styles
One challenge with creating high-fidelity visual design in Axure is the lack of ability to attach a CSS. Axure has a Style Editor, which is not all that easy to find (it’s an icon in the Text Formatting toolbar), that manages widget and user-defined styles. A skilled developer could hack the output files and add a CSS, but then any time you want to make any change to the Axure file these changes will be overwritten.
This means that you need to either work within the limitations of the Style Editor, or use various workarounds to address certain stylistic issues. One problem I had was with managing leading, which isn’t supported in Axure. If you use any Axure widget that includes text, you’re stuck with the leading they provide. This can be an issue on labels or buttons that have two rows of text that you want to space a bit more tightly.
I have found some workarounds for this. For text, add two individual text widgets with one stacked underneath the other using the desired spacing. For stylized buttons, create an image of the button outside of Axure and add it as an image rather than using Axure’s button or navigation widgets. The unfortunate thing about using workarounds that involve replacing Axure widgets with custom widgets is that you have to do more work to replicate the interactivity that comes built-in with the Axure widgets.
Overall, the Style Editor works well for managing font face, size, color and alignment. One thing that’s a little confusing for those used to word processing styles is that no editable “Normal” style exists. (Technically one is listed in the styles drop-down list, but you can’t change it; it’s Arial 10.) So, be sure to set the properties of each widget separately, and then add user-defined styles for your text blocks like Heading 1, Heading 2, Table Heading, etc.
Something you might not realize immediately is that by default, Axure 5.6 uses points rather than pixels to define font size. The default dpi in Axure is 96, which means that if your font size is set at 10 points, it will render as 13 pixels. Axure recommends getting around this by multiplying the pixel size by 72/96 to get the corresponding point size. (I see they have changed this in Axure 6.0.)
Colors
Axure’s color palette can be a little confusing, but once you figure out how it works it can help you sync up with your style guide perfectly. The palette offers RGB or hex code-defined color selection, an eyedropper tool, gradient fills, and transparency percentage settings.
Page Grids
By default, the Axure workspace displays a grid that shows dotted lines for every 10-pixel increment horizontally and vertically. This setting can be somewhat customized, but as far as I’ve determined you can’t really create custom page grids. There is a way to do this, however, by using masters that are hidden when the page is loaded. Create a master and add elements (lines, rectangles) that depict your grid. You can also look in Axure’s widget and community libraries for some reusable samples. Add the master to a page, and then add an OnPageLoad variable that hides the panel when the page is displayed.
Masters and Master Widgets
Using masters is pretty standard so I won’t spend much time discussing them other than to say they make it easy to create powerful high-fidelity navigation elements to use throughout your prototype. Additionally, master widgets can be very useful for reusing similarly styled elements. Create a master widget and apply the appropriate styles and interactive states to the widget. Then you can add it to any page and save time as well as ensure consistency. The main drawback is that if you make a change to the widget and it’s already added in several places, you can’t go back and change the master and have the changes affect all instances of the widget. So, make sure you’ve nailed down the style before using a master.
More Information
Much more could be said on this topic, but this should help to understand the capabilities of Axure for advanced visual design. For more information, Axure’s online training and discussion forum are excellent resources, and Axure’s support representatives are great about answering questions through their contact tool as well as on their forum.
