Learn design | Sharpen your creativity | Work for you

Professional Advice On Productivity & efficiency for designers

100% Will Not Spam You

Using the 960 grid system. What is it? Why use it?

using the 960 grid system

The 960 grid system is nothing new to the internet. It’s actually been around for quite some time now. I’m going to go over what exactly the 960 grid system is, why you should use it, and why you shouldn’t use it. Let me preface by explaining what grid systems are first.

A grid system is a series of rows and columns designed for rapid prototyping. It’s built for you to design all of your content around. It’s full of folding columns, elastic gutters, and a flexible outlines to assist you in the creation of a responsive site. As a non boring explanation – a grid system is basically an outline or overall structure (or css framework) that helps you align elements correctly, create a responsive layout, and design an overall better website. Cool? Cool.

The awesome thing about using grid systems and frameworks is that it lets you learn things you didn’t know how to do, and then when you learn more about it, it lets learn things you wouldn’t want to do over and over again. It lets you skip all of the shit you don’t like to do and allows you to get into the process of design and making your site look unique. It helps you throw things together quickly.

You don’t have to keep doing the math to create columns over and over again. You don’t have to keep choosing what to name things in your css. It’s streamlining the process. For you and your developer. (if you’re not both)

Using a grid system is awesome if you like to move fast. Like I said, it’s built for rapid development. I am, in no way, saying that you HAVE to use a grid system. You’ll just realize when you start using a grid system, how much faster your design and development process will be. It’s just helpful when you can design within something faster than starting over from scratch, designing your own, doing the math of setting up all the columns, gutters, etc. over and over every time you start a new project.

It’s just faster to pick a grid and run with it.

Alright, so back to the 960 grid system…

What is the 960 grid system?

The 960 grid system is a grid system based on the most commonly used dimensions see on the internet. It’s probably the most common grid system ever used. It’s composed of two different layouts.  A 12-column grid and a 16-column grid. Although a 24 column grid is available as well. Each grid with the overall width of 960px.

The 960 grid system was created by a guy named Nathan Smith back in 2007-2008. He created the grid system to use in his personal and professional projects, put it on a site available to the world, and it went viral.  He basically took what I always went to, cleaned it up, and threw it out there to the world for anyone to use. Good guy.

The 960 grid system comes with some pretty nifty stuff as well. It includes…

  • app plugins (fireworks & photoshop)
  • code (css & html)
  • licenses (GPL & MIT)
  • logo files (.eps, .png, .ai, .psd)
  • sketch sheets (PDF to print)

And these templates

acorn, balsamiq, corel draw, expression design, fireworks, flash, gimp, illustrator, indesign, inkscape, omnigraffle, photoshop, pixelmator, quarkxpress, visio, xara – you should be covered.

Why should you use the 960 grid system?

The 960 grid system is pretty much a safe route. It will look good on pretty much all browsers and devices. If you haven’t used a grid system before, the 960 grid system is a good place to start. It will help you understand and conceptualize how to place elements and develop a better overall composition.

It was developed with designers and developers in mind.

Why you shouldn’t use the 960 grid system

The 960 grid system is a little outdated and small. What you used to be the most common framework on the internet, the 960 grid system is not so much anymore. Now there are more developments in screen sizes, devices, and more welcomely accepted larger widths. There are tons of other grid systems people are using all over the internet for their gorgeous projects. And it’s working well for them. Now you can even pick any width you want, enter it into a site, and it will create the grid system for the width you specify.

I used to design all of my sites within the 960 grid system. It’s simple and effective. But now that I’m seeing more sites with HUGE widths, that look amazing on my thunderbolt display, I’m starting to grow out of it a little bit. Again, it’s a safe route. But you can always go smaller. Why not start big?

Final thoughts

The 960 Grid system is a great place to start if you’ve never used a grid system or framework. Try it out! See if you like it! From a design perspective, it helps you gain pixel perfect perfection and your developers will love you if you tell them it’s designed on the framework. Although frameworks are more used on the coding side of projects, it’s helpful for designers in a sense of creating and designing an overall aesthetically pleasing composition. And it’s great when you need to quickly prototype something last second.

Get instant access to my “go-to” Sales Page Toolbox, FREE!

Sign up now to receive my exclusive "go-to" sales page toolbox that I use to quickstart my design process

  • Over 30+ Custom designed Graphics
  • Instant access to all of the PSDs included
  • The design kit I use to make over 3k/mo
  • Designed for rapid prototyping
  • Drag and drop design graphics & resources
  • Royalty free graphics you can use anywhere