Golden Ratio

The Golden Ratio, or phi, is the ratio between two mathematical values of approximately 1..6180339887. Also known as the Golden Rectangle, it is believed that the dimensions of a rectangle are more aesthetically pleasing if the larger side is 1.618033988 times larger than the smaller side. This diagram represents the Golden Ratio.

 

The Golden Ratio is also closely linked to the Fibonacci sequence of numbers, where starting from 0 and 1 you add the previous two numbers to continue the pattern. For example. 0 + 1 =1,  1  + 1 = 2, 1 + 2 = 3, 2 +3 =5 ... The sequence starts with 0,1 2,3,5,8,13,21...  If you divide the previous smaller number by the next larger number the figure is 1.618033988.

This ratio is found in Architecture, Music, Painting, Book Design, Industrial Design and nature and is often related to beauty.

 For my Zen Garden Assignment in Internet Design 292 I applied the Golden Ratio to my page layout. This technique is also known as the 960 Grid system where the number of Columns you use determine the total width of the page. 

Another intriguing pattern to emerge form the Golden Ratio is the geometric spiral that is created by the above drawing. When conceptualising the  page layout I deliberately used this diagram as a template for my page layout. Here is a sketch of my early work.

You can see here that i set up the Spiral to converge on my page logo. The area underneath was to be used for the Zen Garden description and the larger area to the right was filled with the main content.

I also broke up the main content area using the Golden Ratio to keep the design consistent. 

During the conceptual stage I realised that I needed to deliver a portrait style page design, rather than the landscape I had originally drawn. It wasn't a problem as all I had to do was flip the grid and rotate it 90 degrees and I could still use the layout.

The whole point of using the Golden Ratio was to get constrain the grid design of the web page to specific widths to achieve an aesthetically pleasing result. The following is a screenshot of my final submission. While it was not possible to contain all the information within the original rectangle, the Logo positioning, Grid widths and Column splits are all results of this design formula.