mastering the basics of axure
TRANSCRIPT
-
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.
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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?
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
'
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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.
-
8/12/2019 Mastering the Basics of Axure
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