Developing the grid that supports your design

Just a few months ago when I created any design, I didn’t practice a grid system. I didn’t know much about it so I thought that I can live without it. Yes it’s true. You can live without a grid system, but should you? Why is the grid important? I will try to answer to all of your questions in this article.

Developing the grid that supports your design

When you decide how you will develop a grid that supports your design, you should first decide on which screen resolution is your design based. For example, if you design for 800x600px resolution (it’s rare you know :), then you should use 760px (you will loose 40px for the browser scrollbars). If you design a website for the 1024x768px resolution, then you will settle with a 960px (because it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, 16). An interesting article about the best resolution for 1024px you can find at Cameron Moll’s article on his blog.

What is important and what should you know when you are deciding the grid? First of all, you should know how many columns will you use (2 is OK, 3 is OK, more than 3 is bad (unless you are designing a newspaper home page)). Let’s say you will use a 3 column layout like this one, and you must make a position for a banner that is 340x200px wide and high.

Developing the grid that supports your design

We will use a 5 column grid layout, with a 20px gutter, and a 20px both left and right margins. Why 5, you may ask? Because, this way we can combine columns and we will get enough columns for our needs. You are not following? No problem. We will use 1 column for the left side, 2 columns for the content, and then 2 columns for the right side (because of the banner). Here is a picture :)

Developing the grid that supports your design

With 5 columns at our toes, we can create 3 columns layout (1x2x2 or 1x3x1 or 1x1x3), 2 columns layout (2×3, 3×2) or even 4 columns layout (1x2x1x1). Options are practically infinite.

Developing the grid that supports your design

But, let’s get back to our layout. We said that we have a banner (340×200), that’s not a standard banner, but we are not developing a standard site, right? We also have 5 columns. Now, it’s time for some mathematics. Take a size of your banner (340px) minus 20px gutter and divide the rest by 2 (320px/2 (for two columns)). You can see that each column will have width of 160px.

How will we create a grid? It’s simple now. 20px (left margin), 160px (column 1), 20px (gutter), 160px (column 2), 20px (gutter), 160px (column 3), 20px (gutter), 160px (column 4), 20px (gutter), 160px (column 5), 20px (right margin) = 920px.

Developing the grid that supports your design

I said that I use 960px for the content. Sometimes! The point in design is that there are some rules (stick to the black text on white background instead of pink text on green), but in fact you should use your imagination when creating a new design. That’s the best tool you have.

Why is grid important?

When you develop a grid that you will use when creating websites (and I mean websites that are similar, not totally different) you will have more time to thing of design possibilities because you have a grid already developed. With this, you save time and money. And the best thing is that your designs are consistent. It’s easier to adopt the design if the client wants to move the content right or left, or if he wants the navigation to be on the right side instead on the left. Think of the possibilities.

Useful

More about layout grid at Subtraction
Layout grid at Smileycat (Article)
Layout grid bookmarklet by Andy Budd

Emanuel Blagonić

A Designer and Developer in one. With years of experience in design and front-end development, nowadays he is more of a project manager than a designer. Specialized in responsive design and UI design for touch–screen interfaces, Emanuel is also strongly connected with WordPress.

blog comments powered by Disqus