Filed under: XTRAS
Comments: 17
As a designer I use the Golden Ratio for almost every design project. That’s why I created this Golden Ratio Calculator. The use of the Golden Ratio will result in a more harmonious design. Often you can beautify a boring minimalistic design by following the Golden Ratio.
Enter a number in the calculator and get a sequence of Golden Ratio Numbers:
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
Two 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…
The 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…
On: February 9, 2013 at 11:52 am
Hi, thanks for being another designer to consider the greatest aesthetic principle known. These n00bs above saying how it has nothing to do with design are just uber myopic.
On: December 30, 2012 at 3:58 pm
Just what I was looking for today. I am a woodworker who has built uncounted cabinets, chests, shelves,ect.. The quality is always the same but some just look more pleasing than others……… Gee, using the golden proportion seems to make sence! Funny how a small dimension change makes a noticeable difference!,,,
On: November 28, 2012 at 9:08 am
Please don’t ever take this down! I use it all the time :)
On: September 17, 2012 at 12:16 pm
I dont get it… maybe im just mentally deficient…doesn’t make a lick of sense to me.
On: July 5, 2012 at 10:09 pm
Also as a web designer, why are you using the golden ratio in web design? The golden ratio has no notable aesthetic properties, which would be the only reason to be using it in design.
On: May 28, 2012 at 4:56 pm
How does this work if I’m trying to figure out the best height of a rectangle with width 2?
On: October 6, 2011 at 9:58 am
Thanks for the tool! Do you have any ideas on volumetric (spatial and/or flow pattern) relationships that could be defined and predicted by the GR?
On: July 14, 2011 at 6:21 pm
How about the whole sequence:…+13,-8,+5,-3,+2,-1,+1,0,1,1,2,3,5,8,13… It does not begin with a zero!
On: May 24, 2011 at 4:29 pm
I went looking for a Golden Ratio calculator just now, and was disturbed to discover that all the websites I visited would only calculate the ratio to nearest whole number! So I was pleased to find your site, where more significant figures are given.
On: October 21, 2009 at 11:58 am
Every month or two I find myself on my bookmarks list looking for your calculator. Thank you for putting this together: I love the multiple returns!
On: August 1, 2009 at 4:12 am
Can you make an interface where you can upload a portrait so you can calculate the golden ratio of a face. I was searching for a golden ratio face calculator and landed on this page. The golden ratio calculator you have here is certainly helpful for designers, but for a beauty queen like me a golden ratio face calculator would be very appreciated.
On: July 30, 2009 at 7:29 am
Thanks for this calculator and the useful information regarding it’s origin.
Leave a Reply
On: April 23, 2013 at 7:17 am
Nice post. I was checking continuously this blog and
I’m impressed! Extremely useful info specially the last part :) I care for such info a lot. I was seeking this particular information for a long time. Thank you and best of luck.