Design Basics: A guide to the golden ratio

Few design concepts blend the strengths of the left brain and the right brain quite as elegantly as the golden ratio. A formula that traces its roots to the Classical Era in both mathematics and the arts, today the golden ratio is still one of the most vital principles of cutting-edge Internet design.

So…what the heck is it?

Let’s break it down: the golden ratio exists when the ratio of the sum of two quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. This yields an irrational mathematical constant with a value of approximately 1.61803399.

A visual representation of the golden ratio formula.

Simple, right?

The ratio is closely related to the Fibonacci sequence—simply put, a series of numbers, starting with zero and one, in which every number equals the sum of the two numbers that precede it. Crank it out, and it looks something like this:

It goes on like that. You get the idea.

A handy visual representation of this sequence is known as the golden spiral:

The golden spiral, in all its geometrically-sound glory.

OK, Math Whiz: Why does it matter?

This sequence is reflected in countless natural and man-made objects. The golden ratio is expressed in many plants in the arrangement of branches to their stems. The architecture of structures as old as the Great Pyramid of Giza and the Parthenon can be analyzed with the ratio. Master works of art have drawn on the principle, from Salvador Dali’s The Sacrament of the Last Supper to, according to some, Leonardo da Vinci’s Mona Lisa. 

Though no one is totally sure why, the golden ratio seems to exercise a powerful aesthetic pull on most people. That’s why, intentionally or not, it recurs so often in almost every area of design—including our own.

The golden ratio, as applied to the creation of the Vodori logo.

I carry the idea of the golden ratio into web design to evoke a sense of familiarity—bringing common patterns from the physical world into the digital one. A design that draws on natural order resonates with viewers subconsciously. 

The ratio can also serve as a canvas: I use it to help break down content and assets when I’m wireframing pages. It provides a versatile means of defining the relationships between objects, dictating the importance of each level of the site, and determining scale. Other aesthetics are then fine-tuned deeper into in the design process. 

Finally, it’s a valuable corrective for those times when my design hits a wall. When different approaches don’t quite gel, and other options have been exhausted, that’s when I blow the dust off this classic, reliable tool from my artistic roots. How can you go wrong with a device that has been so effective for centuries?