Designing with the 960 Grid System

Chris Sams, January 9, 2013

Looking for ways to simplify your web design process? Trying to keep up with current trends in responsive design? There are several systems out there for organizing your layout, but since I discovered the 960 grid system, I’ve started using it and haven’t looked back.

I’ve always been a fan of grid-based design. When I first learned about it in design school, it transformed the way I worked. My designs started look cleaner and feel more complete. No longer were sizes random and shapes floating around the page. There is still the element of artistic intuition. In fact, rather than limiting the designers freedom, it allows takes the guesswork out of the equation and allows you to truly get creative. It’s like learning how to spell before you write your first masterpiece.

12-column grid

The value of the 960 system in particular is in it’s flexibility and it’s compatibility for responsive site design. The system website includes templates free for download with Illustrator or Photoshop files using 12-, 16- or 24-column layout. They offer grid-based site examples, slide show tutorials and CSS shortcuts to get you up and running. You can also find a plethora of blog posts around the internet for tips and trick to get the most out of your designs, how to optimize for different screen sizes including the ever changing mobile dimensions, which I will blog about in a later post.


Enhanced by Zemanta

About the Author:

Call Now ButtonLets Talk!