Many look at design as something subjective, where different designers and taste-makers have different ideas of what good design is. That could be said to be the charm of design, where the interpretation is left to each individual, but there is actually an objective way to create the “correct” design.

The Golden Ratio is a mathematical ratio apparent almost everywhere, but when used in design, results in a generally pleasing and balanced composition. Leonardo Da Vinci himself used the Golden ratio to define all of the proportions in his Last Supper, including the dimensions of the table and the proportions of the walls and backgrounds. The human eye is used the seeing this number and react positively to it subconciously.

What is the Golden Ratio?

1.618 is the magic number when talking about the Golden Ratio, which is sometimes referred to as the Golden Section, Golden Mean, Divine Proportion, or the Greek letter Phi, the Golden Ratio. The number comes from the Fibonacci sequence, a naturally occurring sequence of numbers that can be found everywhere in nature, architecture, painting and music.

The Fibonacci sequence is a sequence of numbers where the next number is the result of the sum of the two numbers before it. It goes: 0, 1,1, 2, 3, 5, 8, 13, 21, and so on. Using this sequence, the the Greeks developed the Golden Ratio to express the difference between any two numbers in the sequence simply. When applying this ratio to design, you can create harmony between a longer element and shorter element. This convenient formula can help you when creating layouts, logos and any kind of design that need balancing proportions.

If you have two parts, a longer part (a) divided by the smaller part (b) is equal to the sum of both part (a) + (b), which is equals to 1.618.

So basically;

a / b = 1.618

a+b / a = 1.618

Then, by overlaying the two parts, you get the Golden Ratio.

If you keep applying the Golden Ratio formula to the new rectangle on the far right and draw a spiral over each part, you’ll create the first curve of the Fibonacci sequence (also known as the Golden Spiral).

Practical Usage

Now, how to you actually apply this when designing? Admittedly, for something like Product Design, it’s pretty hard to find instances to use this formula since the layout consists of multiple components with their size already defined. But here are some simple ways we included it in our interface.

Content

Web Message is Repro’s latest feature which allows our customers to send messages to the users of the website. A dialog with images and text can be sent to those users. I used the Golden Ratio here when deciding the proportion between the image and content area.

Typography

Where you have block of text, the size difference between the header and body text often adds to the cohesiveness of the block of text. The golden ratios can used to determine those font sizes.

In our case, the header font size was 24px, so diving it by 1.618 will give us 14.8. So, 14px or 15px would give you a good balance.

Event Banners

Apart from in our application, I also referred to it when I creating a template for our event thumbnails.

Things worth noting when using the Golden Ratio

  • Sometimes, you have to round off the number for practical reasons. For example, image or font sizes without decimal places are cleaner to code with, so forcing image with dimensions like 352.286773795px is not recommended.
  • Prioritize utility over forcing the ratio. Some times there are reasons not to follow the ratio, so you should not follow it blindly.
  • Instead of whipping out the calculator each time, the following tools can help you get the ratio on the fly
    • Omnicalculator The simplest one of the lot, it gives you the length of the longer length or shorter length or whole length based on one of the value.
    • Golden Ratio Typography (GRT) Calculator Specifically for web typography, you can perfect the proportion between font sizes, line heights and content width.
    • Golden Ratio Sketch Resource This is a simple drawing of the golden ratio for you to overlay on layouts and designs to match it to the Golden Ratio.

Tag

About the Author
Alex Kwa

UX Designer, Repro
Alex has been designing for Repro since the company begun. He worships his design heroes, Dieter Rams, Tokujin Yoshioka and Naoto Fukasawa. He's an occasional digital nomad and is obsessed with the streetwear brand, Supreme.
Website