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


Comments

22 responses to “Developing the grid that supports your design”

  1. This is a very interesting subject. I’ve heard about gridsystems, I’ve never used them though. Maybe for my next redesign I’ll get started with it.

    But I don’t understand how it works? Are there any special rules on how big the squares are supposed to be. Maybe I’ll need some guide or something.

    I’ll look around.
    Great post!

  2. Alexander, I think that you should use grid system for both simple and (especially) complex designs. It helps you define the right widths for your content (like you do when defining the values of your heading for example). There is also a possibility to group two or more columns to create more complex grids (look at the picture above).

    There are no special rules on how big the squares are (yet, you won’t use the square size of 169px because it’s not easily divided :). But you have to know for which screen resolution you are designing for, so your grid doesn’t go out of the visible area of the browser.

    Check out the “Useful” section (especially the first article there). If you need more explaining just drop a comment :)

  3. Very interesting stuff, sometimes grid system is helpfull. Next time i will us it (http://www.smileycat.com/miaow/archives/layout_grid.html), but i haven`t found good resources abut grid (making and breaking the grid – there is a book at amazon.com)

  4. Emanuel, Thanks a lot. I’ll get started with grid systems as soon as possible. I’ll try to apply what I’ve read and learned to the next project that I’m going to do. =)

  5. Interesting read. I am actually working on a new design of my site and using a grid for the first time. It’s really cool using one, and I hope it turns out good.

  6. Adam: I found grids very useful, especially when developing large sites. For smaller sites (2 columns design) and even blog design, there is in my opinion – no real need for developing the grid – but it’s useful to know how to develop one. Nevertheless I think that the grid is not particularly needed when creating a blog design, you should use it just to get used to it.

    Alexander and J.Phill I am glad you found this article useful :) And to Phill I have to say that I think it will turn out good for you.

  7. I also until recently designed my websites not using grids. But now I am redesigning my website, I tried it, and its really useful. It makes the process a lot quicker and more precise.

  8. You said it well Jaap.

  9. This is a bit of a shameless plug, but I guess it’s useful for you too.

    I’ve written a script for Photoshop that creates new documents with appropriate guides for grids already inserted. I’ve found it pretty useful so I thought I’d make it available to everyone.

    It can be found at http://www.andrewingram.net/articles/introducing_gridmaker/

  10. Andrew: I have seen and tried your script and must say it is a good one. It helps to build the grid much faster. I also suggest to all of you who are interested in grids, to try Andrews’s script (It works in PS CS2 and 3).

  11. Don’t forget the SEO

  12. When I started I wanted to try to keep website design simple and easy.

    I have referred to Emanuel’s words at http://www.yourfirstwebsite.blogspot.com because he offers valuable information that, no matter how simple your web page layout will be, gives you a strong foundation to build upon.

    However you decide to build your website, this article is an important webpage design guide.

  13. Thanks for writing this example of how to use grids.

    I’m tryin to get a new design and I wanted to use grids.

    (Thanks to Smashing Magazine for finding your link there.)

  14. Grids are of little use if the font is so damn small!

  15. Great article! – I had issues with my designs and using grid systems since most of them are all fixed on a specific size. There are a few tools out there that can build grid system in other sizes. Take a look at the grid system generator (http://www.gridsystemgenerator.com)

  16. this is really informative and useful guidelines to follow. Thanks for sharing (:

  17. Interesting read. I am actually working on a new design of my site and using a grid for the first time. It’s really cool using one, and I hope it turns out good.

  18. Thanks, that’s a really good way pf putting it.

    David.

  19. How does a grid system affect SEO?

  20. Thanks a lot. Great blog.

  21. Your method involves a lot of technical information that most people, even experienced web developers, won’t be able to keep up with. I sometimes use a 3 column grid, but mostly a 2 column grid. I know that most people, especially in the US, read from left to right. This means that the left-side of the grid will tend to get more eyeballs that the right. I don’t want to get too technical here because I know that it will lead to more confusion. One can look at Google’s heat map to get a better indication of what it is I am trying to convey here. The red areas indicate more activity; blue areas indicating less activity. You want to follow the same principles displayed in the heat map as you would within your site’s grid. Also, less is more, meaning simplify the design of your website. You will lose your visitor if they have to spend time trying to figure out how to navigate your site.

  22. Very useful. Thank you very much!

Leave a Reply

Your email address will not be published. Required fields are marked *