First named by the ancient Greeks, the Golden Ratio, or Golden Mean or the Greek letter Phi is a mathematical relationship where the length to width proportion is 1:1.61803398874989484820.
And if that number looked like a long one to remember, it’s basically when a line is divided into two parts and the longer part (part a) divided by the smaller part (part b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618.
First found in nature, but widely used by artists, designers, artists, architects and sculptors it has been deemed the proportion that is most pleasing to the human eye. It is why some things ‘just look better’ or ‘more finished’ or other words that we use when we can’t figure out why we like the looks of something more than another thing, but we know that we do. If you ever spent endless hours practicing piano (like me) it’s that same feeling that a major chord gives you that a minor chord doesn’t.
And here’s the really interesting part. It seems like our brains are hard-wired to prefer images and objects that follow this ratio regardless of our cultural norms or what we were taught was ‘beautiful’. In a 2007 study, a team of Italian scientists studied brain activity when subjects were shown images that conformed to the golden ratio versus images that did not. In short, they found that the presence of a specific parameter (the golden ratio) was the spark that changed the perception of a sculpture from ‘ugly’ to ‘beautiful’ and also stimulated positive emotions in the brain.
So how do you begin to apply the golden ratio?
Let’s break it down.
If you keep applying the Golden Ratio formula to the new rectangle on the far right of the image above, you will eventually get this diagram with progressively smaller squares:
If you take our Golden Ratio diagram above and draw an arch in each square, from one corner to the opposite corner, you will draw the first curve of the Golden Spiral.
Source of diagrams: Canva
And, if that shape is starting to look familiar, it’s because you have probably already seen it many times in nature.
And in photographs (where it is sometimes referred to as the law of thirds).
And in some of the most famous pieces of architecture.
And brand logos.
And if you’ve studied Math, you’ll recognize it as the Fibonacci sequence.
Understanding the power of the Golden Ratio will allow you to bring harmony and structure to your webpages and create something that people ‘just feel right about’.
How you use it
Because website design starts with setting the parameters of the content with numbers, implementing the Golden Ratio is relatively straight forward.
Here is an example explained by Apiumhub.
The golden ratio is also used to divide space between the body of the website and the sidebar. The principle is the same as in the other examples. The body is 1.618 times larger than the sidebar.
Let’s say you want to find the width of your Main Content and Sidebar columns. You would take the total width of your content area, for example, 1000px and divide it by 1.62, the result is 618px.
Here is an example of it in use by National Geographic.
You might also be interested in these design tools:
Phi Calculator – a great tool to know golden ratio dimensions. You just need to enter any number into this tool and it will give you the result you need for the golden ratio. It’s free and very easy to use.
UX triggers – awesome tool to test any website according to golden ratio perfection. This tool quickly identifies whether or not design follows the golden ratio rule.
Goldenratio app – a very cool app that provides an easy way to design websites, interfaces, layouts etc. according to the golden ratio.
Phimatrix – an amazing tool for customizable grids and templates. It allows you to upload any image and analyze it in terms of the golden ratio principle and design your idea in seconds.
And now when someone asks you what it is that you find more pleasing about one design over another, you'll be able to some more than, "Dunno. Just feels right".