July 30, 2020

Grid Theory – Essential Tool For Graphic Design

Grid Theory

Grid Theory

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design has exploded in popularity in the last few years.


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. Many art historians credit Dutch painter Piet Mondrian as the father of graphic design for his sophisticated use of grids. Yet classical grid theory has influenced successful artistic efforts for thousands of years. 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. The basic idea is illustrated in Figure 1.

The golden ratioFigure 1.6. The golden ratio

A line can be bisected using the golden ratio by dividing its length by 1.62. This magical 1.62 number is really 1.6180339 …, an irrational number that’s usually represented as Φ (pronounced phi). Explaining the math used to come up with this number is a bit too involved for this discussion, and is likely to be of no real help to you becoming a better designer, so I’ll spare you the details. Besides, my math is a little rusty.

Types of Website Design Layouts

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 a 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 the artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.

This sunflower is an example of the golden ratio in nature, as Figure 1.7 shows. The diameter of the sunflower’s center the total diameter of the sunflower, including the petals, divided by Φ.


This post contain the content of book The Principles of Beautiful Web Design by Jason Beaird