Axure 8 Styles Primer

Using Styles is a best practice in Axure; here's how to do it

This post describes the three different types of Styles in Axure and how to use them. It also recommends when you should use Styles and when you may not need to.

This article is now up to date for the latest release of Axure 8.

introduction to Axure Styles

Styles provide efficiency and consistency by allowing you to manage mainly visual characteristics for Pages as well as both static and interactive page elements (called Widgets) in one place. Styles work on their own as well as with other Axure features such as Widget Libraries, Masters and Repeaters and can be imported into other Axure documents for sharing and re-use.

The Axure 8 interface has improved visibility of and access to all three types of Styles (Page, Widget and Interaction) to help make this all easier. All Styles are now accessible via the Inspector pane on the right side of the interface (Figure 1).

Figure 1: Axure 8 interface access to Styles.

page Styles

Page Styles allow you to edit, save and apply characteristics that affect a whole Page. You can change the Default Page Style as well as create new Page Styles. These characteristics include:

  • Page Alignment: whether everything on the page will be left or center aligned
  • Background Color
  • Background Image with Repeat (tiling), Orientation, and Stretch options
  • Sketch Effects: this feature allows you to make everything look hand drawn for that low fidelity effect. Use the Axure Handwriting font or another one.

Some of these characteristics must be viewed in the browser to be seen.

How to use Page Styles

When no Widgets are selected, the Inspector pane reflects the Page Style in the "Style" tab.

Figure 2: The Update and Create links are visible next to the drop-down menu once a change is made.

Edit the Default Page Style simply by adjusting the characteristics as shown in Figure 1, or another Page Style by selecting it from the drop-down menu. To save, click the "Update" link which appears once a change is made (Figure 2). Using the Default is the easiest way to edit the Page Style for all Pages in a document because all Pages take on the Default Page Style unless its Style is changed.

To apply a Page Style to a Page, select it from the drop-down menu while on that page.

To create a new Page Style, adjust the characteristics and then click the"Create" link. (This basically works as a "save as.") You will then be prompted to name and save your Page Style in the Page Style Manager (not shown).

You can also access the Page Style Manager to create, update, duplicate, or delete Page Styles by clicking the little icon on the far right in Figure 2. From there you can also copy characteristics from a Page into a Page Style.

Figure 3: The Page Styles icon is visible when a Widget is currently selected to provide another access to Page Styles.

To access Page Styles when a Widget is selected, click the icon at the very top right of the Inspector (Figure 3).

To edit Page characteristics on a one-off basis without saving or changing a Page Style, simply do that but don't click the "Update" link.
 

Widget Styles

In Axure, a Widget refers to really anything on a page, as everything originates from a Widget Library.

Commonly skipped when first using Axure, Widget Styles allow you to edit, save and apply visual characteristics for things like text, shapes, buttons, and lines. This saves a lot of time! For example, if you want a page title font and size or a button shape and color to be the same on every page, you can manage these characteristics in a Widget Style and it will update every instance in that file. You can also do this with Flow Shapes and Connectors and use them in conjunction with other Axure features like Interaction Styles, Widget Libraries, Masters and Repeaters.

Widget Style characteristics include:

  • Font
  • Typeface
  • Bold/Underline/Italic
  • Font Color
  • Line Color/Width/Style
  • Corner Radius
  • Fill Color
  • Opacity
  • Outer/Inner/Text Shadows
  • Horizontal and Vertical Alignment
  • Top/Bottom/Right/Left Padding
  • Line Spacing


HOw to use widget styles

Figure 4: Inspector pane, Style tab with Widget selected.

In Axure 8, both Page Styles and Widget Styles are accessible in the Inspector pane under the Style tab (Figure 4). Which one you see just depends on what is selected. Select any Widget and the Style name and settings are just underneath the Location and Size settings. The paradigm works very similarly to Page Styles.

To edit a Widget Style, update the characteristics below the drop-down menu and then click the "Update" link which appears once a change is made.

To apply a different Widget Style to a selected Widget, simply select the Style from the drop-down menu either in Figure 4 or at the top left of Figure 1 (when a Widget is selected, all Widget Styles are available here.)

To create a new Widget Style, set the characteristics the way you want them and then click the "Create" link which appears once a change is made.

You can also access the Widget Style Manager to create, update, duplicate, or delete Widget Styles by clicking the little icon next to the drop down menu on the top left of Figure 1. From there you can also copy characteristics from a Widget into a Widget Style. 

To edit Widget Style characteristics on a one-off basis without saving them, simply do that but don't click the "Update" link. 

The Format Painter at the top middle of Figure 1 allows you to copy and paste saved Widget Styles and one-off characteristics as well.

Interaction Styles

Figure 5: Interaction Styles editor showing where to apply a Widget Style.

Interaction Styles allow you to set visual characteristics that are triggered by interactions. The best thing about these is they are built into many Widgets so you don't need to use Actions, Events, or Dynamic Panels for many simple interactions. Many users overlook this feature and therefore are using much more time-intensive and messy methods in Axure when they don't need to. The built-in Interaction Styles are:

  • Mouseover
  • Mousedown
  • Selected
  • Disabled

You can also use these in conjunction with Events. For example, you can set an OnClick event to show a Widget in the Selected state. And they can be used with Widget Styles: a best practice is to create a Widget Style and then designate an Interaction Style as the Widget Style (Figure 5).
 

How to use Interaction Styles

Figure 6: The Axure 8 interface showing Interaction Styles in the Inspector pane.

Unlike the other two types of Styles, Interaction Styles are actually found in the Properties tab of the Inspector Pane (Figure 6). With a Widget selected, click an Interaction Style and set the characteristics you want. You will be able to use Widget Styles (Figure 5) to do this. Alternatively, you can right click on a Widget, select Interaction Styles, and set the same characteristics there.

Unfortunately, you can't save, name, and re-use Interaction Styles to apply to other Widgets the way you can with the other two types of Styles. But, as stated above, designating a Widget Style as an Interaction Style gives you the best document-wide control over this feature.


adaptive views 

When a Style is updated or saved, that change affects all Adaptive Views (Axure's way of creating prototypes that adjust to screen size) using that Style. Saved and named Styles in Axure are not "adaptive," meaning they can not adapt or change using the Adaptive Views feature on their own. But, Style characteristics can adapt when manually set. There are various workarounds being used such as using an adaptive Widget Library but that is a topic for perhaps another post.

 

To get more information on using Axure Styles and its related topics, check out Axure's website and discussion forums.

 

To use or not to use styles

That is the question. And everyone might have a slightly different answer. It really depends on your working style, the type of project, and what stage the project or design is in.
 

When to use Styles

In most cases, using at least one type of Style is very likely to make a designer's life a lot easier by allowing maintenance of a document to be faster and less error-prone. It can make Axure files much cleaner and easier to collaborate with.

There are some cases where Styles are a must to save you and your team tons of time and sanity:

1. A good rule of thumb is to use Styles when you have documents with more than five pages because it is highly likely that it will have elements with the same characteristics.

2. Another is with prototypes with high visual fidelity. When the client changes a hex color, you don't have time to update individual instances all over your document.

3. If you are working with a team, using Styles is one of the best ways to help each other manage and understand the visual standards to be used.

4. If you ever want to use the same visual characteristics in future documents, you will want to set them as Styles so they can be easily imported into other Axure documents and re-used.
 

When you may not need to use Styles

Most designers will agree it is best to sketch and ideate on paper than in software because it's faster and more conducive to the "flow" state. But, we've all been guilty of jumping right into our design tools, especially if we are comfortable with them, and basically sketching electronically. If you find yourself doing that and you don't know where the design will lead you, it might not be the right time to use Styles. Staying in your creative flow or experimenting with interactions is your focus and it may not be worth interrupting to set Styles. Also, if you are trying to get something done super fast Styles may slow you down (although set or update them right after your deadline!). Finally, if you only have a one or two page prototype without much repetition of visual characteristics then Styles may not be worth your while.

Want to learn about Styles and many more Axure best practices? Contact us about our Axure training services.

The instruction and opinions in this post are purely those of Usability for Everyone, LLC and do not reflect those of Axure Software Solutions or Ax-Stream. This post is accurate to the best of our ability and expertise but may not be perfect. Feel free to contact us or comment below if you find any issues with it. Usability for Everyone, LLC does not accept responsibility for its readers' use of Axure.