Welcome back to another edition of the Design Columns tutorial. Today, we shall explore what we need to do in order to set the canvas for Mindfly's Ninja Experience. For anyone who doesn't remember -- long weekends tend to mess with the memory, I know -- we're looking at a designing a standard informational page with a header, a footer, two side bars (links and such on the left, a box for specials on the right), and the main information in between. Because we're lazy, the background is white in these examples, except when it's not.
Because I like making executive decisions, we'll say the client wants a fixed width design. For ease of fitting all monitors, the width is 775px. I usually like making the height much longer than I'll ever use, so when you create a new Photoshop (or program of choice) document, set the width to 775 pixels and the height to 800 pixels. There's really no reason to go higher than this at all in the design stage, unless your website is so complicated that some information will scroll off the screen. Big-time Amazon-like companies do this, or any site that involves lots and lots of information overload, but I don't recommend it for Mindfly's ninja brigade. They're shy.
What I like to do is to try to visualize in my head (or sketch out on a scrap piece of paper or sketchbook) a rough concept of what the layout will look like. I'll drag guide lines over the blank canvas until I get an idea of how many columns I want to try for. This is usually a little bit of a time-wasting process, as I invariably change my mind about midway through, but that's why god invented multiple-selectable Photoshop layers. How you choose to decide on the number of columns is entirely up to you -- I've also been known to throw on some random blots of color to represent header, footer, and major elements so that I can see what kind of space I'm working with (see image left).
As you can see, the black is the header space, the green is the left sidebar (we'll call it navigation), the red is the right sidebar ("specials"), and the blue is footer space. The lines in between are proposed text space, but infinitely mutable. Now, offhand, assuming all of your columns are going to be the same width, I'm looking at 4 columns. How did I get that? A very rough estimation: take the green bar (1), realize it fits twice into the space beside it (there's 2 and 3), and then the red (4). Four columns.
Now realize that you're going to need space between columns, called gutters. If you don't have space between columns, you end up with elements nestled right up to each other, which leaves a messy website. There's several ways of figuring out gutter width -- guessing, choosing whatever you think looks appropriate, etc. -- but for me, I'm going to take a different route. I'm going to put a heavy black line around the whole canvas, and then place the left sidebar an aesthetically pleasing distance from it. This black line represents my "border" for the site, which may or may not stay black (I'm fond of borders) but will always be there. Drag a guide to either side of the gap, like this. Now, measure the distance between the left border line and the first edge of the left sidebar. What is trhat gap? Let's say 15px. Now, in Photoshop or program of choice, measure the distance between the outer-most guides (we don't want our outside border to muck up the space between elements). Our 775px just dropped to 769px, since our border is 3 pixels wide. That's our playable space.
Here comes the math... It helps me to draw this out, so let's do that. Draw a square on a scrap sheet of paper; this represents the 769px of your canvas. Put in three lines in fairly equal shares (don't bother with a ruler, it won't matter!), and you'll have four columns. Each vertical line in that box, from the first one on the outer left to the last on the outer right, represents a gutter. At the top of each vertical line, write in "15", just so you remember that each one of those lines is 15px wide. With me so far?
Take your gutter size (15) and multiply it by how many there are: 15 x 5 = 75
Subtract that number from the total of your useable canvas: 769 - 75 = 694
Divide the total by the number of columns (not gutters!): 694 / 4 = 173.5
In order to keep my brain from exploding, we'll change that number to a simple 173. We'll be off by 2 pixels in the last column, but that's okay.
A quick decode: Your gutters will be 15px wide. Your columns will be 173px wide. You'll have four columns. Five gutters.
Now the quick and dirty way to assigning guides to these numbers. On a new layer, take your Rectangular Marquee Tool and draw out a selection that is 15px wide. Don't worry about length, just make it tall enough that you can see it. Fill it in with a bright color color of your choice, as so. (My examples are shrunk down, that's why they look much smaller.) Now, zoom in so you can get a close look at what you're doing. Immediately where your gutter selection stops, draw another wide selection with your Rectangular Marquee Tool, but make this one 173px wide. I like to make it a little taller. The fill it in with a different bright color of your choice, like this.
With your column marker ready to work, all you have to do now is drag the whole layer over so that the edge of the column marker touches the very first guide on the left. You should find that the guides you made earlier are fitting exactly to the gutter-marker (mine is yellow). Zoom in some so that you can be sure to get the exact pixels, and then drag a new guide all the way over from the left to the very end of the column marker (my color is magenta). Once that's in place, drag the layer over to the right so that the far left edge of the column marker rests on the new guide you just made, and repeat the process. One guide on the divide between yellow and magenta (gutter and column), and one guide at the end. Repeat this process until you have guides all the way across your canvas. Don't worry if one guide happens to be a little off -- you can futz with that or not as you like.
Once you're done, you can delete the "fake" design you made (or not, whatever your preference is) and you should have canvas that looks a lot like what we see at the right (click the image to see the full thing). I made the background gray specifically so that you can see the guides. It was a lot easier than changing the guide color, see.
Congratulations! You have made design columns.
So, to recap:
- Find the width of the canvas, while making adjustments for border space or elements in border space, if any.
- Figure out the rough amount of columns you'd like to use (rule of thumb: the more information saturation, the more columns; nobody likes reading huge blocks of run-on text!)
- Decide what size your gutters should be. (I choose this arbitrarily, at this stage.)
- Do the math. (I'm not doing it again, it gives me hives.)
- Lay out your column marker.
- Set the guides.
- ????
- Profit!
...But, wait! There's more. Now that you have them, what are you supposed to do with them? Slap elements on the page willy-nilly?
Tune in next week for the next exciting edition of Design Columns: There's Ninjas in my Sock Drawer.... I mean, Part III!
I realize I forgot that I did not actually name my Intro as Part I. Creative decision-making. It's okay, everyone will get over it.
