This Axure tutorial goes through basic styling of prototypes. It explains how to use CSS styles to consistently design the look and feel of widgets across all pages. We’ll also focus on which styling options are changed through CSS and which styling features don’t affect it.
I’ve been giving regular workshops teaching Axure for nearly 6 month now. This new series of step by step tutorials covers basic to advanced Axure techniques in video format.
In Axure, you have several options to style your prototypes. Most of the type, the default, better defaults or a custom template (OS based for example) will be enough to quickly sketch your ideas and test concepts, to progressively iterate on a design direction.
Sometimes however, you may need to fully style your prototype according to graphic guidelines, for example, to build a prototype for user testing, or to cram design in a tight schedule.
In this article, we are going to learn how to cusomize your Axure’s CSS styles using the graphical interface. I will assume you know the basics, so, if you don’t know the basics, you should start with how to create your first Axure prototype.
There are two efficient ways of creating accordions in Axure with dynamic panels. Each solution presented here is adapted for one type of accordion behavior. This tutorial will explain how to implement each solution, and what they are best used for.
What are repeaters ? What are they used for?
Repeaters are a powerful tool that appeared with Axure 7. A repeater allows the user to use real data from a table in a wireframe to dynamically build a list view. To create one, you use a special widget called a repeater. While editing the repeater, you give it the shape you want each entry of a list to display content without bothering with its labels.
Masters are a powerful tool to easily re-use blocks of your design, that you may need to edit all at once. Masters are typically used to build page elements like headers, footers and other modules that will appear on all or most of the pages of your design. The main advantage of using masters is that you can edit them once to impact the changes to all of your wireframes.
Creating dynamic panels with axure
Dynamic panels are a powerful tool of Axure. They allow users to add interactive areas to their wireframes or mockups. Creating them is easy too.
Using widgets and styles
I often seen designers creating complex shapes from a pack of overlaping widgets. This has a couple of negative impacts, both for the designer her/himself, and for the other poeple that will need to edit or use the prototype afterwards. Here are some of these bad practices and how to fix these time consuming working habbits to be more efficient.
We have discussed earlier the general layout and logic of axure, how to create browsable storyboards with the tool, and how to implement simple within-page interactions such as anchor links.
We have seen in previous posts the basic layout and functionalities of Axure, as wel as how to add links between pages of a storyboard, to create a browsable storyboard. In this post, we are going to learn how to implement simple interactions within a page, by adding anchors and controlling the visibility of some elements of the page.