Filed under: XTRAS

Comments: 38

The Golden Ratio in Modern Web Design

I used the Golden Ratio to calculate the proportion of the calculator box above. The standard width of my content area is 626 pixels. To calculate the height I used the following equation 626 pixels / Golden Ratio = 387 pixels. Also the sequence abcdefg follows the Golden Ratio.

For many more elements on this website I used the Golden Ratio. The proportion of font sizes between the three words that form my logo (‘Rado’, ‘Vleugel’ and ‘Media’) follow the Golden Ratio. The line height of this HTML text was calculated by font-size * Golden Ratio.

Of course there are limits in the use of the Golden Rule for web design. In print and in art you see always the whole object. On the web you are looking through a window (your screen) that obscures parts of the object (the webpage). It’s useful to apply the Golden Rule to the width of the columns of a website, the proportion of font sizes, the proportion of smaller images and boxes, but it’s less useful to apply it to the height of elements that are so large that they need to been scrolled.

The Golden Ratio explained

dahliTwo quantities are in Golden Ratio if the ratio of the sum of the quantities to the larger one equals the ratio of the larger one to the smaller (a+b is to a as a is to b). The Golden Ratio is an irrational mathematical constant, approximately 1.6180339887. The Golden Ratio is often denoted by the Greek letter phi.

Other names used for the Golden Ratio are Golden Section (Latin: sectio aurea), Golden Mean, Divine Proportion, Divine Section (Latin: sectio divina), Golden Proportion, Golden Cut and Golden Number.

Some famous artists used the Golden Ratio. If you draw a rectangle around the face of Leonardo da Vinci’s Mona Lisa, the ratio of the height to width of that rectangle is equal to the Golden Ratio. Maybe Leonardo was introduced by the idea of the Golden Ratio by his friend Luca Pacioli, who published a three-volume treatise on the Golden Ratio in 1509 entitled Divina Proportione. Also my favorite painter Salvador Dali used the Golden Ratio in many of his paintings.

The Golden Ratio and Fibonacci Numbers

The Golden Rule is closely related to Fibonacci numbers. Fibonacci numbers are named after the talented 13th Century mathematician, Leonardo of Pisa, (also known as Leonardo Pisano, Leonardo Bonacci, or Leonardo Fibonacci). Most people know Fibonacci numbers from The Da Vinci Code where the numbers are used to unlock a safe.

Fibonacci numbers approach the Golden Ratio, as the numbers get larger (try it yourself by using the Golden Ratio Calculator). Each new Fibonacci number is derived by adding the previous two numbers. This is an example of a Fibonacci sequence: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987…

golden-ratioThe Fibonacci sequence can be viewed as a spiral by drawing successive Fibonacci-proportioned squares. Start with a 1 x 1 square. Beside that square place another 1 x 1 square. Since 1 + 1 is 2, the next square will be a 2 x 2. And 1 + 2 is 3. So, the next square is 3 x 3, and so on. Each succeeding square is placed in a counter-clockwise position to the last square as they rotate around the initial 1×1 square.

Even today’s stock market is not immune of the influence of the Fibonacci Sequence. Some traders try to predict market reversals with Fibonacci Numbers. Maybe I’ll try this if I have earned more  money…

Leave a Reply