The principle of the golden ratio in website design

A key indicator of the quality of a web design is how naturally and easily it is perceived by users. When creating the visual design of the site, 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 golden ratio in 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 between 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.

Among the first to use the rule was the ancient Greek sculptor and architect Phidias. Two centuries later Euclid gives an exact mathematical description of it. After a while, Leonardo da Vinci will apply the same idea in his works. His Vitruvian man, created according to the rule of the golden ratio, 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 ideal proportion can be seen in many places: in blossoming flowers, works of art, images of the Milky Way.

The golden ratio rule in website design

As we said above, the proportion created according to the principle of the golden ratio is perceived as natural and harmonious. Therefore, the designs built with its help turn out to be more understandable and user-friendly. When developing a site, this approach is not always used, however, traditional schemes for creating layouts are somehow based on it.

There are several ways to apply the Golden Ratio in web design.

1. Sizes of blocks and elements on the page

The proportion described above is used when zoning the page, as well as in the formation of separate blocks, if they need to be divided into two proportional parts. For calculations, the number Φ is used, approximately equal to 1.62 (more accurate value is 1.618).

For example, you have a block 640 pixels wide. Means:

• The height is calculated as follows: 640 / 1.618 = 396 px.
• The same will be the width of most of the proportion (on the left in the picture above) = 396 px.
• Whereas the width of the smaller area = 640 – 396 = 244 px.

If we 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 we take a width of 1000 px, then the columns will be 618 and 382 pixels;
• in a 960 px design, the layout is split into 593 px and 367 px.

The golden ratio rule corresponds to the proportions 3/2, 5/3, 3/8, etc. In percentage terms, the division of the whole by the number Φ is performed as 62/38%. It can be used not only in building blocks, but also in site typography:

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 ratio for texts).

In the left column, define one or several parameters (font size, content width, number of characters per line), after which the project will generate options for the best and the best typography. In the column on the right, you can change fonts, viewing the results in real time. If you click on the “Font Size” link, you will see the recommended sizes for different titles.

2. Application of Fibonacci numbers

Fibonacci numbers are considered the mathematical underpinning 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 when building multi-element layouts. The sizes of the elements increase according to the increase in the values ​​of the numbers in the series. In practice, it looks like this:

The Fibonacci series is not required to draw squares. These can be circles, ovals, etc. Here are a couple of examples from one English post.

It is not surprising that in this project the necessary proportions are clearly observed. Large companies often hire good specialists who can properly develop their brand. The main content is in block # 1, navigation elements are within block # 2. If you look at the sidebar, then even there you will find the embodiment of the principle of the golden ratio in design – the ratio of the size of the featured article to the ad under it.

Here the proportion is implemented in a slightly different way – not horizontally, but vertically in each of the columns separately. Estimate the place the heading takes in block 3. By the way, if developers used social buttons right below it, it would draw more attention to the elements, and site visitors would not have to spend time searching for them.

It is not necessary to spend a large budget on redesign, sometimes you can make small changes that will improve the perception of the layout. In this example, take a look at the item next to the number 2 – the “Shop” menu item. It is not only located near the most active focus point, but is also tinted green for maximum attention.

3. Golden spiral

It is constructed using the Fibonacci series and additionally determines the location of the elements – from smallest to largest as the spiral turns larger. It can be deployed in any way – it depends on the requirements for the layout.

On the net you will find several examples of sites with the implementation of the principle of the golden ratio in web design and the imposition of this spiral.

Or here s another interesting layout option:

4. The rule of thirds in web design

It is used for page zoning and user attention control. The bottom line is to divide a page or element into three equal parts horizontally or vertically. Crossing lines are points of maximum attention. By quickly scanning a site with their eyes, people tend to focus on elements that are at or near these points.

It is not necessary to use all four points. In the example above, the focus is on text and video. The resulting rectangles can additionally form “functional zones”. So, site visitors are used to seeing the logo in the upper left corner, they pay attention to this area first of all. Contact information, a shopping cart (if we are talking about an online store), address and opening hours are usually placed in the upper right corner, etc. The rule of thirds and the golden ratio in website design complement each other perfectly.

Here s another good example, where two points (highlighted in pink) are the most important elements to grab the user s attention.

It is also allowed to split the main sections into subblocks with repeated application of the rule of thirds. When we add an extra grid for the top block in the Tuts + website layout, we can see the arrangement of elements close to the ideal proportion.

Even with a quick glance at the page, your eyes and brain will be able to catch the main elements from the header: logo, subscription, menu, search.

Total. The Golden Ratio in web design adds naturalness to layouts and helps them feel more harmonious. This principle is realized by calculating the ideal proportions of blocks and elements on the page, imposing a golden spiral, and using the points of maximum focus of attention (rule of thirds). With their help, you can get a convenient, understandable and efficient web project interface.

Do you use the principle of the golden ratio in website design? If you know any more interesting examples of its implementation, share them in the comments.