Join Jim Babbage for an in-depth discussion in this video Using document templates for wireframing, part of Fireworks CS5: Rapid Prototyping.
Document Templates, which are new to Fireworks CS5, can be a real timesaver, whether you want a little inspiration, or a way to skip over some of the basic drudge work of setting up a new document. Let's have a look at the Template feature. There're three different ways you can access the templates. Right from our welcome screen over here on the right- hand side, in the Create New column, you'll see an option for From Template. We can also go into the File menu. In the File menu, we have the obvious New from Template option, and then the not so obvious New. If I click on New, you'll see here in the New Document window, we have a link into the templates.
So I'm going to click on that, and there's the Templates folder. We've got five main categories of templates, and you might be thinking, because we're building a wireframe, but we will be going into the Wireframe folder, and that's good thinking, but in this case, it's not what we want. The wireframe samples are actually completed wireframe and while they're a great reference tool and learning tool, you'll probably spend more time adjusting them to get what you want than you will if you build something from almost scratch. So where we're going to go is the Grid systems folder.
The Grid systems folder has a variety of different 960 pixel-based grids that you can work with, from Grid 4 all the way up to Grid 16. The greater the number of columns, the narrower the columns are, which allows for more accuracy and flexibility for intricate layouts. For our sample, we'll be using the 16-column grid. So, I'm just going to go ahead and select Grid 16, and click Open, and I'm going to zoom out a little bit, so we can see this a bit better. Now if I hop over the Layers panel, just minimize my Optimize panel there, we've already got three layers in this design, and that's because we're pulling in from this template.
These all essentially pre-built elements. We've got Grids, Side bars and Leading. We'll take a quick look at each of these. Now the Leading basically controls, or gives you a guide for line spacing for text. So if I hide that Leading layer, turn it back on, you'll see those faint blue horizontal lines will disappear and reappear. The Leading lines are using an 18 pixel- based line, which is a pretty common way to space out your text inside of a web page and maintain its readability. Next one down is Side bars, so again, I will hide those, and you'll see that little gray stripe on the left and right sides of the design appears and disappears.
Basically that sort of indicates the stopping point for your 960-pixel width. Anything within those gray bars is part of a 960-pixel grid; anything outside of it is just basically more browser viewport area. The last one here we have is the Grids. And again, I'm going to hide them and show them, and these ones are pretty obvious. You can pick up pretty quickly where they're coming from. Those are those actual thin columns that we see throughout. Now, there's one other element here, which currently isn't visible, but if go up to my View menu, go to Guides, so this is another really important component to the Grid System.
These templates come with pre-build grid arrangement. So you're not having to painstakingly draw in all your vertical grid lines, which can take a while and be little bit of an exercise in frustration. So it's already built for us, and you can see, with these brought in, we're getting our column areas, our gutter spacing between the columns, and so on. So these grid templates have actually been thought out pretty well, and should speed up our development of our wireframe. Now there are a couple of issues we're going to adjust before we get into creating any artwork for our wireframe.
First thing to note is that this document is 1040 x 1040. In our case, if you remember back to our final wireframe that we were looking at earlier, it's a pretty long page. So that dimension is not really going to work for us. So before I get into building any other wireframe pages, I want to set my document size. So I'm going to go over to my Properties panel and click on the Canvas Size button, and I'm going to change the height to 1990, and I'm going to set the Anchor to the top center anchor. And this will force all the new canvas area to be pushed to the bottom of the document, and I'll just click OK.
You won't see too much at this magnification, but if I zoom out, like we holding down the Ctrl key and the Minus key, you'll see that we've got significantly more space to our design. You'll also see that our Leading and our Side bars and our Grids stop at 1040 because they're all vector shapes; they aren't going to expand with the canvas size. So we're going to make a couple of changes, just to fill in the entire wireframe with our grid. One of the ones we've got to work with is the Leading, so I'm going to unlock the Leading layer, expand it down.
You'll see we have a rectangle here. I'll take a close look at that rectangle shape on the canvas, and you'll see, in the middle, two little arms. And if I zoom in, see the arm is a bit better. What this is identifying is the fact this rectangle's filled with a pattern, and that pattern is that 18-pixel baseline. In fact, if you look down the Properties panel, and you'll see Baseline 18. Now I want to scale this leading, in case I need it later on, but I want to be very careful about this too, because by default, when you scale a vector, the fill of that vector also gets scaled.
So we need to make a little change before we do anything else. I'm going to go to my Edit menu, go to my Preferences, and you'll see here in the General category where it says Scale strokes and effects, that currently is selected. What this means is that if I resize that rectangle, the actual grid that's being used for my leading is going to resizes as well, which we don't want. We don't want additional space between each of those lines. So, I'm going to deselect that and then click OK, and I'm going to zoom out a little bit.
Now I need to scale this. There's several different ways I can do this. I can use the Scale tool and drag by eye, which may not give me an accurate setting. We'll just escape out of that. What's even faster and a little more accurate, because we're dealing with just a plain-old rectangle here, is rather than doing any scaling by hand, go down to the Properties panel and change the height to 1990, and I press the Tab key. And while it's a little hard to see there, the leading actually increased.
I'll zoom in a bit, so you can see this a bit better. You can see there's our leading, all the way down now. Now you might be noticing what appears to be some odd gaps between some of the leading, and to be honest this is strictly the magnification factor. When we go up to 100%, that leading shows up on every single line. Okay, just when you zoom out a little bit, it starts to break up a bit. So just keep in mind they are there, just not that easy to see when you're zoomed too far out.
So, I'm going to lock the Leading layer again and Side bar is the next one. I'm going to unlock that. I'm going to click on the Side bar layer, and you'll see it grabs both rectangles. If I take a look inside of that layer, you'll see I do have two paths that basically are acting as my side bars. And again, just like before, I'm going to go into my Properties panel, and just type in "1990," and that will extend the side bars all the way down the design. Lock that up and collapse it.
Last but not least is the Grid. Now the Grid is, as we see here inside the Layers panel, a blue rectangle. If I select it, there're all the columns. And it's basically a composite path. It's essentially a whole series of rectangles that have been grouped together as one single path. So again, what I want to do here is extend these columns all the way down. So, I'm going to my height and change it to 1990, and that extends everything. So we're looking pretty good there.
All right, one last little check here. I'm going to go back in my View menu. I'm going to go to Guides. I want to make sure that Guides are showing up. We know that. But I want to make sure they are also locked, so that I don't get moved by accident, and my snapping feature is turned on which will allow me to snap to the guides as well. All right, so there we go. We've gone from nothing to a brand-new document, generated by a document template. We've customized the document template, customize the elements within the document template, so that our grid fills the entire canvas area.
In the next movie, we're going to be creating some custom symbols that we're going to be using on a regular basis throughout the creation of the wireframe.
- Planning and creating wireframes
- Creating multi-page mockups
- Adding interactive calendars and pop-up windows
- Embedding SWF files into an HTML prototype
- Creating AIR prototypes with rollovers, events, and pages
- Exporting to FXG 2.0
- Integrating with Flash Catalyst
- Creating customized mobile designs in Device Central
- Testing a mobile project