Golden ratio in website design
A key indicator of web design quality is how natural and easy it is for users to perceive. When creating the visual design of the site, it is important to illustrate the functionality and the informative component of the project, to form its correct perception. The use of classical techniques such as the golden section rule in design helps to solve such problems in an optimal way. We will consider it today.
This principle describes the mathematical proportion, which forms a harmonious, natural relationship of the parts of one whole to each other. It is obtained by dividing the whole into two parts so that the ratio of the first part to the second is the same as the ratio of the whole to the first part.
Golden Ratio Principle and Formula
Among the first, the ancient Greek sculptor and architect Phidias began to use the rule. Two centuries later, Euclid gives his exact mathematical description. After a while, Leonardo da Vinci will apply the same idea in his works. His Vitruvian man, created by the rule of the golden section, later became an illustration of harmony and proportionality in the construction of the human body in particular and the Universe in general.
The embodiment of the ideal proportion can be seen a lot where: in the blossoming flowers, works of art, images of the Milky Way.
The golden section in nature
Golden Section Rule in Website Design
As we said above, the proportion created by the principle of the golden ratio is perceived as natural and harmonious. Therefore, the designs built with its help are more understandable, user-friendly. When developing a site, such an approach is not always used, however, traditional layout schemes are somehow based on it.
There are several options for applying the golden ratio rule in web design.
1. Dimensions of blocks and elements on the page
The proportion described above is used when zoning a page, as well as forming individual blocks, if they need to be divided into two proportional parts. For calculations, the number Φ is used, approximately equal to 1.62 (a more accurate value is 1.618).
Golden ratio in design
For example, you have a block with a width of 640 pixels. So:
The height is calculated as follows: 640 / 1,618 = 396 px.
The same will be the width of most of the proportion (left in the picture above) = 396 px.
Whereas the width of the smaller region = 640 – 396 = 244 px.
If you apply the golden ratio formula in website design, then:
for the 1024 px layout, we get 633 px parts for the content and 391 px for the sidebar;
if you take a width of 1000 px, then the columns will be 618 and 382 pixels;
in a design with a width of 960 px, the layout is divided into 593 px and 367 px.
Golden Ratio at Smashing Magazine
The golden ratio rule corresponds to the proportions 3/2, 5/3, 3/8, etc. As a percentage, the division of the integer by the number Φ is performed as 62/38%. It can be used not only in building blocks, but also in typography of a site:
Font size according to the golden ratio rule
If the header size = 20 pt, then for the content block we get 20 / 1.618 = 12.36 pt (in principle, rounding to 12 or 13 pt is allowed). By the way, you can look at one interesting service on the topic – Golden Ratio Typography Calculator (Golden Section Calculator for texts).
Golden Ratio Typography Calculator Service
In the left column, define one or more parameters (font size, content width, number of characters per line), after which the project will generate options for the best and best typography. In the column on the right, you can change the fonts, viewing the results in real time. If you click on the link “Font Size”, you will see the recommended sizes of different headers.
2. Application of Fibonacci numbers
Fibonacci numbers are considered the mathematical justification of the golden ratio. This is a sequence of integers from 1, in which each subsequent number is equal to the sum of the two previous ones: 1, 2, 3, 5, 8, 13, etc. Fibonacci series are used in the construction of multi-element layouts. The sizes of the elements increase according to an increase in the values of the numbers of the series. In practice, it looks like this:
The Fibonacci series is not necessary for building squares. It can be circles, ovals, etc. Here are a couple of examples from one English-language article.
It is not surprising that in this project the necessary proportions are clearly observed. Large companies often hire good professionals who can properly develop their brand. The main content is in block No. 1, navigation elements within block No. 2. If you look at the sidebar, even there you will find the embodiment of the golden ratio in design – the ratio of the size of the selected article and the advertisement under it.
Here the proportion is implemented in a slightly different way – not horizontally, but vertically in each of the columns separately. Rate the place that the title occupies in block No. 3. By the way, if the developers used the social buttons immediately below it, then this would attract more attention to the elements.