What is The Golden Ratio?

Unpacking The Fibonacci Sequence Based Concept in Design

Inspiration resides all around us. And everyone draws different ideas from the art around them. So it may come as a surprise to you that there is one rule of nature that appears around us so often that it has been depicted in the most infamous pieces of art and many people don’t know a thing about it! For example, what do the Mona Lisa by Da Vinci, the Great Pyramids of Giza, the Parthenon in Athens, Pepsi & Twitter’s logo have in common? They all either exhibit or were designed with the Golden Ratio.

The Golden Ratio is a mathematical ratio discovered and commonly found in nature, which is now visible almost everywhere like in architecture, music, paintings, modern design etc. When used effectively, it creates designs that are naturally and aesthetically appealing to the eye by way of their composition. So let’s unravel a bit more about this mathematical marvel and how you can use it to improve your designs.


So, What Exactly Is The Golden Ratio?

Put very simply (to avoid scaring anyone away with maths!) the Golden Ratio is a mathematical formula that yields the number 1.618. This number and the ratio itself are derived from the Fibonacci sequence, which is a sequence of numbers that occur naturally in our environment. The most common examples of these can be seen in the shape of a seashell or the spiral of leaves on a tree.

To explain the Fibonacci sequence; it is the sum of the two numbers occurring before it. Hence, it goes as follows: 0, 1,1, 2, 3, 5, 8, 13, 21… and so on, to infinity. The Greeks were able to observe this pattern and developed the Golden Ratio of 1:1.618 to better understand the overall sequence.

golden ratio
Imagine a rectangle where, if you cut off a square, the rectangle that's left will have the same proportions as the original rectangle. Continuing with this pattern, you will get the diagram of the Golden Ratio.

You may notice a line has also been drawn to illustrate the relationship between the rectangles in the Golden Ratio. This line generates the Golden Spiral, yet another naturally occurring phenomenon derived from the ratio itself, and more commonly seen in the natural world in the form of sea shells, snail shells, hurricane patterns, galaxy formations, even sunflowers and many more!

How Do You Use The Golden Ratio In Design?

This quick mathematics refresher of course is of no use unless you are able to successfully apply in your graphic design work! The reason you want to apply this ratio in your work all comes down to the overall aesthetic you want to achieve.

This ratio lets you create a sense of natural beauty by harnessing the natural harmony and proportions viewed in the world around us. Not only is it seen and used in man-made advances, but even our bodies and mainly faces follow the same ratio. So much so, that through our evolution, humans are naturally inclined to desire things subconsciously showing this Golden Ratio. An analysis of some of the most desirable people in show business has also shown that people whose face was the closest to this ratio ranked higher in physical appearance amongst audiences!

Some of the ways you can use this ratio and its Golden Spiral to your advantage could be:

1 - Typography and overall design hierarchy

This ratio can help you figure out the sizes for your headlines, your body text and supporting copy in your designs.


For example, if your body text is 14px. Multiply that by 1.618, you get 22.652. This means that your headline copy should be roughly 22px/23px according to the ratio to naturally balance out the text in the body below. You can even follow the opposite method to figure out your body text size if you’ve locked on your headline size.

2 - Editing and resizing images

While it’s easy to figure out which white space to get rid of when cropping and resizing your pictures, do not forget that it will require balancing afterwards! With the help of a Golden Spiral overlay on your image, you can easily plot your focal point from the middle of your spiral and crop your image accordingly!


3 - Layout in UI Design

Utilizing this ratio can also help in designing a naturally appealing and soothing UI experience, by drawing attention to the important things correctly. A narrow panel of menu items on the left with a broader, main focal area on the right will align your webpage or UI with the Golden Ratio easily. In fact, now that you understand it, you can view this hack in action on many websites.

golden ratio
Golden Canon Grid - Adrián Somoza for Bont™ in Freebies


4 - Logo design

Twitter, Pepsi, and Apple. These brands and their logos are heavily inspired by the Golden Ratio and some have used the ratio in the entire design of their logo!

Apple's love for the Golden Ratio is well known amongst their fans and in the design world. Many of their app logos are inspired by the ratio, and the iCloud logo is a prime example of this.

So the next time you’re grasping for a breakthrough in a logo, why not try out the Golden Ratio to help you chalk out specific proportions and shapes that can be explored?

golden ratio logo
Fox Logo with Golden Ratio by DAINOGO

The Final Step

Feel like you’ve got the hang of the Golden Ratio? Why not test it out on Vectornator then! If you are looking for a professional, intuitive and easy-to-use graphic design software, we have your back.

Show us your awesome designs by sending them to us or tagging us.  

Cover Illustration by tubik

________________________________________________________________________

Read all about our latest update X3 in case you haven’t yet.

If you have more questions than feel free to contact us via:

Spectrum | Instagram | Facebook | Twitter

Vikas Sharma
WRITTEN BY:

Vikas Sharma

Content and Social Media Manager
Subscribed.
Something went wrong while submitting the form. Try again.

More from Vectornator

Create a Color Palette

Vectornator Pro: New & Improved

This Design Agency Is Using Vectornator To Make Money