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

Continue reading →

How to choose the best illustrations for your site
I somehow had a publication about the best free photobanks and photo stocks in which the question was raised where to look for images for the site. Today I want…

Continue reading →

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

Continue reading →

The principle of the golden section in the design of sites

A key indicator of the quality of web design is how natural and easy it is perceived by users. When creating a visual site design, it is important to illustrate the functionality and informative component of the project, to form its correct perception. The use of classical techniques such as the rules of the golden section in the design helps to solve such problems in an optimal way. We will consider it today.

This principle describes a mathematical proportion that 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.

The principle and formula of the golden section
Among the first rule began to use the ancient Greek sculptor and architect Phidias. After two centuries, Euclid gives his exact mathematical description. Some time later, Leonardo da Vinci will apply the same idea in his works. His Vitruvian man, created according to the rule of the golden section, later became an illustration of harmony and proportionality in the construction of the human body in particular and of the Universe in general.

The embodiment of the ideal proportion can be seen in many places: in full-blown flowers, works of art, images of the Milky Way.

The golden ratio in nature
As we said above, the proportion created on the principle of the golden section is perceived as natural and harmonious. Therefore, designs built with its help are more understandable and user-friendly. When developing a website, this approach is not always used, but the traditional layouts for creating layouts are somehow based on it.

There are several options for applying the golden section 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, use the number Φ, approximately equal to 1.62 (a more accurate value – 1.618).

Golden ratio in design
For example, you have a block 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 area = 640 – 396 = 244 px.
If you apply the formula of the golden section in the design of sites, then:

for a 1024 px layout, we get 633 px parts for content and 391 px for the sidebar;
if you take a width of 1000 px, then the columns will be 618 and 382 pixels each;
in a 960 px wide design, the layout is divided into 593 px and 367 px.
Golden Ratio in Smashing Magazine
The golden section rule corresponds to proportions 3/2, 5/3, 3/8, etc. In percentage terms, 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 the typography of the site:

Font size according to the golden section 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 take a look at one interesting service on the topic – Golden Ratio Typography Calculator (calculator of the golden section for texts).

Golden Ratio Typography Calculator Service
In the left column, you define one or several parameters (font size, content width, number of characters per line), after which the project will generate the best and best typography options. In the column on the right, you can change fonts by 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 a mathematical rationale for the golden section. This is a sequence of integers from 1, in which each successive number is 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 dimensions of the elements increase according to the increase in the values ​​of the numbers of the series. In practice, it looks like this:

Fibonacci numbers
The Fibonacci series is optional for building squares. These can be circles, ovals, etc. Here are a couple of examples from one English-language note.

FastCompany.com website
It is not surprising that in this project the necessary proportions are strictly observed. Large companies often hire good specialists who are able to properly develop their brand. The main content is located in the block number 1, the navigation elements within the block number 2. If you look at the sidebar, even there you will find the embodiment of the principle of the golden section in the design – the ratio of the size of the selected article and the advertisement under it.

Mashable.com website
Here the proportion is implemented in a slightly different way – not horizontally, but vertically in each of the columns separately. Rate the place that takes the title in block number 3. By the way, if the developers used the social buttons right below it, it would attract more attention to the elements.

Web design where to start - how to become a web designer yourself and start a successful career
Want to learn how to become a web designer yourself? Or maybe you already have several of your designs, and you would like to bring your skills to a new…


Get rid of guesswork in design
Creativity breathes life into successful sites. However, creative ideas and solutions often resemble guessing - a dangerous business, I tell you. So what can designers do to convince the customer,…


Designers are fickle people, they like to experiment with things. Therefore, they often try to solve problems of different approaches, which in the future may become mainstream and classic. As…


5 new fashion trends
I continue to translate an article on web design trends. The first 5 new fashion trends look like this: Printed letters Advanced User Interfaces PNG transparency Huge typography Font replacement…