Understanding The Golden Ratio in Designs

They say that there is a “divine proportion” that rests in nature and many things around us. You can find it in flowers, bee-hives, sea shells, and even our body.

This divine proportion, also known as the Golden ratio, Divine ratio, or Golden section and can be applied to various arts and discipline. Scientists claim that the closer to the golden ratio an object is, the more the human brain finds it agreeable and pleasant.

Long since this ratio was discovered, many artists and architects have applied it into their works. You can find the golden ratio in several Renaissance master pieces, architecture, paintings, and much more. The result: a beautiful and aesthetically-pleasing masterpiece.

No one really knows what it is about the golden ratio that pleases our eyes. Most assume that the fact that it appears everywhere and is a “universal” proportion is what makes us accept it as a logical, harmonic, and organic proportion. In other words, it just “feels” right to our brains.

So, What is the Golden Ratio?

The golden ratio, also known as “Phi” in Greek, is a mathematical constant. It can be expressed by the equation a/b=a+b/a=1.618033987, where a is larger than b. This can also be explained through the Fibonacci sequence, another divine sequence. The Fibonacci sequence begins with 1 (some say 0) and adds up previous number to give the next (i.e.1, 1, 2, 3, 5, 8, 13, 21…)

The Golden Ratio

If you try to find the quotient of two subsequent Fibonacci numbers (i.e.8/5 or 5/3),the result is very close to the golden ratio 1.6, or φ(Phi).

The Golden Spiral is created using the Golden Rectangle. Once you have your rectangle of 1,1, 2, 3, 5, and 8 units squared boxes respectively, as shown in the image above, you can start constructing the golden rectangle. Using the square side as you radius, you are to create an arc that touches both the points of the square diagonally. Repeat this for every square within the golden triangle and you’ll end up with a Golden spiral.

Where we can see it in nature:

Golden Ratio in flowers

The golden ratio and Fibonacci sequence appears in the petal count of flowers. Most flowers have petals that are either two, three, five, or more petals which are all part of the divine sequence. For example, lilies have 3 petals, buttercups have 5, the chicory flower has 21, and the daisy has 34. Apparently, the seed head of a flower also follows the Golden ratio. The sunflower, for example, has a seeds that extend from the center and grows around the outside to fill in the seed head. These are usually formed in spiraling patterns that resemble the Golden spiral. What’s more is that the seed count usually adds up to the Fibonacci numbers.

The hands and fingers also follow the golden ratio. Look closer! The base of the palm to the tip of your finger is separated in portions (the bones). The ratio of one part compared to the next will always be 1.618! Even the forearm to hand ratio is the same. Even the toes, and the face, we go on and on…

Application in Art and Architecture:

The Parthenon in Greece is alleged to have been built using the Golden proportions. The dimensional relations of the height, width, pillars, column distance, and even the size of the portico are believed to be relative to the golden ratio. It is possibly because the building feels so proportionately perfect and, it always has since ancient times.

Golden Ratio in Art

Leonardo Di Vinci was also a fan of the Divine proportion (and many other curious subjects as a matter of fact!). The wondrous beauty of the Mona Lisa may be due to the fact that her face and body respect the Golden ratio, as do real human faces in nature. Also, the figures arranged in the Last Supper painting by Leonardo Di Vinci arrange figures in a manner that uses the golden proportions. When you construct golden rectangles across the canvas, the center proportion perfectly places Jesus right in the middle.

Applications in Logo Design:

Not so surprisingly, you can also find utilization of this divine ration in many disciplines of modern times, particularly designs. For now, let’s focus on how it can be used in logo design. First, let’s look at some of the world’s most famous brands that have used the golden ratio to perfect their logos.

Golden Ratio in Apple Logo

Apparently, Apple has used circles true to the Fibonacci series to place and cut out shapes of the Apple logo. Whether or not this was done intentionally, is unknown. However, the result is clearly a perfect and visually aesthetic logo design.

Golden Ratio in Toyota Logo

Toyota’s logo follows the a and b ratio to form a grid that lays out the three rings. Notice how this logo uses rectangles instead of circles to create the golden ratio.

Golden Ratio in Pepsi Logo

The Pepsi logo can be created by two intersecting circles, one larger than the other. The larger one compared to the smaller one, as shown in the image above, is proportional to—you guessed it! Their latest flat logo is simple, effective, and beautiful!

Other than Toyota and Apple, several other companies’ logos such as those of BP, iCloud, Twitter, and Grupo Boticario are believed to have taken the golden ratio into account. And we all know how famous those logos are — because an image immediately pops up into our heads!

Here’s How You Can Apply It In Your Designs As Well

Make a sketch of the golden rectangle as shown above in yellow. This can be done by constructing squares with heights and widths of a number belonging to the golden sequence. Start with unit one and place another 1 unit squared piece right next to it. Place another square that is 2 units square above the two. You will automatically have a side of 3 units with the first three squares. After constructing the 3 units squared box, you’ll end up with a 5 unit side from which you can make another (5 unit squared) box. This can go on forever before you realize that you have the exact size you need!

T he rectangle can be placed in any direction. Separate the smaller rectangles and use each one to put together a layout that will serve as your logo design’s grid.

If logo is more circular, then you will require a circular version of the golden rectangle. You can do this by constructing circles proportional to the Fibonacci numbers. Create a golden rectangle using circles only (this means that the largest circle will have a diameter of 8, then a smaller circle with diameter 5, and so on). Now separate these circles and place them in any manner you like to form a basic layout for your logo design. Here’s the Twitter logo example:

Golden Ratio in Twitter Logo

Note: You don’t have to use all the circles or rectangles from the Golden rectangle. You can also use one particular size repeatedly.

How to Apply it to Text on Designs:

This is less tricky than logo designing. The simple rule to the application of the golden ratio in text is that the next larger or smaller text should be according to Phi. Let’s look at this example:

If my font’s size is 11 then I must have a subheading that has a larger font. I will multiply my text font with the golden ratio to produce a number that is larger (11*1.6=17). Hence my subheading should be size 17. Now, I want an even larger heading or title. I will multiply my subheading font with the ratio to come up with 27 (17*1.6=27). There you have it! Your text is now proportional to the golden ratio.

How to apply it to Web Design:

Here it gets a little more complicated. You can stay true to the golden ratio even in your web designs. If you are an experienced web designer, you might have already guessed where and how this can be applied. Yes, we can effectively used the golden ratio and apply it to our web page’s grids and user interface layouts.

Take your total grid pixel by width or by height and use that to construct a golden rectangle. Divide the largest width or length to arrive at a smaller number. This can be the width or height of your main content. What you’re left with can be your side bar (or bottom bar if you have applied it to the height). Now keep using the golden rectangle to further apply it to your boxes, buttons, panels, images, and text. You can also construct a full grid based on smaller versions of the golden rectangle placed horizontally and vertically to create smaller interface objects that are proportional to the golden rectangle. To get proportions you can use this calculator.

The Spiral:

You can also use the Golden spiral to determine where to place the content on your website. If you have a home page loaded with graphical content, such as that on an online store website or a photography blog, you can make use of the golden spiral method that many artists have used in their artwork. The idea is to place the most valuable content at the center of the spiral.

Content clustering can be done in a manner that follows the golden rectangle. This means that the more towards the center squares the spiral moves (towards the one unit squared boxes), the “denser” the content will become.

You can use this technique to determine the location of your header, images, menu bar, toolbars, search boxes, and other elements. Twitter is famous for not only using the golden rectangle in their logo design, but also using it for their web design. How? By making use of the Golden rectangle, or in other words the golden spiral concept, in their users’ profile page.

This may not be easy to use on CMS platforms where the content creator determines the layout instead of the web designer. The Golden ratio works well with WordPress and other blog-style designs. This is probably because the side bar is almost always present on a blog design which fits in well with the Golden rectangle.

Golden Ratio in Twitter page

An Easier Method:

Very often, designers skip the complex mathematics and apply what they call the “Rule of Thirds“. This can be achieved by dividing the area into three equal parts both horizontally and vertically. The result is nine equal parts. The line intersection can be used as a focal point for the shape or design. You can place a key subject or your main elements on one or all of those focal points. Photographers use this concept to posters as well.

Use of Golden Ratio in photography

The closer the rectangles are to the ratio 1:1.6, the more visibly-agreeable it is for the human brain (since it is closer to the golden ratio).

Like the article? Share it.

LinkedIn Pinterest

7 Comments

  1. Nice copy of Keep up.

  2. The best tutorials are found on Youtube. You get to see how the thing is done, and you can also try it for yourself and find out if you can do the same. If you already knew the basic in HTML and CSS, you can head over to the CMS and design frameworks. In this case, it will be much easier for you to understand how things worked.

  3. good explanation, thanks!

  4. Well there is a difference between golden ratio and fibonnaci spiral. Quote ” The Fibonacci sequence begins with 1 (some say 0) and adds up previous number to give the next (i.e.1, 1, 2, 3, 5, 8, 13, 21…) ”
    For mathematicians this is a hair pull. Just saying ;)
    Otherwise nice article.

  5. Hi, can you add more, more simple design and how to design from simple. + sign, I notice in rule of 3, there is plus sign, and opposite side of plus is even, and in toyota sign that is right, but not perfect as rule 3, so, I know within circle, there is plus sign that is even, which have 4 smaller square. So, circle is even in diameter everywhere, so are square that is even in horizontal and vertical. So, for toyota, that I know is even, so plus sign that is even, so there is additional radius, 1 smaller horizontal, there are two smaller horizontal, and two smaller vertical, so there must be increase of horizontal and vertical with even radius. So, for toyota, is there an increase of radius of 1 line that is vertical and horizontal, to make toyota?? I know the foundation shape that is circle is logical and even, so are square that is even with 4 lines that is touching at different location, like perfect box. How do toyota increase from one plus sign to additional fraction to another sign that total together. One plus sign with 4 lines, 2 smaller that is horizontal, 2 smaller that is vertical, so 1 add with vertical and horizontal that add to another plus sign to become rectangle?? I know rectangle is not even, it have mixed of odd number and even number in vertical and horizontal.

    Is there another golden ratio that have add by 1, not by 2. 1 plus 2 equal 3, plus 1, equal 4, and so on. Or it is not even?? Is there an calculate to make it work? To understand the logical process, by using math and shape that combine.

  6. Prof Prem raj Pushpakaran writes –let us celebrate Phi Day!!!

  7. Good

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *