Using the 960 Grid System

Using the 960 Grid System

If you’re not already using the 960 Grid System, get on it. I promise your life will be a lot easier. Simply put, the 960 Grid system lays out a perfect grid to start all of your design work in Adobe Photoshop, Fireworks, Illustrator, Indesign as well as Inkscape, Viseo and OmniGraffle.Why 960?
Remember when monitors and websites were all built 800 pixels wide? Everything was real big. Well not any more. Now most monitors you buy are defaulted to 1024 pixels wide. And to account for margins and possible smaller monitors the new industry standard is 960. What does that mean? Build the content of your website with in a 960 pixel wide frame. Luckily, you can download the free 960 grid templates here or at 960.gs and your width will already be set to 960.

What is the 960 Grid?
It’s literally a perfectly organize grid. You can start with one of two grid templates, 12-columns or 16-columns. In the 12-column grid the columns are 60-pixels wide. In the 16-column grid columns are 40-pixels wide. In both grids each column has a 10-pixel margin, which would equal a 20-pixel gutter when put together.
So why use the 960 Grid?

Organizations of your content, the flow of your content to the human eye, usability, design quality, and better-streamlined production. If your still not sure, ask yourself why an architect creates a perfectly measured blueprint before he builds a house. Still not convinced? Then you’re just going to have to try it.
Written by- Marvin Russell from The Ocean Agency, a Chicago web design company that provides web design, interactive marketing and SEO. Got questions? Check them out.