Many people are getting difficult when it comes to design the layout of their web page. Layout of web page actually is the most difficult part to make because layout is also the main part of a web. When making layout, you should decide on how short or tall, wide or narrow everything should be, and what must go where can be very difficult.

Golden ratio for web design today is also popular to discuss. Many web designers apply golden ratio for their design. The following will be discussed further about golden ratio and how to use it on a web page.

What is Golden Ratio

To make you much understand about golden ratio in web design, you should know first about definition of golden ratio itself. Golden ratio actually is a golden rectangle that can be divided into smaller rectangle and square. Ratio of width of small rectangle with the square’s width is same as the width of square to entire rectangle.

To ensure you about this fact, if you divide the golden rectangle to a smaller rectangle and square, golden rectangle is smaller rectangle as well. If you want to find the real example of golden ratio, you can look at the nautilus shell. It has spirals in itself. You will notice that the spirals of the shell get smaller more and more at same proportion for each other. Other example of golden ratio is curvature of fern fronds and sunflower petals.

Golden Ratio for Design

Golden ratio is commonly called as golden rectangle, divine proportion, or golden mean. It has been used since centuries to make a design, which is pleasing and aesthetic for most people. Golden ratio actually is visual representation of number phi or 1.618033988749895. Golden ratio is recognized in some ancient architectural design like Parthenon. It is also still many used in design and architecture, web design included.

If the divine proportion is used in the design, it is very difficult to explain about it and difficult to understand. Due to Phi is around you, golden ratio is comfortable ration. Therefore, you should be trained to make it attractive. The designers who apply golden ratio will make designs, which are more visually compelling and effective.

How to Apply Golden Ratio for Web Design

Use golden ratio in web design will make your layout much more attractive and aesthetic looking. You might be confused on how to use this divine proportion to your web. Actually, using golden ratio is very simple and easy by following these tips :

  • How wide the design is: Design a web page with golden ratio may use flexible or fixed widths. However, to use the ratio, of course you need to have number. If you are designing a web page for 800 by 600 resolution, the wide of page should no more than 780p, so you can create your width at 760 pixel.
  • Divide the number by Phi: After you know about the width of your page, use the width number to divide it by Phi or 1.62. The result of 760 divide by 1.62 is 469.14. So, 469.14 is the width for your main column.
  • Get the Second Column width: After you get the main column width, you also need to get second column width by subtracting the width of main column from whole width. So, 760 minus 469 is 291.

Based on this calculation, you must generate 2-column site, which has main column 469 px of wide and 291 px wide of the second column. If you apply this calculation, you will have a web page, which is aesthetically looking with no need to do anything else.

In addition, you can also do same calculation with the percentages of flexible width layout. 100 percent divided by 1.62 is 62 percent. It means that the wide column is 62% and the second wide column is 38%. Many sites sometimes recommend you to use ratio 3:5 as your golden ratio.

Although this ratio is close to the calculation of golden ration, it is not the golden ratio. But, it will be a great option to get close with perfect proportion, especially if you do not have calculator or you want to design something quickly. By following these tips, you can easily apply golden ratio in your web and make it look aesthetic without so much effort.

Conclusion

Actually, golden ratio is not only applied for width, but also for the height of you page with similar ways. Assume that your web page has fixed weight. Divide the height by 1.62. The result is used as the height for your main content. To get the height of the bottom bar, you can subtract the height of site with your main content’s height. Now, you can start to apply golden ratio in web design with ease.