Using Grids in Custom Website Designs

When I used to think grids, I thought about the grid in a CAD drawing or a chart showing some function on the X and Y axis. But grids are also an essential tool in custom website design.

Using a grid is more than just about making elements on the page be square and line up: it's about proportion as well. That's where the theory comes into grid theory. The concept of dividing the elements of a composition extends back to the mathematical ideas established by Pythagoras and his followers, who defined numbers as ratios rather than single units. The Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. They referred to this pattern as the golden ratio or golden ratio or divine proportion. This ration has appeared in art, nature and architecture throughout the ages.

So just what does this ratio have to do with graphic design? In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing. The artists of the Renaissance used divine proportion to design their paintings, sculpture, and architecture, just as designers today often employ this ratio when creating page layouts, posters, and brochures. Rather than relying on artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.

The basic idea as it is applied to website design can be shown below in the Golden Rectangle.

Assume that you are doing a custom web design for a client; it needs to be fixed width and designed to optimally fit into a 1024 browser window. The container block is therefore 960px wide. Using the golden ratio, you would divide the overall width (960px) by 1.618 (or ~ 1.62). You want a large block for the content and a smaller block for the right panel or the vertical menu. With 960px for the overall width, you divide 960 by 1.62 and get ~593px. That leaves ~ 397px for the right panel.

The same ratio holds for fluid and elastic website designs.

The Rule of Thirds

A much simpler approach is to use the rule of thirds. You divide a line into two sections: 1/3 and 2/3rds. Dividing your layout into thirds is a good way to do it without using the calculator.

Every web page layout can be divided into nine sections by using two equally spaced vertical lines and two equally spaced horizontal lines. Important compositional elements should be placed along these lines or their intersections. Aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.

The photograph above demonstrates the application of the rule of thirds. The horizon sits at the horizontal line dividing the lower third of the photo from the upper two-thirds. The tree sits at the intersection of two lines, sometimes called a power point or a crash point. Points of interest in the photo don't have to actually touch one of these lines to take advantage of the rule of thirds. For example, the brightest part of the sky near the horizon where the sun recently set does not fall directly on one of the lines, but does fall near the intersection of two of the lines, close enough to take advantage of the rule. (from Wikipedia)

The rule of thirds is applied by aligning a subject with the guide lines and their intersection points, placing the horizon on the top or bottom line, or allowing linear features in the image to flow from section to section. The main reason for observing the rule of thirds is to discourage placement of the subject at the center, or prevent a horizon from appearing to divide the picture in half. You can see from the photo below how much more visually appealing the photo is when point of interest in placed according to the rule of thirds. (from Wikipedia)

960 Grid System

There are a number of useful CSS Grid Layout Generators available for web designers. There are 15 generators listed. One of them, Grid Designer is shown below.

One useful tool for designing layouts for websites is the 960 Grid System from Nathan Smith. This system is a CSS framework based on 960 pixels and a 1024 browser window. He created three layout foundations: one with 12 columns, one with 16 columns and one with 24 columns. The 12 column version is divided into 60-pixels segments and the16 column version is divide d into 40-pixel segments. It is useful for rapid prototyping or for producing a production website for a client. You can see links to an number of websites designed with this system. There is a demo that illustrates the 12 column grid and the 16 column grid.

Effective Designs...