The Golden Ratio for Great Layouts

in Design

on

Have you ever seen a beautifully composed photo, painting, or website and wondered if there is any science behind it?  Well, there actually is.  Great artists, designers, and architects have been using what is called the Golden Ratio since 400 BC.  Most use it intuitively to divide space and create compositions in a pleasing way, but it really boils down to a simple mathematical formula. (Or you can use this AIR app that I created to do the job.)

The Golden Ratio

The golden ratio (also known as “phi”) has been around for 2,400 years and is considered a way of dividing a space that is most pleasing to the eye. Many artists musicians, sculptors, and architects have used this ratio.   Leonardo Da Vinci  called it the “divine proportion” and featured it in many of his paintings, including his famous Mona Lisa.

The golden ratio is calculated as two quantities where “the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one.” The ratio ends up being 1 : 1.618. Confused yet? Try this exercise:

  1. Construct a unit square (red).
  2. Draw a line from the midpoint of one side to an opposite corner.
  3. Use that line as the radius to draw an arc that defines the long dimension of the rectangle.

To break it down further, Fibonacci numbers (and the Fibonacci spiral) are based on the golden ratio and are the following: 0, 1, 1, 2, 3, 5, 8, 13, 21, …
By definition, the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s.

The Beauty of the Golden Ratio

Even in the most subtle ways the Golden Ratio seems to apply when what we see is “beautiful” in nature.  Take Kate Moss for instance. The ratio of the width of her eyes to the width of her mouth is 1 : 1.6.

Try it Yourself!

Carry this ratio into design and what you end up with is a good starting point for creating a layout. Note that you can flip and rotate the ratio any way you’d like, as long as the proportions are kept intact . To help with this I created an AIR app.  After you download and install it, you can overlay the golden ratio over anything on your screen. Whether it’s other web pages or your own design in Photoshop, this app will help you with any layout just like Leonardo DaVinci would have 500 years prior.

Download the AIR App (Mac and PC)

Comments are closed.