A brief introduction to The Golden Ratio – By Chris Chadwick

It’s not half and it’s not quite a third, it’s somewhere in between. It’s the golden ratio (TGR).

This very brief introduction to TGR will touch on what it is and how it can be used in layout and design. The golden ratio or mean is also known as the divine proportion, Gods fingerprint, nature’s perfect proportion, the golden section, Phi and simply Fibonacci (after the mathematician Leonardo Fibonacci whose sequence of numbers are intimately connected to the golden ratio). The ratio is actually 1.6180339887… but can be rounded to 1.618 for the sake of design and we shall just stick with the name, the golden ratio for this blog.

What does it mean to a designer?

To me it means, bringing together parts or a whole in a way which is aesthetically pleasing to the eye - divided at the ratio of 1.618. I’ve created a vector pack you can download and use which may help you to start including TGR in your own work. Have a play and let us know how you get on. It is licence free so use, share and edit as you please.

This simple ratio can be used to create shapes; rectangles, pentagons, triangles, pentagrams, spirals and more. The same ratio consistently pops up in nature, most commonly associated to the nautilus shell, pinecones, sunflowers, storm clouds, galaxies and even humans. Nature mirrored in design works, it simply looks right and… Natural.

This short clip entitled ‘Nature by Numbers’ by Cristóbal Vila shows some great examples of geometry within nature. The construction of the shell using TGR is particularly nice.

Famous examples of TGR outside of nature;

• The Parthenon – temple in Athens, Greece.

• The Mona Lisa – and many other works of Leonardo Da Vinci.

• Logos and branding from the likes of Twitter, Apple and Pepsi.

The list goes on (search for examples of the golden ratio online). Some argue that these reoccurring patterns in nature are nothing more than coincidences. In design however, there is no doubt that for some reason, use of TGR is visually appealing. Twitter, for example, uses TGR to separate its content from the sidebar. 

Personally I believe its appeal is because subconsciously or consciously we see it around us, multiple times, throughout the day. Your body proportions, for example, follow this same mathematical pattern. Take the length of your forearm in relation to your hand, the ratio is 1.618. Now look at one of your fingers. The length of each bone in relation to its larger predecessor follows the ratio of, yes, you guessed it 1.618.

How it can be visualised?

TGR can be used to create a golden rectangle (a good starting point for design and art), which has a length and height matching that of the ratio. To make a golden rectangle take a square and multiply it’s length by 1.618. If you reintroduce the original square, left aligned to the rectangle you now have a tool showing TGR. Draw in an arch with a radius that matches the squares height, using its bottom right corner as the pivot point. You now have the first curve in what is known as the golden spiral.

Starting to notice a trend in names here? This collective group of golden shapes can be duplicated, rotated 90° and scaled proportionately to fit perfectly within the original divide (the yellow section). Doing this extends the spiral. Continue rotating and aligning our golden shapes and you’ll see this spiral close in on itself. Isolated, this is the golden spiral, which matches up to the nautilus shell mentioned earlier. 

Placing an isosceles triangle (two sides the same length) within the golden rectangle is another way of using TGR within design. Named, you guessed it… the golden triangle. This shape holds its proportions regardless of how you divide it.

Let’s now take a look at Drew Struzan’s Star Wars – Episode II movie poster and see if we can decode his use of TGR. Below, pay particular attention to the busy boxing of The Golden Ratio image and see how the elements have been housed within these overlapping rectangles. Even the Lightsaber's proportion to the other elements matches TGR.

In the example below I have taken a golden rectangle with a 1.618 divide and placed it over the face so that the eyes are central to where the lines intersect. This seemed to frame the face perfectly, so I continued to expand the shape, the results were interesting to say the least. From the face of this one character nearly all the other elements of the poster could be framed.

As you can see the spiral, rectangle, triangle and TGR can all be used to help position a subject in a photograph, balance logo design, create a website and even produce a movie poster.

A fantastic Disney film called ‘Donald in Mathmagic Land’ is well worth a watch as it explains TGR in all its Technicolor glory.

One final place you will find TGR is in our branding. Our branding guide will be released shortly for you to take a peek at. I hope this short blog has given you some food for thought and please let us know if you found the vector pack to be of any help.

Start looking around at billboards, TV ads, books etc and see if you start to notice TGR.

Remember, open your eyes and all you will see is gold.