Grid Based Design: Creating the Grid

Over the last couple weeks I’ve gotten a few requests for design advice from a few friends regarding layout/structure and the common thing I noticed with each is that no strict margin/grid system was being implemented.

I wrote up an explanation illustrating the process I follow to get my structures in place, so I’ve decided to throw it up in the blog for anyone else who might stumble upon it.

Step 1: Defining the Parameters

Before I start working with any numbers I layout my initial canvas as a rough sketch – I often sketch mine right out on paper. I do this to define the type of architecture – liquid graphics or framed within a box – and to get a rough idea of how I want to control content, IE column numbers. These often vary from project to project.

Step2: Setting up the Canvas

In general, I’ve stopped supporting 800×600 designs, I optimize for 1024px so depending on the design style, I usually pick between 960px-1000px widths. I like to push my backgrounds to the 1280-1440 range, but I limit my content to something below 1024. If you’re required to work for an 800×600 audience, I remember 780 was my sweet spot.

For fluid/open concept designs, I often use larger margins, so I tend to set my content boundaries around 1000px. For framed designs, I’m going to have an extra margin on each side of the content boundary for the space between the content and the frame, so I often set my content boundary to 960, so once I’ve set the frame up, the whole thing is still under the 1024 mark.

Step 3: Setting the Margin/Grid Values

With web design, it’s a little tricky to work with an absolute grid (like graphing paper, it’s generally solid along the x-axis, but y gets tricky, especially when dealing with dynamic content) with different browser’s sizing interpretations, but I like to keep all my blocks of content/graphics separated by a consistent spacing value.

Again, depending on the type of architecture (open or framed) I’ll settle on something between 10px-30px.

Step 4: Setting up the Grid

With the design process I follow I usually end up establishing the first 3 steps as I’m brainstorming different interface ideas/concepts, so I’m usually hovering between step 3 and 4 by the time I finally make my way into Photoshop.

The key to setting up a solid grid is knowing how well you will be able to mix and match content block sizes. I like to define fairly thin grid sizes, so while I may only break my content into 3 or 4 columns, I want to be able to break each column into 2 or 3 pieces, so I could have a content column worth 50% of my design, and be able to break off 1/8th for a related photo and everything will still conform to the grid I’ve established. See my Vectorthis grid arrangement for an example, specifically, the time line.

On one page, you may want to break your content in half/quarters, but another you may want to break into thirds. A common thing I’ve started to run into is working with halves and thirds on the same page. In this example I’ve broken the top half into 1/2 & 2/4, and the bottom into thirds. As a result, I like to try and pick a number of grid bars that can be divisible by both 3 and 4, such as 12 or 24 – essentially, I try to work with increments of 12 unless it’s a special case where I know I won’t have to cater to both, IE I could use 18 grid bars for strictly thirds.

Step 5: The Equation

After I’ve defined my canvas size and functionality limitations of the content, I do some simple arithmetic to define my grid bar sizes. For the following example, I’m going to set up a grid for a content area of 960, trying to set up 18 grid bars (columns of thirds). Ideally I want a margin of something around 12px.

1. Take your column number, subtract 1, then multiply by your desired margin value. We want 18 bars, which means we’re only going to have 17 spaces, because the left/right bars will be flush with the edges of our 960 content boundary. We want each bar to be 12px apart so we will have consistent spacing across the canvas. Our first step will look like this: 17*12 = 204
2. Next, subtract that value from your total content area: 960 – 204 = 756
3. Next, divide that result by your column number: 756/18 = 42.
4. If you’re working with a framed design, add an extra margin space to each side of your content boundary to separate it from the edges of the frame, like so. If you’re working with an open concept design, you can skip this part since the only frame you’ll deal with is the browser window.

Now that you have a whole number, your grid bars will be 42px wide. If you end up with a decimal, you need to repeat the process trying different values for your margins / total grid numbers. If you tried 14px margins, you’d end up with a column width of 40.1111 and since you can’t work with fractions of a pixel, you won’t evenly take up the space.

Additional Thoughts

Sometimes it’s a little tricky to strictly stick to the grid lines – IE dynamic items like horizontal menus, login/status information – but as long as you try your hardest to keep content blocks (IE treat the menu as a solid block and don’t count the space between each link) conforming to the grid, it generally comes out pretty solid.

Also, a common thing you’ll run into is dividing content. Sometimes you may have content appearing in a box, or you have dividing lines between content blocks. A practice I’ve adopted from print/magazine design is to keep the content conforming to the grid and to apply any accents outside the grid to 1/2 the margin value. In this example you can see I had my accents bleed 50% into the margins. This allows content to stay aligned to each other regardless of any highlighting accent – See the top content block stay aligned with the Feature Product text underneath it.

Sometimes your content won’t allow you to make up all of your own column sizes. If you’re working with any kind of advertising you’re going to be forced to work with some fixed column sizes. In those cases, what I do is I’ll establish my advertising columns, then I’ll isolate the content columns as my boundaries and apply the same process. You can see with Hockey.com I framed off two side columns for advertising/widgets then applied my process to the available space left over.

Edit ( Jul 27 2010 )

This was the process I followed for a long time. About a month later I came across The Gridmaker. I have hesitated from taking the post down because there’s still useful info present on why I use grids and how, not just how I create the bars.