Articles, Tips

Investing in the Grid

November 4, 2009 • By

Print designers have successfully utilized the grid to create effective design layouts long before the world wide web was even conceived, but the truth is that grids can be just as effective for web page design and ought to be employed by every web designer.

The grid enables designers to create a system of related design elements that interact with each other in a logical, consistent manner. It aids designers in creating a unified page layout and a clear page hierarchy — helping to achieve a visual rhythm that moves the viewer’s eye around the page. Designers experienced with table-based design are more likely comfortable relying on a grid to form the foundation for their designs.

Many website designers today completely ignore (or worse, avoid) the grid. While a vast majority jump right in knowing they want a 2 or 3 column design, never stopping to consider how the choices they make affect the usability, readability, and flow of a site. What if a shift in proportions, a change to the relationships of elements, or an adjustment to type size could make your site more usable and better able to communicate? The grid is the tool that can help you make better choices and therefore have more impact with your design.

However, don’t confuse structure with a lack of visual complexity. It is the very structure of a grid that opens up a multitude of purposeful, rational design decisions.

The Grid Online

When you first think about using a grid as the foundation for your website, you might have the tendency to feel boxed-in. In fact, you may have noticed a trend in web design where the grid is used as a design element. And for some purposes, that’s a good choice. On the other hand, with so many boxy designs there are a lot of sites that are starting to look like each other. Not so good if you’re trying to stand out in a crowd.

grid-01

But just because you use a grid does not mean your design has to look like a grid. Effective designers can use a grid to achieve all sorts of unique layouts. A grid is a starting point, a skeleton, a frame to hang your design on. Grids help you achieve consistency and cohesion, make better positioning decisions, create pleasing proportions, develop visual symmetry (balance) and rhythm.

grid-02

Using a grid offers designers a lot of flexibility withing a structured framework. But one of the best methods of achieving maximum impact using a grid is by breaking it. Going off the grid is a sure-fire way to call attention to a key piece of content — an effective device for making an element pop off the page. Used sparingly and intentionally, breaking the grid can help you achieve unexpected and interesting results.

grid-03

Grid Frameworks

Take a look at the Wikipedia description of CSS Frameworks.

For web designers who want to build on a grid, a CSS framework can provide the underlying structure for a designer to build their web pages around. A CSS framework offers designers flexibility, browser compatibility, adherence to web standards, reduced coding errors, and possibly best of all saves time. There are a number of different frameworks, some simply provide the bare minimum others offer a grid system in addition to style resets, print styles, styles for other common elements, and templates for popular design software.

Two of the more robust CSS Frameworks are the 960 Grid System and Blueprint. There are many others, but these are some of the more popular solutions.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels, with 12-column and 16-column variants. There are printable sketch sheets, design layouts (for popular design programs), and a CSS file that have identical measurements. This framework uses classes to allow designers to rearrange elements independent of the order in which they appear in the markup so you can keep more pertinent info higher in the HTML, without sacrificing precision in your page layout. (excerpted and paraphrased from 960.gs)

Blueprint

This framework offers a CSS reset that eliminates the discrepancies across browsers, a solid grid that can support the most complex of layouts, typography based on expert principles that predate the web, form styles for great looking user interfaces, print styles for making any webpage ready for paper, plugins for buttons, tabs and sprites and tools, editors, and templates for every step in your workflow. (excerpted from www.blueprintcss.org)

Some simple frameworks that provide only the grid with no additional code or styles are CSS-Boilerplate and the 1KB CSS Grid. Both provide lightweight, simple solutions for starting your grid-based web design projects.

CSS-Boilerplate

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important. (excerpted from http://code.google.com/p/css-boilerplate/)

1KB CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid. (excerpted from www.1kbgrid.com)

Fluidity

grid-04

The main problem with most CSS frameworks is that they are based on a fixed-width solution. Designers who embrace website flexibility and accessibility are likely going to need a fluid grid. Enter the Fluid 960 Grid System created by Stephen Bau which is a derivative of the 960 Grid System by Nathan Smith.

The nice thing about this fluid grid system is that it provides designers with all the benefits of using a fixed grid while allowing us to create something infinitely more usable for multiple audiences. For those of us who are comfortable giving up the control that a fixed width layout provides, the Fluid 960 Grid System is a great solution offering the ability to use a grid while saving the time of building a custom framework.

Designing on the Grid

Using a framework allows designers to get back to the creative part of our work. Having the underlying structure already built allows us to focus on creative design solutions. Of course, you’ll still need to manipulate your code, but working on top of a pre-built framework really gives us a big head start.

Start your design by mapping out the key content areas. I used the original 960 Grid System template for Photoshop which you can download directly from 960.gs.

grid-06

Once you’ve got the sections where you want them, you can start to integrate the design elements.

grid-07

Once you learn to appreciate the grid and its impact on your design, you are ready to break it. When done intentionally, breaking the grid can be a very effective tool for drawing attention to a particular piece of content. Think about where you might break the grid for a bit of visual impact.

grid-08

The thing about using a grid is that you can achieve a consistent look and feel across a variety of pages. Using a grid, you’re homepage design layout will work with alternate sub page layouts, providing the user with a familiar look across your site while giving you the ability to create page designs that can accommodate different types of content.

Additional Resources

If you weren’t using grids as part of your web designer toolkit, I hope that by now you are intrigued by the possibilities that employing a grid can provide. Web designers need to invest in the grid, and too investigate further check out the following articles, websites, and tools that offer even more on designing with grids.

Grid Tutorials and Articles

Websites Dedicated to the Grid

Grid Toolbox