I suppose it's always a good excuse to say, "I'm sorry I didn't get this up sooner, we've been really, very busy, you see, and my skills were needed to, you know, make money." Now that I've said that, it's time to skip right to the meat of the matter! In this case, the content of a website and how it applies with design columns. For anyone who forgot what we were doing, it's all right. Take a moment. Re-engage. Breathe. Are you ready? There's no preface today, instead we're getting right to work.
Unfortunately -- as if life weren't confusing enough -- this is where you start to run into varying opinions. There's a million of them and all of them are right, wrong, and generally comprised of "meh". In short: make your own opinions, but follow along with mine for now.
To catch-up: We've made our design columns, 4 of them to the page, with 15px gutters. Now on to the Mindfly Ninja Experience!
The Client: The ninja brigade that secretly lives in Mindfly's server room. (Don't ask how, the thing's a coffin.)
The Need: A website that shares information about the ninja brigade and offers a section to sell ninja brigade merchandise.
Your Job: Make it work.
I like to begin with the branding, otherwise known as the header. Open up your tutorial PSD (or file type of choice) and make sure your guidelines are on. The branding is, as you well know, an important tool of a website: it's usually the first thing your viewer sees and should contain the immediate impressions of your site/business/etc. In this case, ours is about the ninja brigade, and so we want shapes, text and fluff that strongly speaks about our cause. (I won't get into the mechanics of web design; we'll be focusing specifically on how to make it work with columns.)
Heather is a proponent of everything remaining specifically in columns, lining up exactly, but I come from the school of tweaking. For the purposes of this tutorial, I'll endeavor to make just about everything fit specifially in columns, but the branding is one of those places where a little "extra" won't go amiss. If you don't have very specific gutters between elements in the header, it's okay, just use your best judgement and try to at least keep it close.
If you click on the image at right, you can see what I mean. See how the corners of the full sign (red arrow) are outside the boundaries and into the gutters? But the inside of the sign (green arrow) is within bounds? That's all right. Ideally, we're not going to be so cluttered that it matters. However do keep in mind that you don't want anything only making it part of the way into another column, unless there will be nothing else on that line. When it comes to graphics, go all the way into the next column if you need to. If you want to go the far right of the page and place some text that is right-aligned, you can do that! Just tuck it up against the gutter (not in the gutter). The branding is the most flexible, so fill it up all you like. Just make sure that the clear and important elements are safely within columns.
Now, using this basic theory, fill in your branding with whatever you think it needs: logo, h1 (title), possibly an h2 if you need a tagline, and so forth. Go on, make it pretty. I won't tell anyone. Check out the header here and look at all the arrows: you should be able to tell where I placed elements and how they fit into the columns.
It's a bit of a skimpy header, I admit, but for now, we're going for low-key. That's what ninjas are, right?
I tend to like moving on to the navigation immediately after. Your mileage may vary, but for now, that's what we'll do. Here's where the columns start getting a little more structured. Remember that we said we want the navigation on the left, so I'm going to use the ready-made block to designate how I lay out my links. Here's a tip: if a design element is in the background (i.e. a square block behind something like text or an image), it can but shouldn't always break the column. You're going to have to be the best judge of what works and doesn't. Since we're keeping it short and sweet, I won't get too fancy at all. Scope the brief navigation menu and look at the arrows to see how things fit. You'll notice that the text inside does not actually span across the entirey of the column (purple arrow). That's because I decided to make the background span it instead, and we don't want our text to be nudging up the boundary of the border, right? There's extra guides in that screenshot for that reason. (I'll remove them for the following screenshots.)
In order to skim over the content (don't really do this), I'll just be throwing things up on the page and putting arrows where necessary to draw your attention to how they span. I'm going to gloss over the actual contents for the sake of keeping an already long post short. A little of this, a little of that, the middle bits, too, toss in the arrows to show the full thing, and we have a very thin website built inside columns. Check it out on the left (hard to miss, yeah?) Click on it to see the full scope of the proof. Is it not nifty? Truly, we are gifted to have such ninjas amongst us.
I know, I know, it's not the most beautiful thing you've ever seen, but I'm just glad I got it out finally!
The idea, of course, is that the columns so described makes the content flow that much easier, and aside from a vaguely gushy part in the middle (Ninja Andy Clarke is such a diva), I'd say it gets the point across.
Memo: Don't ever do tutorials before a rush of work again. Ever. Seriously. Without vowels, even. Srsly.
