;)
Using the 960 Grid System
Posted by admin in Design, Tips
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.
I use 960 as a standard width but I have never considering designing within a grid like this. I can see how it could make the coding faster over time, especially when dealing primarily with wordpress themes like we do. Nice work – I will try it out!
PS – I love your spam counter! The number is offensive though! SHEESH….
Ok this is something really new for me. Always good to learn new things. and your spam comment counter is cute.
me too, i was struggling with this a long time, 748? 850? no, 960 it is.
Wow ! that’s great …..hope to expect more.
This is quite an interesting concept. I will have to give a shot on one of my upcoming sites. It seems like it could be beneficial, however at the same time I dont want my designs to feel like they are stuck in a grid. lol. “Pun Intended”
PS. Where is this spam counter everybody is talking about? I was looking forward to seeing it. lol.
Using the 960 grid layout is fantastic. I have always thought of trying to design my own photoshop grid set up for this exact reason. Designing sites now is much easier, and they look pixel perfect.
Having your site laid out using the grid allows you to create websites that sits perfectly together. Designing using this does not make your site look like it has been designed “stuck in a grid” as Web Design Philidelphia has mentioned, not everything has to sit in a flush line down the side etc, it is just about using the correct balance.
My site design has improved since sticking to this grid system and I wont ever be turning back
Everyone should use it!