Golden Ratio: The Designers Guide14.10.16
If you are a Designer, I bet you have come across with the golden ratio. But, how exactly is it related to design? We all knows the concepts of Fibonacci Series in Mathematics. Closely related to the Fibonacci Series, the Golden Ratio describes the perfectly symmetrical relationship between two proportions. In 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. Say, a and b. Then
( a+b )/ a -> a/b = Phi , which is a Greek character = 1: 1.618
That is, Golden ratio is a special number found by dividing a line into two parts so that longer part divided by smaller part is also equal to the whole length divided by longer part. This is a natural phenomenon which can be found almost everywhere in nature, from the leaves of a tree to spiral shape of a seashell. It can be seen in great architectures and great arts also. It is also known as the divine proportion, the golden mean, and the golden section. A golden ratio is not critical that you have to be used in all designs, But If you use it, the design is going to be eye catching and pleasant to any user. It dramatically improves the communication of your design.
Let's have a rough look at how a golden ratio can be incorporated into a logo that makes the alignment and concept a perfect way. Apple has used circles similar to the Fibonacci series to place and cut out shapes of the logo. The Apple logo was not created intentionally, but it just fit smoothly in the Golden mean. The result is clearly a perfect and aesthetic logo design.
Incorporating your golden mean concept in your web design is an another interesting way of attracting your users. Twitter is a famous example for incorporating this into their logo as well as the design content. They have aligned their webpage in an easy way that the most relevant content of their site comes as we move towards the center of the spiral. That is, the more inner we go to the heart of the spiral (towards the square boxes), the "denser" the content will become. Hence, content clustering also can be done easily using the divine proportion.
Now you will have a question about how to apply the golden ratio on the typography. It's less tricky than logo designing. Well, if you choose the subhead size for the web content as 12px, then you can select the 19.2px size (you can round figure it) as the content heading which we get by multiplying your subhead size with the 1.6 ratios (12px * 1.618 = 19.2px). Similarly, you can determine the content text size as (12px/ 1.618 = 7.5) also 7px. Now you have your text which is proportional to the Golden ratio. The best method for molding your web content is to align it with this way.
The golden ratio naturally leads the user's eye to specific points within any web interface. It can help you think about placing the right content using a proper hierarchy. These combinations of layout, typography, image placement principles, etc will help your designs to communicate with your users easily. The closer the rectangle designs to the ratio 1:1.618, the more visibly agreeable your design will be to the human brain. Offering your users an almost natural balance in proportion 1:1.61 brings your design layout to become more scannable and well-structured manner.
Senior Product Strategist
Topics : AD, Design, Content