Grid Design For Web

In my graphic design classes, we learn that grid-based design is essential  to creating good page layouts. Grid-based design also applies to websites. Columns, gutters, alignments, balance and composition are just as important on the web as they are on the page. I found a great article about grid-based design for websites called "Grid-Based Design: Six Creative Column Techniques," by Sean Hodge. He shares some good advice:

Embrace Disharmony
Don't keep to your grid all of the time. Let some elements break it. Allow for some randomness here and there.

Joining For Variety
Incorporate more rows into designs. So many websites have vetical feels with plenty of columns, that a more horizontal website feels more refreshing. Try joining columns together or varying the number of columns in the layout.

Utilizing Angles
Using slanted and angled elements can add interest and excitement to your page. While some grid have the whole thing angled, its more practical to have some elements angled for emphasis.  Using images or Flash are great ways to accomplish getting your elements slanted.

 Escaping Boundaries
Break out of your grid boundaries. Int erupt the visual flow by cross the grid lines you have established. Pull quotes are an excellent example of this. It create a nice break in the flow and brings emphasis.

Illustrating Areas
Allow your illustrations and images to break the flow of the grid. They can add a lot of interest and variety from the grid.

Energizing Spaces
Energize the white space in your web layouts by balancing all out your elements in an asymmetrical fashion.