A well thought-out grid provides a system for placing content, exhibits professionalism, gives us as set of rules to adhere to as well as to break, and makes the design process more efficient.
CSS Frameworks like 960 Grid System have become prolific and, despite controversy, are great tools for quick and dirty layouts and live prototyping. My concern with such frameworks is the temptation to rely on the included 12 and 16 vertical column grids in production-ready designs.
There is nothing inherently wrong with those grid configurations. They are actually quite flexible and can yield great results (just look at beautiful examples on the 960.gs site). The problem is, when you use a pre-built grid template, you are not considering the content or typographic measure and end up pushing your precious text into a foundation built by someone else that is based on nothing more than browser width. That would have been like forcing Frank Lloyd Wright to live in a pre-designed cookie-cutter home from the suburbs.
When you build a custom grid based on your content’s needs, its goals and its purpose, you are no longer settling on an inconsiderate, mass-produced template. You are giving the piece life, complimenting its existence, and giving it the attention it deserves. That’s great design.
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.Josef Müller-Brockman
I’m proposing a challenge. Throw out your 12 or 16 column 960 grids. Read, interpret, be enamored in the content being presented. Use the content to determine your type settings and then construct a rational grid based on those considerations. Don’t be afraid to deviate from vertical columns and experiment with new configurations despite what you know about the web. I promise that you will start thinking differently about your layouts.
- Five simple steps to designing grid systems
- The Complex Grid
- The Funniest Grid You Ever Saw
- Constructing the Grid
- Grid Systems in Graphic Design
- Making and Breaking the Grid
- Grid Systems
- The Elements on Typographic Style
- Thinking With Type