Hey guys,
I don’t know why but grid design is still something that I struggle to 100% understand sometimes.
One question I have revolves around the columns in a grid. If you had a 16 column grid, would you line up the content or the content-container/backgrounds with the columns in a grid?
see my example: http://img59.imageshack.us/img59/4969/picture3om.png
I think the first one (the black content area and text) is the correct version
Any tips/advice beyond this is also appreciated. Thank you!
Since we’re in IMHO, I’ll offer my uneducated opinion: yes, the first box looks better. But the second would look better, except that it looks odd having something overhaning the whitespace on the far left side. It makes it look like you’re violating the margin of the page.
The first one, obviously. Well, that IS the whole point of a grid. Why even have a grid if you aren’t using it to line up your content?
Maybe I don’t understand your question properly - are you planning on printing your grid as part of the design? Or is it invisible in the final piece?
SanVito,
Creative Director
Okay, I totally missed this bit, sorry (it’s a bit early here). To be honest, it doesn’t really matter as long as you are consistent - don’t change your own rules half way through your design. The grid is just your own guide - not the law. The grid isn’t something that the viewer gets to see, so they don’t know what lines up with what. In that sense, your example isn’t one we can judge, as the grid, presumably, won’t be seen in the final design.
A more important consideration is, if your box overhangs the grid, is that going to impact on other boxes/elements around it? It could cause you problems with the overall layout - but only you can make that call as we don’t have all the information.
Back again, been mulling over your question on my commute. The dilemma you have by putting your text in a box, and the consequent issue of what lines up with what, is a common one.
What you need to consider is how this text box fits with the other elements on your page. Is there text elsewhere that doesn’t fit inside a box and therefore fits to the grid? In this case, there is an argument that the text inside, rather than the box, fits to the grid also - this way, all your text is uniform and the box sits outside of this alignment - it probably makes better visual sense for the reader.
However, by hanging the box outside your grid, you could be throwing up problems. What happens either side of this box? Is there another box alongside it that also hangs outside your grid and does that mean they’re going to bump up against each other? It could throw out major problems for your overall layout. You could probably solve this issue by adjusting your grid to allow for wider margins between columns, but that’s for you, the designer, to make a judgement call on.
However, it might be that your boxed text sits apart from the main body of text - a quote box, for instance. It might be in this case that the text doesn’t need to align with other text on the page, and so the box, rather than the text, could snap to your grid.
All this is hyperthetical without seeing your overall page design. The main point is that there isn’t one clear rule… it all depends.
Hope that helps.
I work with page layouts a lot, and the black box is the way we do it. It means that where you have text in a box, the actual column width of text is narrower, to allow for the margins inside the box. (On our designs, text in panels like that is always set in a different typeface anyway.)
The tricky part can be where a panel covers more than two columns - do you make the two outer columns narrower and the middle ones the same width as the body text grid? Or do you split the difference across the whole panel in which case the gutters won’t align with the body text properly? It’s up to you what looks best, but a good way of fudging it is to use ragged-right copy in panels. 
It’s hard to say, as others have pointed out, without seeing the whole page. The grid is a guideline to help you keep things aligned. In general, if the text box is filled or framed (i.e. it will show), then you would go with the first example. But, you may want to hang the filled text box as shown in the second, if that’s part of the design- as long as you’re not going outside your printable image area. The filled text box acts as an image element as opposed to plain text, so it changes the way you use it.
Thank you guys. I appreciate the in-depth responses. It sounds like it’s not a concrete answer. What prompted me to ask the question was adding to another person’s initial design. They seemed to align the grid to text elements, rather than backgrounds, and it’s been throwing me off.
The whitespace issue that was mentioned is also seems tricky. If you use the content containers to align your grid, but one of them is white, will it look weird.
I’ve included an image of a project to give you an idea of what I mean. In this instance it seems the grid is used to line up text, rather than color blocks, etc.
I found some examples on http://960.gs/ if you scroll down and press the “show grid” button on a few of these example designs.
It looks like if there is a content container then you align the grid to that, and if it’s text with a background you align the text. Do you see what I mean after playing with the examples in that link?
I think you just need to look at it in different terms. For this purpose don’t think of text as text and different from a box. Think of both as visual elements. Line up the visual elements in a way that makes sense— So the edge of the text is the edge of that visual element and you would line it up with the edge of the next visual element-- either the side of a box, a line, another line of text. Make sense?
Hey Salem,
I think that makes sense. So if text is within another visual object (like a colored box) you would line the colored box up with text that does not have a container-because both the box and the text are visual elements
