2.a. Setting up axure page properties and guides

Setting up a page for wireframing. Page properties. Setting up guides for your page.

Back to all videos

Video 1 of Part 2: Widgets and Masters – Wireframing Basics

Transcript

By the end of this section you will be able to create simple static wireframes. We’ll be using some of the native wireframe widgets, and we’ll be editing the properties and formatting of these widgets. We’ll turn our widgets in to masters where appropriate, to ensure minimum duplication. Duplication is your enemy and can lead to substantial rework when making updates to our wireframes.

Page notes

First, page stuff. This is where we can add notes about the page. This can be a useful exercise for clarifying the scope of the page in the project, both for yourself and others.

Page interactions – we’re going to stick with static pages for now.

Page styles

Page styles is useful at this point. This dialogue allows you to set up some basic settings like background colour, and you can set a background image, how it repeats etc. It’s a good idea to apply these settings to the default setting, so it is applied to all your pages, not just this one – (remember about duplication). It’s a good idea to set your font here too, so you don’t have to worry about this aspect unless you wish to deviate from it.

You can also add sketchiness settings here, which helps to show clients that your work early work is, well. Sketchy..

Page grids and guides

To the page now – first you will most likely want to work to preset dimensions, so we’re going to create some guides. There is a 960 grid guide preset, but, for now, we’re just going to drag out some global guides by holding ctrl (I think cmd on a mac) and clicking and dragging from the ruler. You’ll see the global guide is pink. If you drag without ctrl, you’ll see it is a turquoise colour. If you go to another page, you’ll see that our pink guides persist. You can delete unwanted guides by highlighting (they go bright green) and pressing delete.
So let’s put a guide at 10px, another at 610, giving us a 600px wide left column, another at 630, and another at 950, giving us a 320px right column. (These are fairly arbitrary values, just to get us going).

Our services

Using axure we prototype your ideas for:

  • mobile apps
  • web apps
  • desktop app
  • embedded devices

Our axure prototyping services

We take your axure prototype and turn it into working software in:

  • .NET
  • PHP
  • Java
  • All other common technologies

Our axure development services

We provide the world’s best axure training, including:

  • Introductory courses
  • Advanced courses
  • Mobile and Responsive courses
  • Master classes

Our axure training services

Just a few of our customers

European Union
VISA
IBM
KPMG
BBC
Rolex

Contact Us