DEV Community

Cover image for Golden Ratio in UX design – Why it Matters for Brands?
Pepper Square
Pepper Square

Posted on • Originally published at peppersquare.com

Golden Ratio in UX design – Why it Matters for Brands?

The Egyptians used it to build the Pyramids.

The Greeks used it to design the Parthenon.

Dan Brown based Da Vinci Code on it.

We designers owe A LOT to it. And brands, must embrace it.

Meet the numeric value 1.61803 39887, also known as the Golden Ratio, or the Golden Mean.

We also call it Phi after the Greek sculptor Phidias. There’s more than what meets the eye though, and that’s where you need to go in-depth to understand what is Golden Ratio and how it impacts a brand.

What is Golden Ratio in simple terms?

The Golden Ratio or the Golden Mean or Phi, is an irrational number equaling 1.618. Put it simply, it is the ratio of two numbers , which is the same as the ratio of the sum to the larger of the two numbers.

How to Calculate the Golden Ratio?

To calculate the Golden Ratio, you divide a line segment into two smaller parts. The longer part (a), divided by the smaller part (b) is equal to the sum of (a) and (b) divided by (a), equaling 1.618. This formula helps create shapes, layouts, forms, structures, logos, etc.

The Golden Ratio or Phi is equal to:

1.61803398874989484820…

With Phi being irrational, the digits placed after the decimal point continue going on forever without repeating.

History of Golden Ratio – a Quick Timeline

Circa 300 BC, Greek mathematician Euclid defined Golden Ratio in his math textbook Elements. At the time, Euclid called it the “extreme and mean ratio.”

In 1509, Leonardo Da Vinci created illustrations for a dissertation called De Divina Proportione. This is one of the earliest references to what we know as the Divine Proportion.

During the Renaissance era, artists kept using the Golden Mean in paintings and sculptures for both beauty and balance.

Kepler, who discovered the elliptical nature of planet orbits, also mentioned the Divine Proportion.

It wasn’t until the 1800’s that the term Golden Ratio was coined by Martin Ohm, who was the first person to describe it in his book – The Pure Elementary Mathematics. In the book, he called it – term “goldener schnitt” (golden section).

As for Phi, it wasn’t used in common parlance until 1900s, when Mark Barr used the Greek alphabet phi (Φ) with the proportion.

Golden Ratio and the Fibonacci Sequence

Wondering what’s the difference between Fibonacci and Golden Ratio? Well, both are closely connected. The Fibonacci sequence is the sum of the two numbers before it. Using the pattern, Greeks developed the Golden Ratio to express the difference between any two numbers in the sequence.

When the Fibonacci numbers increase, the ratio of consecutive numbers in the Fibonacci series start getting closer to the Golden Ratio.

The Fibonacci sequence is present in how the seeds of sunflowers spiral out of the center and can predict the number of petals on a flower.

Spooky, but true!

Arthur Benjamin beautifully connects the two in his Ted Talk:

What are some examples of Golden Ratio?

There are abundant examples of golden rectangles and golden spirals. The former has sides that are in the Golden Ratio. When you divide the golden rectangle into square and then the smaller rectangle again, repeating the process indefinitely, you’ll get what’s called a Golden Spiral. This is obtained when you connect the opposite corners of the squares.

Best examples of the Golden Ratio include:

  • Flower petals – The number of flower petals adhere to the Fibonacci sequence, including the Daisy, which has 34 petals. Each petal is placed on a flower at 0.618034 b turn. This facilitates best exposure to sunlight.

  • Logarithmic Spirals – Nautilus and snail shells both follow the Golden Mean, and so does the horns of some animals, cobwebs, ferns, pinecones, galaxies, and so on. All of them are in the logarithmic, Golden spiral shape, spotted easily in nature.

Image description

  • Paintings – Da Vinci’s “The Last Supper” is one of the best examples of the Golden ratio grids

  • in art along with Michelangelo’s “The Creation of Adam”, multiple Georges Seurat’s paintings, and “The Golden Stairs” by Edward Burne-Jones.

  • Logos – Apple, Pepsi, Twitter, Google, and even National Geographic follow the Golden Mean to the T for their logos.

  • Architecture – From Pyramids to Parthenon to the UN Secretariat Building in NYC, man-made marvels also stand testimony to the Golden mean.

Why Does Golden Ratio Matter for Your Brand?

In 2010, the first Aston Martin Rapide went on sale. Its successor, the Rapide S had every detail designed using the Golden Ratio. The Splash Lab even went on to create intuitive hand wash journey for users using the same principle.

It may have something to do with how people can quickly scan an image when it’s shaped in a golden rectangle. National Geographic shows us how.

Image description

On a website, this leads to better reading and retention, without users even realizing it. In design, it lends aesthetic appeal to all the elements, composition, making a statement and a first impression on the users.

Done right, it can help you create an incredible brand identity, make your brand more memorable, and foster loyalty.

Here’s how you can implement it in UI UX design.

Golden Ratio in Website UI UX Design

Impeccable UI UX design is a must in websites. Does website design also follow the Golden trajectory? You bet! While there are endless ways you can incorporate, let’s focus on the most important aspects of how to use the Golden Ratio in design.

  • Typography and hierarchy – Need to figure out font size for your website? The first thing is to create a hierarchy for your messaging, irrespective of the length of text. The Golden Ratio can be used to figure out the hierarchy in minutes. For instance, if your body copy is 12 px, and you multiply it by 1.618, you’ll end up with 19.416, which will be the apt header text size!

  • Appealing UI – The way you design layouts can drastically improve how your users interact with your website. So, how could Golden Ratio in design be used to improve form layouts? Take a page highlighting a block of content. Set the dimensions to set the dimensions aptly. Take any 960 px width layout, divide it by 1.618 and you’ll get 594, which will be the height of the layout. Break this into two columns using the Golden Ratio, and you’ll get a neat layout.

Image description

  • Logo development – The first fundamental requirement of creating your brand identity is having a logo for your brand. While creating one for your business, turn to Golden proportion and sketch out the best proportions and shapes for your logo, following the footsteps of big names in the industry. Using the formula, you can easily create minimalistic, balanced, and insanely amazing logos that become a part of your brand identity.

Image description

  • Resizing – Resizing and cropping are part of a designer’s routine. And that’s where they can do with some ‘divine interventions!’ While cropping image, they can use the golden spiral as a consistent guide by overlaying it on any image, get the focal point right and go ahead to get the perfectly proportionate cutouts.

  • Composing images – If the great artists from the Renaissance era can do it, what can stop us from using the Golden mean for image composition? Just like image resizing, you can overlay the Golden spiral on images to check for harmony and balance.

Conclusion

By now, you must’ve understood that while it is ubiquitous, the Golden mean will always remain at the forefront of design. Remember, 1.618…is not just a number. It’s the driving force behind good designs lending neat aesthetics, which ultimately become crowd pullers.

Go ahead, take your brand to the next level by striking the perfect balance with ‘divine intervention!’ Contact us to create magic for your brand using the power of Phi!

Top comments (0)