# Understanding the grid-based approach to design

There are plenty of examples in nature where symmetry and proportions rule. They have been used since time immemorial in various fields including art and architecture. Leonardo da Vinci’s Vitruvian Man is perhaps the best example of how nature celebrates symmetry. Today, graphic designers all over the world use symmetry and proportions through the grid based design theory. The main idea behind a grid based design is to create a solid visual and structural balance in websites. When the layout appears structured, websites seem to be visually appealing can easy to follow. The New York Times website and Yahoo! are some of the best examples of grid based designs

Although the grid based system was a product of the Constructivist Art, it slowly yet steadily moved into the domain of commercial design. When it comes to using the grid based approach, it is all about using mathematics where ratios and equations dominate the design. As a student interested in this approach, you will have to be familiar with ratios and proportions; from rational, whole number ratios, and irrational proportions. These ratios will have to be used to come up with designs that are functional, coherent, yet aesthetically appealing. Thus as you can see grids are not always about squares, it is about proportions. Graphic designers today have access to several tools to design their own grid based design. Some of these include:

phiRatio e67: This is an iOS tool that helps designers to calculate the different proportions including the ‘Golden Proportion’. For the uninitiated, the ‘Golden Proportion’ refers to a rule that if you were to divide a line into two parts, the longer part divided by the smaller part is equal to the sum of the two parts divided by the longer part. This tool is very useful when designing layouts, defining canvas sizes, and deciding typographical proportions.

Fluid Baseline Grid System: This is an HTML & CSS3 development kit that provides a foundation to design websites with ease. They can be used create a visual rhythm and structural balance to help the experience of predictable patterns.

Guide: This is a column, rows and midpoint tool for Photoshop CS4 and CS5. And best of all, this is free.

There are several other tools that can help graphic designers come up with designs that help in designing a layout. While this is an effective tool to help designers come up with effective layouts for their website designs, it is also important for them to embrace asymmetry and chaos with equal enthusiasm. Chaos when used effectively adds more character to a design than order and balance. It should be the effort of the designer to excel in designs of both these characters.