Home > UI Design and Prototyping > What is the golden ratio and why should designers care?
The Golden Ratio is a useful framework to create balanced and harmonious designs. Here’s how it can help you

The Golden Ratio is a useful framework to create balanced and harmonious designs. Here’s how it can help you

The Golden Ratio is a mathematical ratio that’s been used for thousands of years. From the Parthenon in Greece and the Nautilus shell found on the beach to devastating hurricanes and even our body parts, this mysterious ratio is found all around us.

It’s a captivating number that bridges the world of mathematics and art and has fascinated us since the Egyptians.

But, just what is the Golden Ratio and how can it help designers in their work? We’re going to find out.


Create and prototype harmonious designs in Justinmind. Download free.

Download free


What is the Golden Ratio?

The Golden Ratio is like magic.

If you’ll excuse the momentary lapse into mathematics: two quantities are in the Golden Ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities. Got that?

This image explains the Golden Ratio:

golden-ratio-explained-using-a-rectangle

A quick glance at Simple English Wikipedia stops the confusion: let’s say you have a number a and a smaller number b. You discover their ratio by dividing them. The ratio is a/b. Another ratio can be found by adding the numbers (a+b) and diving that by a. That ratio is (a+b)/a. If these two ratios are equal to the same number, that number is the golden ratio.

This video does a great job of explaining it:

The Golden Ratio is derived from the Fibonacci sequence. This is a sequence where the next number in the sequence is a total of itself and the previous number. It looks a little like this: 0, 1, 1, 2, 3, 5, 8, 13. As you can see, 1 + 2 = 3, the next number and 5 + 8 = 13.  

Any two successive numbers from the Fibonacci sequence when divided resemble the Golden Ratio closely, as you can see below:

golden-ratio-fibonacci-sequence

What makes the Golden Ratio magical?

It’s the harmony that results from the Golden Ratio that makes it captivating. Shapes made with these proportions look good to the human eye. There was talk in LiveScience that posited this beauty might be hard-wired. Treat that with a pinch of salt, though.

Let’s take a look at these two examples of the Golden Ratio in action:

parthenon-with-golden-rectangle-overlay

 

These images contain the Golden Ratio. As you can see there is a pleasantness to them and they’re harmonious. The Golden Ratio can be observed in seed heads, flower petals, pinecones, shells and hurricanes.

natuilius-shell-with-golden-rectangle-overlay
Image by Gary Meisner. Learn more about his golden ratio design software here

This Golden Ratio is also found in many homes around the world; modern wide screen TVs often make use of the Golden Ratio. Even Stradivari’s violins used it.

Many prominent brand logos take advantage of the Golden Ratio:

brand-logos-that-use-golden-ratio
Image by Gary Meisner. Learn more about his golden ratio design software here

It’s clear that the Golden Ratio surrounds us whether we’re aware of it or not.

But is the Golden Ratio really that magical?

It’s worth pointing out that there is a lot of hype surrounding the Golden Ratio. While it does seem magical when you come to understand it, many overstate its importance.

As with any kind of rule or guideline, it isn’t gospel. The Golden Ratio is a good rule of thumb and can help on a superficial level when it comes to the layout of a website, for example.

In fact, many of the products, artworks and buildings we believe use the Golden Ratio are just approximations.

FastCompany had this to say about it:

“Strictly speaking, it’s impossible for anything in the real-world to fall into the Golden Ratio, because it’s an irrational number,” says Keith Devlin, a professor of mathematics at Stanford University.

You can get close with more standard aspect ratios. The iPad’s 3:2 display, or the 16:9 display on your HDTV all “float around it,” Devlin says.”

But creative director Darrin Credscenzi understands its value in design when he argues that,

“Phi, and other visual harmonies, are tools to inform many aspects of contemporary design — underlying grid, composition, hierarchy, rhythm of form to counter-form, etc.

The common theme, of course, is that these are things a designer never expects any reasonable person to notice at all. The Golden Ratio is intended to be invisible, a compositional organizing principle that is felt rather than understood.”

The truth is the science is a little rusty when it comes to the Golden Ratio. What could be at play is confirmation bias. We place importance on the Golden Ratio and so look for it everywhere to confirm that importance.

That doesn’t make it worthless, though.

How designers can use the Golden Ratio in their design

Let’s take a look at the ways designers can use this magical ratio when designing.

Balance your layout’s structure and form

First, to figure out just what the Golden Ratio is you can use a Golden Ratio calculator. This will give you the 1:1.61 ratio you’re looking for so you can easily create the a document in Illustrator, Sketch or Photoshop.

Websites that have good composition are easier on the eye. When designing a website or interface with the Golden Ratio, users will find what’s important on the page more naturally.

When you define a layout, using the Golden Ratio can help you understand where might be a good idea to place:

  • Images
  • Sidebars
  • Headings
  • Content

By breaking up your layout into compartments that meet the Golden Ratio, you’ll create more grids to work upon. The effect will be a balanced, harmonized design.

The most notable use of the Golden Ratio is to break up the main content from the sidebar, as is so frequently seen on websites and, notably, blogs.

Mariya Tereshkova used the Golden Rectangle in her UI designs. This is how they turned out:

user-interface-design-with-a-golden-ratio-overlay

As you can see, the geometry helps with the composition of the design. The top half is an obvious place to use a photo because there is a lot of room whereas the lower half works for the content, call to action and icons. It helps to provide order instead of chaos.

Use the Golden Ratio to create typographic harmony

Let’s say you have a block of text with a heading. Your heading is 35pt in size. You want to figure out a good font size for the body text. Enter the Golden Ratio.

copy-text-font-sizes-using-the-golden-ratio

Take the font size of your heading—in this case, 35pt—then divide it by the Golden Ratio, which is 1.618. This gives us 21.631. Round this to 21 because it doesn’t have to be perfect. Then you have the font size for your body text: 21.

Again, this isn’t set in stone and should only be used as a guideline. Think of it as a useful springboard, a place to start when it comes to font and heading sizes. Use this Golden Ratio Typography calculator to get started.

For more on typography, check out these must-read books.

Cropping your images to create focus

The Golden Ratio is used frequently in photography. As we’ve mentioned, it’s a great rule of thumb when you want to achieve a decent composition because of the harmony it brings.

You can crop any imagery you use in your designs with a golden rectangle. If you have an image you want to use in your design but it’s either too big or the focus on a particular element in the photo isn’t right then cropping can be useful.

By cropping it using the Golden Ratio, you can choose the focus for the image and create a new composition.

Take a look at this cropped image:

cropping-an-image-of-people-in-a-meeting-room

Likewise, the Golden Spiral (another shape based off the Golden Ratio) can help bring focus to a photo in a more natural and aesthetically pleasing way.

What is the golden ratio and why should designers care? – the takeaway

The Golden Ratio won’t solve every design problem under the sun. It might not solve any real problems. But what it will do it give you a place to start with your design.

It can give a basic structure to an interface’s composition. It can bring focus to an otherwise chaotic image. It’ll provide a sense of harmony just when you need it. When used properly, the Golden Ratio can bring harmony and balance. That can’t be all that bad, can it?

Download free

Steven is the web editor at Justinmind