Mastering the Basics of Axure

8/12/2019 Mastering the Basics of Axure

1/27

Mastering the basics of AxureMastering the basics of Axureby Regis Freyd

Axure has a lot of traction these days. It is a very powerful wireframing tool, that lets you create clickable

wireframes very quickly. However, you should not restrict Axure as only a wireframing tool: it can be used

to create static websites (like, real websites - we'll see that in another chapter) or as a rapid/quick/dirty tool

to manipulate and modify images. Put it simply, I use it every day and I enjoy it more and more every day.

My goal for this chapter is to give you the knowledge to master the basics of Axure - and to let you do your

work in the best possible way.

Screencast - The complete screencast of the first chapter

Duration: 56min 19s

You can download the PDF of the tutorial here, and you can download the RP example file here.

The interface

The main interface is pretty straigh-forward. On the left hand, you have all the options to manipulate the

pages and the main components for your wireframes. On the right hand, you have all the tools that let you

modify the visuals, the behaviour and the styling of the components you drag on each page of your

wireframes.

Figure 1: Main interface.

Customizing the toolbar

Before doing anything, the first thing I s trongly suggest you to do is to customize the toolbar. The default

toolbar is really not convenient, and the user experience can be greatly enhanced simply by modifying i t.

To modify it, right-click on the toolbar and drag/drop the following elements.


2/27

Figure 2: Modified toolbar

Here is what we have added:

Remove the specifications and generators buttons Those two buttons are not used very often when

wireframing. Moreover, I used to click on Specifications instead of Prototype, and it pissed me off every

time.

Add lock and unlock button I never get to remember the key combination for those two.

Remove the Group and Ungroup buttons The key combination for those two is easy to remember.

Add Forward and Backward buttons We have to used those two so often when we create a wireframe,

that the buttons should be there. Trust me.

Using the keyboard

Being productive requires you to use the keyboard for some operations. Note that those key combinations

are for Mac OS. If you want them to work on Windows, replace it with the CTRL key.

!+ = Zoom in, by step of 10%.

!+ - Zoom out, by step of 10%.

!+ G Group objects together

!+ Shift + G Ungroup objects

!+ 2 Switch to Interactions panel

!+ 3 Switch to Formatting panel

!+ Shift + P Generate the HTML prototype and open the browser

Understanding libraries

Axure comes with a set of default widgets: textareas, buttons, rectangle, table,... Using those basic

widgets, you can create basically anything: a very complex page, or a menu that has a special effect when

you put your mouse over it,... The name I give to those things is component. In order to avoid recreate

the same components from projects to projects, you can store them in a library. A library is a set of

widgets that you might want to reuse in a lot of projects.

There are plenty of libraries out there, including the ones I sell, like the Facebook librarywhich allows you

to create a fake Facebook page in a matter of seconds.

What about masters?

Masters are kind of the same as libraries. They are also a set of widgets that you can reuse, with one big

limitation: you can only use a master in the current project.

Screencast - Presentation of the UI

Duration: 1min 23s

Building your first wireframe

Let's build your first wireframe. For the sake of the exercise, we will re-create Dribbble, the great website

that lets creatives share screenshots. It has everything we need: a header/footer, a login mechanism, a


3/27

lots of components that could serve as masters,... It's going to be fun.

High-level vs low-level wireframes

When you create a wireframe, you need to make a decision. What will be the precision of the thing you will

design? Should you create a high-fidelity wireframe, or a low-fidelity one?

High-fidelity wireframes are a very close representation of what the final website will look like. That

includes having the final color scheme, the images, the exact text. Some clients love this type of

wireframes, as they can see what the final product will look like, and therefore make business decisions

based on something they can feel.

Low-fidelity wireframes are wireframes that focus on the layout and structure. The graphic design aspect

is omit ted, on purpose, so we can focus on the content.

For the purpose of the exercise, we will create a mix of those two. The wireframe will be low-level, as all

the images will be replaced by rectangles. However, in order to show you what Axure can do, we will need

to create some buttons and design elements.

Drawing the skeleton

A website is usually composed of a header, a footer and a content in betwwen. Dribbblehas them all:

A header,

A footer,

A left content zone, which contains the thumbnails,

A right content zone, which lists the tags, the projects, and the rookies.

Figure 3: Dribbble


4/27

Screencast - Dribbble.com

Duration: 1min 06s

We'll start by creating the header. Note that we will not deal with any interaction at the moment - so the

menu will not be clickable. We'll cover that later.

Header

I know that Dribbble is 940 pixels wide. I also know the header is 59 pixels high. The first thing to do is to

draw a rectangle of 940 pixels to 59 pixels.


5/27

Screencast - How to inspect an element

Duration: 2min 29s

To do that, simply drag and drop a rectangle in the empty canvas. Once on the canvas, use the

panel (located on the right side of the screen) to set the proper height and width.

Figure 4: Set the width and height

Then, place the rectangle in the upper left corner, at position left 10 and top 10. I like to put a 10 pixels

padding, so the wireframes do not stick to the border of Axure. It breathes a bit more that way. To set the

right position for the rectangle, you can either use your mouse, or use the panel.

Now we'll add the logo. For the purpose of this exercise, let's assume that the logo is an image. It's a good

practice to represent an image as a rectangle on a wireframe - so it doesn't look real. To create the logo,

add a rectangle that is 120 pixels wide and 29 pixels high, and place it on the left corner of the first big

rectangle you've created.

Figure 5: Adding the logo in the header

How can you know the dimensions of an element on a webpage?

On some cases, you have to know the dimensions of an element on a webpage, like the width of an

image, or the height of a block. You can easily know that by using Chrome Developers Toolon

Chrome, or Firebugon Firefox.

How can you move a widget with precision?


6/27

It's a good practice to identify each image in a wireframe, by adding a word that describes what they

represent. To add the word "Logo" to the image, simply double-click on it, and type the word.

Let's put a menu now. Add four widgets, one for each menu item:

Shots

Players

Explore

Activity

Don't worry about aligning those four text panels.

Figure 6: The menu items as I placed them

To align the texts, you have to do two things. The first one is to select the four text panels, and to click the

panel. Click first on . Then, in the case your text panels are not aligned,

click on , then .

Figure 7: Aligning menu items

Your menu items should be aligned and centered with each other by now. You can also add the Sign in and

the textbox used to search.

The Sign in is just a simple widget.

By default, when you move a widget (like a rectangle) with your mouse, Axure moves it 10 by 10

pixels. It's difficult to be precise with that. If you want to be extremely precise, you have two options.

The first one is to set the position using the panel. The second one (way better) is

to use the arrows on your keyboard, when the widget is selected. That way, each stroke of an arrow

moves the widget by 1 pixel.


7/27

The search box is a .

We'll tweak the design of the search box later.

Screencast - First part of the header

Duration: 6min 31s

Figure 8: Finishing the header

Content

We will now add the content. The content is divided into a left part, and the right part (which is basically a

side column).

Add the tagline and the link.

The tagline is "What are you working on? Dribbble is show and tell for creatives." and should have a size

of 16.

The "Signup as a spectator" is a and should have a size of 14.

Screencast - Adding title

Duration: 1min 48s

Figure 9: Tagline

To add the box on the right, you need to create a rectangle that is 220 pixels wide and 39 pixels high. The

trick is here to create a rectangle, and to add borders that are round.

Figure 10: Tagline


8/27

The first part of image above is what we want to achieve. Basically, you need to add a rectangle, then right

click on it, and select , then . Then, a yellow triangle appears on the

rounded rectangle. Slide that triangle to adjust the roundness of the borders.

Figure 11: Different kind of roundness

In the rectangle you've just drawn, we'll also add two texts. The first one is "Big Cartel is hiring" (add a

Bold on that sentence), the second one is "UI designer (anywhere)". The two texts should have a size of

11.

Here where we are at so far.

Figure 12: We are getting there

What if we added some styles to that rectangle? The first thing to do is to add a style to the border, then

add some background color. The border should have the hexadecimal color of #cccccc, and the

background #f1f1f1.

Figure 13: Settings border and background colors


9/27

Now that the border and the background colors have been set, it should look like this.

Screencast - Building the small ad

Duration: 4min 49s

Figure 14: Current situation

Now add the following items on the wireframe.

Figure 15: The bar menu

Screencast - Building the title of the content zone

Duration: 39s

We'll now add the thumbnails on the page. This will be exciting, as we will play with dynamic panels, which

are what give Axure its real power. Basically, a is the widget that allows an object to have

different states. First, let's create the box that will contain the thumbnail, and add the author name below

this box as well. The box should be 220 pixels wide and 191 pixels high.

Figure 16: Drawing the thumbnail

What is an hexadecimal color and why does it seem so strange?

For complicated reasons, computers do not use the decimal system to calculate. They count in

hexadecimal - basically, decimal has 10 numbers (from 0 to 9), and hexadecimal ranges from 0 to 15.

In the hexadecimal world, the number 10 is represented by the letter A, 11 by B and so on - F being 15.

On the web (and in the computer world), colors are defined by a number of 6 hexadecimal digits, like

F1F1F1 for instance. Having 6 digits allows computer to display 16,777,216 different colors. It's pretty

cool.


10/27

Why do we add only one thumbnail? Because we will have a perfect working thumbnail, and then we are

going to copy it. So the work will be only done once.

Then add the thumbnail inside the box we've created (dimensions: 200 pixels wide, 150 pixels high), and

add its data (such as the number of v iews, number of comments and number of likes). As with every other

images, the icons used to represent the data will be replaced by a .

On the left you have the real thumbnail, on the right its representation in Axure.

Figure 17: On the left, the real thumbnail. On the right, its representation.

On Dribbble, each thumbnail has a rollover effect when you put your mouse over it.

Figure 18: The rollover effect on a thumbnail.

Let's try to do that with Axure. Start by adding a to your wireframe. are

located at the bottom of the list of widgets. Give it a slightly bigger size than the thumbnail. To do that, do

like the image below.

Figure 19: The dynamic panel.


11/27

Then, double click on the dynamic panel you've just created. This will load the

. Give the dynamic panel a name, and add another state by clicking on the + green sign. For

documentation purposes, I usually give a name to each of my dynamic panels - that way, you can easily

identify the dynamic panel you want when you need to add interactions to it - we'll see that later.

The thumbnail component will have two states: the first one is the image, the other one is when you mouse

over it.

Figure 20: The dynamic panel state manager.

Then, double click on the state called State1. That will open a new tab that has the name of the state.

Figure 21: A new tab on the screen.


12/27

You can easily go back to the tab you were before by clicking on the tab called Home. You can also

navigate through all open tabs by using the keyboard combination !+ Option + Arrow left/right.

Now go back to the Home tab, and select the thumbnail and the title. Cut it using one of the method below:

Right click on the wireframe and select Cut,

Use the Edit menu and select Cut,

Use the keyboard !+ X

Go the the tab called State1(Home) and paste the selection. Now, we face a problem. Pasting a set of

widgets does not paste it at the place we want. It never does. And inside a dynamic panel, we need to

make sure that the widgets are in the upper left corner, always.

Have you noticed the dotted blue line in the panel state State1? It represents the width and height of the

dynamic panel you've set in the Home screen. Changing the width and height of that panel in the Home

screen will also modify the width and height of the blue dotted line.

You have to make sure that all the widgets that represent the thumbnail fit into this blue dotted line.

Figure 22: The widgets must fit into the blue dotted rectangle.

To place all the widgets in the upper corner, you can either move them one by one, or group them (by

using !+ G ) to move the whole block. The latter solution is the most convinient.

Then, go back to the Home screen, double click on the Dynamic panel again, and double click on the

State2. This creates a new tab, and you end up with the same empty screen as before. This s tate (state2)

will represent the state when you put your mouse over the state1.


13/27

, , . .

Figure 23: The two states.

We need to apply a specific design for the state 2, based on the first state. Basically, when the mouse will

be over the thumbnail, the thumbnail becomes gray, blurry and the title of the thumbnail appears. Let's do

that.

Add a rectangle above the thumbnail that has the exact same width and height (200 pixels wide and 150

pixels height). Then, set a background color for this rectangle to #cccccc and add an transparency of 70%.

Figure 24: Transparency.

Then add the name of the thumbnail above the rectangle, as well as other info:

Thumbnail name (size: 14, bold)

400 x 300 (120 000 pixels) (size: 12)

September 12, 2011 (size: 12)

Figure 25: The final state 2.

'


14/27

, .

version.

Screencast - Dynamic Panel Part 1

Duration: 10min 32s

Click on the Prototype button in the header of Axure (or click on the Generate menu, then Prototype. Axure

will probably ask you if you want to create a folder with the name of your project, say Yes. Then your

default browser should open.

In your browser, you can see what we've created. Try to mouse over the dynamic panel that contains the

first state... Nothing happens, right? Well, we need to make it work and react to the mouse over event.

Go back to Axure and go into the State 1 tab. Select the rectangle, and on the panel,

switch to the Interactions view. Double click on the event called OnMouseEnter.

Figure 26: Switching to interactions view.

Basically, the interaction panel is the tool that allows you to do "stuff" like hiding a widget, opening a link or

move something when you click or mouse-over an element. It is extremely powerful. In our case, we will

ask Axure to switch the dynamic panel to the state 2 when I mouse-over the state 1.

Back to Axure. You've doubled clicked on the OnMouseEnter event. You want to add an action called Set

Panel state to state, then select your dynamic panel, choose the state. And click OK.

Figure 27: Case Editor.

How can I select a widget in a group of widgets?

If you have a group of widgets, a click on one element of the group will select the whole group. In order

to select only one element of the group, you have to click twice - not a double-click, but two separated

by approximately one second.


15/27

Once you click on OK, a little yellow number has appeared on your rectangle. This allows you to know that

an action is linked to this widget. Moreover, there is also the action displayed in the right panel.

Figure 28: A case added to the rectangle.

Re-generate your prototype again to see it in the browser (Generate menu, then click on Prototype). In

theory, when you mouse over the rectangle, the state2 should appear. Pretty neat.

Figure 29: The wireframe in your browser.

Now that the transition from state1 to state2 is done, let's deal with the transition between state2 to state1.

Let's go to the State2 in the tab and select the rectangle, like you did in the State1 tab. This time we will


16/27

apply an action called OnMouseOut - that means, when the mouse goes out of the rectangle zone, we

want to display State1 again.

Figure 30: The OnMouseOut action step 1.

As before, apply the Set panel state to state1.

Figure 31: The OnMouseOut action step 2.

Regenerate the prototype, and you now have a working dynamic panel.

Screencast - Dynamic Panel Part 2

Duration: 05min 39s

The next step is to duplicate that thumbnail in order to fill the page with the 14 remaining thumbnails, so we

can have a real Dribbble homepage. We could duplicate the dynamic panel by copying it, and pasting it 14

times. That's a possibility. But what if you need to modify the original dynamic panel for some reasons? In

that case, that means going through the same 15 dynamic panels, and modify them one by one. That'd be

pretty boring and time-wasting.

Fortunately, Axure has created masters for that. As I already explained, masters are a way to do the work

only once. If you put the dynamic panel that contains the thumbnail in a master, you can paste as many

copy of this master on any page you want, and if you ever need to modify the master, all the copies of the


17/27

master will be instantly changed. That is really useful. Let's create our first master.

Screencast - Introduction to masters

Duration: 01min 10s

Click on the Add master button in the lower left corner. Once created, right-click on the master and select

"Rename" to rename it to thumbnail.

Figure 32: Add a master by clicking the Add button.

Then right-click on the dynamic panel which contain the thumbnail, and paste it into the master. To go into

the master, double click on it to open it in a new tab.

Figure 33: Placing the master.


18/27

You can now go back to Home tab. Drag and drop the master into the wireframe in order to add thumbnails

to the page. Don't worry about aligning them for now.

Figure 34: Adding the same masters multiple times.

You can align them and adjust spaces between those masters by selecting the three masters, and click on

Align top icon, and Distribute Horizontally icon.

Do that multiple times until you reach 15 masters in total. The screen below shows you how it will look

eventually, at a 65% zoom.

Figure 35: the 15 masters at a 65% zoom.


19/27

Screencast - Masters

Duration: 04min 48s

We can safely say we have finished the thumbnails stuff. We'll now build the sidebar on the right. Let's

start by creating a tag. The tags are basically going to be a on which we'll add some sty les. The

text in the rectangle will have a size of 11 and a color of #777777, a background-color of #E4E4E4. Don't

forget also to add some roundness to the borders of the rectangle.

To add a text inside the rectangle, simply double-click on the rectangle and start typing the text.

Figure 36: Adding tags.

Then add the Browse by color content. Each rectangle in the bar is 20 pixels wide and 12 pixels high.

Figure 37: Adding colors.


20/27

After that, we need to add the ad. The ad is 220 pixels wide and 163 pixels high, with a border (color:

#dddddd).

Figure 38: Adding the ad.

Screencast - Popular tags

Duration: 00min 40s

We can now focus on the creation of the projects widgets. As we have three projects to display, the best is

to create one, then create a master out of it and finally duplicate this master. As you can see on the

screen below, the project widget contains subtle graphics. If you want to create them, you will have to

zoom into the wireframe.

Figure 39: Drawing projects.


21/27

Once the master is created, copy and paste it three times.

Figure 40: Showing the masters.

Do the same for the rookies sect ion now. Create the rookie item, then copy it into a master, and add it to a

master file that you will duplicate 8 times.

Figure 41: Drawing the rookies.

Wow. We've actually finished the content section. You've learned how to create masters and use them on

the right situation.

Screencast - Projects and rookies section

Duration: 06min 00s

Building the footer

The footer will be very easy to build. It's basically a set of links and some legal gibberish. Take a look at


22/27

the current footer.

Figure 42: The current footer.

As you can see on the image above, the footer has a white background. However, later in this guide, we

will apply a background grey color to the wireframe (as the main background is greyish on Dribbble).

Therefore, we have to manually place a widget that has a white background on the wireframe - otherwise,

the footer will have the gray background color we will add later on.

Start by adding a rectangle 940 pixels wide and 142 pixels high and remove the borders using the

panel.

Figure 43: The line width menu that lets you remove the border.

Add the following links to the footer. Again, don't worry about the sty ling. We will deal with all the visual

aspects at the end. Trust me, it will look awesome. All the elements of the footer must have a size of 12.

About / FAQ

Blog

Contact

Testimonial

Rulebook

Terms

Privacy

API

Store

You can also add the copyright notice. Finally add a logo on the right side. Here is what the final footer will


23/27

look like:

Figure 44: Footer.

Screencast - Footer

Duration: 00min 47s

I can't believe it. We now have a complete wireframe of the homepage of Dribbble.

Figure 45: The complete wireframe.


24/27

Putting some colors

Now that we have a nearly perfect version of the Dribbble's homepage, we can focus on something we

rarely do at the wireframing stage: we'll add some colors. As I already explained, as information architects,

you should keep the wireframe as visually clean as possible, without adding any colors, styles, shapes of

any kind. Why? Simply because it is not your job. We are here to provide the skeleton - art directors (or

web designers, or simply perhaps designers) will take care of adding flesh to that skeleton.

However, for the purpose of this exercice - which is mastering Axure, we will try to have a wireframe that

has the exact same look as the original.

Styling the header

To start with the header, we will need to add some colors to it. The header of Dribbble is actually a texture,

which looks like a gradient.

Figure 46: Styling the header.

After applying those colors to the wireframe, here is what we get.

Figure 47: The header in Axure.

Styling the background

To style the background, enter the color #F0F0F0. The background color will be applied to the whole

document.

To set a background color, simply use the panel located at the bottom of the screen.

Figure 48: Adding the background color.


25/27

Styling the links

To style all the links at once, we will use the , located at this place.

Figure 49: Location of the widget style editor.

In the popup that opens, select Hyperlink (because we want to style all the links). Then, toggle the Bold

option, and change the Font color to #4083A9.

Figure 50: Widget editor.


26/27

All the links in your document have now the exact same color and boldness. It's great, because that is

what we wanted... except for those links in the footer. Take a closer look on the screenshot below.

Figure 51: Links in the footer.

Screencast - Styling the content

Duration: 06min 22s

To change the color of those links, you can override the color of the style you've defined by changing the

color (#777777) and the font size (12).

Figure 52: Real colors for the links in the footer.


27/27

Final touch

We nearly have a functional wireframe. The only thing that we need to do now is to center the wireframe

when you preview it.

To do that, you need to click on the button in the panel. When you press the

Center icon, nothing will happen on the wireframe. The centering is only applied when you preview the

HTML version of the wireframe.

Figure 53: Centering the wireframe.

Screencast - Final tip and final words

Duration: 01min 17s

You are now done with this chapter

You've learned how to create your first wireframe. In the next chapter, we'll learn how to do some advanced

stuff with Axure, like...

Having a dynamic menu,

Linking pages together,

Using global page formatting,

Adding drop shadow effects,

and many more stuff.

I'd like to thank you for the purchase of this tutorial. I hope this guide has helped

you use Axure. Feel free to browse Totalwireframefor other libraries you might be

interested in (including a cool Facebook one).

Regis Freyd, author of Totalwireframe

Mastering the Basics of Axure

Documents