Connect with us

Web Design Principles: What You Should Know About The Golden Ratio


Web Design Principles: What You Should Know About The Golden Ratio

Design principles are the things you should follow when it comes to making design since it contains the basic rule of creative design. Those are the things that should be mastered by the designers.

There are some aspects that you should notice when you make a design. Keep in mind that making a design cannot be done carelessly unless you are an amateur. For the professional ones, there are some things that they should follow. Design principles and elements are something related. That is why you should master both of them to get the creative design.

Design Principles: Balance, Gradation, Repetition, and Contrast

Balance is something you learn in design principles. When you have two images combined, the large one should be balanced by the small one, the dark light tone should be balanced with the light tone, and such. Gradation will give you the linear productive. The direction and size gradation from dark to light or warm to cool will give the aerial productive. Repetition should be made with the kind of variation. Repetition without variation will be boring and monotonous. Contrast is the opposed elements. In color wheel, it can be green to red, orange to blue, and such. Contrast in tone, like dark to light.

Design Principles: Harmony, Dominance, Unity

Harmony in design principles will give you the satisfying visual in effect by combining the similar elements. It is actually the opposite of contrast. Dominance can be used in one certain element to emphasize the design. The great dominance will make your design far from being monotonous. Unity is the combination of two different elements that are meant to be combined. For example, rough texture, oblique direction, and course can be best to combine with subject that is active and aggressive. It is because both of them will give the great design.

Keep in mind that design principles and practice are something you cannot separate. It means that if you want to follow the design principles as perfect as possible, you should practice as many times as possible. One thing for sure, creative design is not that hard to get if you know how to do it.

More on the Golden Ratio

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.


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.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in themes

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top