The 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…

Continue reading →

9 site typography tips
Typography for a web site is a rather important design element, which in RuNet is somehow not very pronounced. This issue is often raised on English-language foreign design blogs, we…

Continue reading →

Interesting visual design trends 2020
At the end of the year, 2 types of notes often appear on blogs - either the results of the previous one, or forecasts for the next. That is why…

Continue reading →

The 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.

Golden ratio in nature
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.

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.

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:

Fibonacci numbers
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.

How to make a color palette for a site and not only
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…


Endless page scrolling: helps or harms?
When it comes to online marketing or web design, it is extremely important to be the initiator of successful ideas and shape trends in your own field. Today we will…


Where and how does a designer make money on the Internet
At present, it is not so easy to find a suitable and well-paid job, even for a knowledgeable, versed person. The crisis and all other nonsense oppresses, some unemployment in…


Tips for creating a beautiful one-page portfolio site
Many global web design trends can be applied to single-page users, but they also have their own unique features. Such projects are specific enough, so it’s useful to read something…