Video 1 of Part 2: Widgets and Masters – Wireframing Basics
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.
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 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).