10 key trends in logo design 2018
Last year's post on logo logo trends 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…

Continue reading →

How to create a color palette for sites or web interfaces
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…

Continue reading →

Drawing hundreds of words is dearer to us
Now let’s talk about graphics on Web pages, because it is thanks to her that WWW has become the most popular Internet service, it is to her that we owe…

Continue reading →

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:

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.

Website FastCompany.com
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.

Website Mashable.com
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.

Split screen
One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout…


JavaScript and the object model
Scripting languages ​​in some way turned the world around, and it was thanks to them that DHTML appeared, which allows you to do almost anything with the page. As you…


Is the UX design right for you? 8 character traits
Going to build a career in IT, many face difficulties in choosing a profession. We’ll show you how to check if the UX design is right for you. There are…


What are longreads on sites
The so-called longreads are one of the leading web design trends in 2015, and also, as expected, in 2016. With the help of long reads, sites today do not just…