Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Mastering the basics of Axure

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 straight-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 strongly 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 it. To modify it, right-click on the toolbar and drag/drop the following elements.

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 library which 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 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 omitted, 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. Dribbble has 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

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.

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 Tool on Chrome, or Firebug on Firefox.

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 Widget properties 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 Widget properties 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 move a widget with precision?

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 Widget properties 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.

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 Text panel 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 Distribute panel. Click first on Distribute Horizontally. Then, in the case your text panels are not aligned, click on Align, then Align Top.

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 Text panel widget.
  • The search box is a Text field.

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 Hyperlink 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

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 Edit button shape, then Rounded Rectangle. 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

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.

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 dynamic panel 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

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 views, number of comments and number of likes). As with every other images, the icons used to represent the data will be replaced by a placeholder.

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 dynamic panel to your wireframe. Dynamic panels 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.

Then, double click on the dynamic panel you've just created. This will load the Dynamic Panel State Manager. 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.

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 state (state2) will represent the state when you put your mouse over the state1.

Go back to state1, copy all the widgets, and paste them in the state 2. The two states are now identical.

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.

At this point, we have two states for this dynamic panel. Let's see what happens if you generate the HTML 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 Widget properties 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.

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.

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.

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 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 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.

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.

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 rectangle on which we'll add some styles. 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.

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.

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

Figure 40: Showing the masters.

Do the same for the rookies section 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 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 Line width 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 styling. 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 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.

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 Page formatting panel located at the bottom of the screen.

Figure 48: Adding the background color.

Styling the links

To style all the links at once, we will use the Widget Style Editor, 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.

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.

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 Page align button in the Page formatting 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...