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.

Understanding the page note panel

  • Duration: 04:08
  • Level: beginner
  • Axure Version: 7.0+
  • Date: Jun 26, 2015


The Page Note panel is part of the Pro version of Axure. It's too bad that we have to pay for this feature because design-wise, it's really ugly.

We won't go through the Page Interactions tab on this video. We have a lot of things to say about it and if we want to keep this video short, we shouldn't talk about this.

The Page Notes tab shows an empty textarea. You can fill it to indicate comments on the current page. It can be as long as you want it to be. Those notes will appear in two contexts. The first one is on the web version of the prototype. The second context is the Specifications document that Axure generates, like the one I'm showing you right now. By default, a note is called Note (doh) but you can add other types of notes as well and name it however you like, such as Out of scope, for instance. When you create a new type of notes, it will be persistent across all the pages of your project. However, the content of each note is not shared across all the pages.

So now the question that you can ask yourself is… Is it necessary to add comments on every page of your project? Hum…. I'd say that it depends on the type of project you are working on and the team that you are working with. If you are working for an agency, chances are that you will have to generate complete specifications to the team that will take your wireframe and actually implement it. In that case, you won't have much choice to document what you are trying to accomplish. On other projects, you just need to show a particular behaviour and the documentation won't be needed.

Let's move to another tab now. The page style tab.

Here you will define how the page will behave, or look like, when the prototype is generated. Or not. Well it's a bit confusing to have this panel here, and not when at the moment you want to generate the prototype, isn't it? Anyway, let's take a look at each of the options available in this tab. The Page Align option. Basically, when this button is activated, the upper left corner of the canvas will be the upper left corner of the browser when the prototype is generated. This button, however, will make the wireframe centered inside the browser instead. If you click on it inside Axure, well, you can see that nothing happens, actually. This is because the difference can only be seen on the generated prototype, inside the browser. Check it out: here is the left aligned version. And here is the centered version. Of course, I heavily recommend to centered align your pages. It looks better.

The back color option is self explanatory, I guess, as well as the background image.

The three options below (those three) are actually complicated to understand because… they apply only to the background image. Yeah I know it's super confusing. Let's take a look. I select an image of the best Hollywood actor because I like to put some life in my wireframes. Then, here is what happens when I press one of these buttons. Do you see it? Honestly, I never used this feature in the 8 years I've been using Axure. I don't even know why we have it.

Finally, we have this option called Sketch effects. These effects are for you if you hesitated between Axure and Balsamiq, another great but way, way less powerful wireframing tool. You can remove the colors from the wireframes, as well as apply a sketch effect to every shape of the page. Again, never really used this feature, so it is to use with caution.

Continue your learning