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.

Discover Axure's UI

  • Duration: 03:05
  • Level: beginner
  • Axure Version: 7.0+
  • Date: Jun 26, 2015


So you've downloaded (or even better, bought) Axure and you are ready to tame the beast - or at least, play with it for the first time.

When you first load the software, it's a bit like opening Photoshop - you don't really know how to get started. How can you make such complex wireframes with… well… basically nothing? Don't worry - we'll get there.

The Axure's UI is divided into 4 main parts.

Let's start with the first part - the part located here. The first thing to notice is the Sitemap panel. Each element of this panel is a page. If you double click on a page, it will open in the center part of the screen. If you double click on a page, you can rename it.

You can reorder the pages however you want - whether by clicking on the arrow keys here, like that, or by drag and dropping a page.

You can also use folders to group pages that are alike or belong together. Note that if you double click on a folder, nothing happens. It's just a way to group pages. Simple but super useful for big projects.

Below the Sitemap, you have the Widgets panel, that you will use 99% of the time. It's too bad this panel is not bigger, by the way, given its importance. A widget is the core functionality of Axure. A wireframe is basically a set of widgets. To use a widget, simply drag and drop it on the canvas, and you are done. Each widget has its own set of properties - which we will talk about in a minute.

Below the widgets panels, you have the Masters section. At the moment, it's totally obscure and that's ok. We have a dedicated lesson just for this panel - so don't worry about it for now.

Let's move to the right part.

At the top you have the Widget Interactions panel. Again, despite its critical importance, we won't cover this panel at the moment - a separate lesson will cover this subject. You just have to know that this is where you will set the interactions made on the widgets, like what happens if you double click a button, or move something on the canvas.

Below you have the Properties panel. I'd say this is the second most used panel when you do a wireframe. After placing a widget on the canvas and selecting it, you can configure the widget using this panel - its width, height, style if it's a text, and so on.

Finally you have the Widget manager. This works in pair with the widget called Dynamic panel, which is one of the hardest widget to understand, unfortunately. Again, don't worry, we've made a lesson just for this part.

The bottom part of the User Interface is a panel that is not essential, but still good to know. For each page, you can enter notes, that would be displayed both on the web version as well as the generated documentation, add page interactions - like for instance, set a certain variable when the page loads and finally, style the current page.

At the top of the user interface resides what I call the Top Bar panel. This is where you generate the wireframes or define the order of the widget on the page.

Continue your learning