+359 2 850 5364

The golden section in web design

How to use the golden section in web design?

In order to achieve a clean and balanced look of your design, you need to give it a sense of order and harmony that users can intuitively feel.

You can use the concept of the golden section for this purpose.

"The golden ratio (also known as the golden ratio, the golden ratio, or the divine proportion) is an irrational number in mathematics that expresses the ratio of parts for which the greater part refers to the smaller as well as the whole to the larger. It is denoted by the Greek letter φ and has a value approximately 1.618.

The golden section is not only a mathematical concept, but a symbol of beauty, harmony and perfection in art, science and nature. The term "golden section" was introduced by Leonardo da Vinci as a proportion to the "ideal human body ".

Source: Wikipedia.


Let's say you want to create a design with a fixed width of 960 px. You have decided to separate two blocks - one larger for the content and one smaller for the sidebar. How to calculate how wide the two columns are?

1. You need to calculate the width of the content block. You need to make sure that the ratio between this block and the whole design is 1.62. To do this, divide 960 px by 1.62, the result is approximately 593 px.

2. Subtract 593 px from the width of the entire design (960 px) and you will get 367 px.

3. Now, you need to calculate the two ratios. First, the ratio between the content column and the sidebar (593 px: 367 px) - you get 1.615. The second is the ratio between the width of the entire design and the width of the content block (960 px: 593 px) - 1,618 is obtained. The two ratios are almost equal, so you managed to achieve your goal.

Similarly, the concept of the "golden section" can be applied to designs with non-fixed widths.

In some cases, the " golden section " can improve not only the communication of your design, but also the subsequent production of other elements.

Related Articles