The Golden Ratio on the Web
Unfortunately, nowadays there is too much advertising, many have got the stereotype that design is just a pretty and bright picture.
Many novice designers do not think that first of all, the design should be effective, i.e. communicate to the end user a specific goal.
Having made a stunning picture, sometimes you see that there is still something wrong in it. And this is reflected in the consumer, when sales of goods simply do not go. Unlike a competitor who has a completely empty white picture, with a couple of expressions and a logo.
')
There are several links to effective design:
10 principles of effective web design
Five design rules applied in the Web
This is from what was remembered. It is recommended to read the blog Design of user interfaces and usability .
This is, let's say, the preamble, which can be attributed to any design direction. In this article we will talk about Web-design and the application of the Golden Section and the Rules of Third .
One of the main goals of effective web design is clarity and intuition. And also focus the user's attention on the right places on the page. How to achieve this?
There are many ways, for example, to use grids, one can prefer the most elementary solutions, or focus on simplicity and convenience.
But in any case, you must be sure that users have a sense of balance, order, harmony and comfort. Just in this case, the application of the golden section becomes an important step in the design of a web page.
First of all, what is the Golden Section?
According to Wikipedia :
Gold section (golden proportion, division in the extreme and average ratio, harmonic division, Phidia number, φ) - division of the segment into parts in such a ratio, in which the most part refers to the smaller, as the sum to the larger. For example, dividing a segment of an AU into two parts in such a way that a large part of it, AB, belongs to a smaller sun, as the whole segment of an AC belongs to AB (i.e. | AB | .
This proportion is usually denoted by the Greek letter φ (there is also the designation τ) and it is equal to 1.618 ... (infinite number)
In the ancient literature that has come down to us, the golden section is first encountered in the Epochs of Euclid (3rd century BC). The term “golden section” was introduced much later by Leonardo da Vinci, who used the golden section as a proportion of the “ideal human body”. The golden section has many wonderful properties, but even more properties are fictional, following Leonardo da Vinci, many people "strive to find" the golden section in everything between one and a half and two.
On the topic of the Golden Section, a lot of literature is written, so I will not paint in detail what it is. For those who for the first time hears this concept, I strongly recommend to read, on the links below below:
The easiest option is to query on the word "Golden Section" in Google
But, I can highlight the most interesting links:
Divine Proportions of the Golden Section
Golden ratio
Hormones and Golden Section Museum
Fig. 1: The Golden Ratio in Web Practice
In Fig. 1 demonstrates the principle of the Golden Section. Let's say your fixed-width layout is 960px and contains two main blocks, content and sidebar. How would you calculate the width of the Kolnok without knowing the magic number 1.618?
Of course, web design should not be strictly tied to the Golden Ratio. But in some cases, this proportion would help improve the visual relationship of the entire layout.
For example, consider the design of the blog The 404 Blog .
Fig. 2: The 404 Blog
Nice composition, soothing colors. No visual tension and no aggressive concentration on the right places on the blog (although this is now in vogue, which is done with the help of bright details).
But blog design does not adhere to the principles of the Golden Section. And interestingly, most often, users simply do not feel this, because they intuitively divide the layout into two separate blocks (583px wide
The fact is that the free space on the blog is passive. The ratio between the two main blocks is
The reason that the layout looks almost perfectly balanced, although it does not adhere to the Golden Section, is that the relations between the blocks are equal.
By the way, here are some handy applications that will help with calculations of the Golden Section without a calculator.
1. Phiculator is a small and convenient application that automatically calculates the value corresponding to the Golden Section from any entered number.
2. Golden Section Ratio Design Tool - a powerful tool that helps to avoid routine operations when working with the layout of objects and forms. You can see the result on the fly.
This is the principle of composition, based on the simplified rule of the golden section. The rule of thirds is mainly used by photographers.
When defining visual centers, a frame is usually divided by lines parallel to its sides in the proportions 3: 5, 2: 3 or 1: 2 (successively the Fibonacci numbers are taken). The last option gives the division of the frame into three equal parts (thirds) along each side.
Despite the noticeable difference in the position of the spotlights, obtained by the rule of thirds, from the golden section, technological simplicity and clarity made this scheme of composition popular.
Fig. 4: Photography demonstrates use of the Rule of Thirds
Most often, it is impossible, and it is simply useless to use all four points to highlight the most important details of the site layout. But, at least successfully use one or two points, as is usually the way they do.
The upper left corner is usually the “strongest”, since users view the site on the basis of the shape of the letter “F”.
Consider the rule of thirds by example. Let's say we have a layout whose width is 960px. The height varies between 750 and 950px.
How to divide the layout into 9 equal parts? A few simple steps:
1. Divide the width of your layout by 3. 960px / 3 = 320px.
2. Divide the height of your layout by 3. ((750px + 950px) / 2) / 3 ≈ 285px.
3. The size of the rectangle should be approximately 320px by 285px.
4. Draw a grid of rectangles by drawing lines through the ends of the rectangles.
5. Place the most important elements at the intersection of the horizontal and vertical lines.
As an example of life, you can take the project demandware.com .
Although the color scheme of the site is bright and colorful, nevertheless, everything on it seems extremely simple and clear.
Fig. 5: Demandware
If we consider the effectiveness of the design of this project, then you can immediately see a great balance, due to the perfect use of the Rules of Third.
Notice, on two of the four intersections, the most important information is highlighted, the names of which the company wants to emphasize (marked in pink squares).
The navigation block is also remarkably located at the second intersection of the lines. This is a truly effective (or effective) design.
In some cases, applying the Golden Section and the Rules of Thirds can significantly improve the relationship of your project with visitors.
With a ratio of 1: 1.62, your site becomes more convenient and more structured to view.
And it works not only in web design.
Many novice designers do not think that first of all, the design should be effective, i.e. communicate to the end user a specific goal.
Having made a stunning picture, sometimes you see that there is still something wrong in it. And this is reflected in the consumer, when sales of goods simply do not go. Unlike a competitor who has a completely empty white picture, with a couple of expressions and a logo.
')
There are several links to effective design:
10 principles of effective web design
Five design rules applied in the Web
This is from what was remembered. It is recommended to read the blog Design of user interfaces and usability .
This is, let's say, the preamble, which can be attributed to any design direction. In this article we will talk about Web-design and the application of the Golden Section and the Rules of Third .
One of the main goals of effective web design is clarity and intuition. And also focus the user's attention on the right places on the page. How to achieve this?
There are many ways, for example, to use grids, one can prefer the most elementary solutions, or focus on simplicity and convenience.
But in any case, you must be sure that users have a sense of balance, order, harmony and comfort. Just in this case, the application of the golden section becomes an important step in the design of a web page.
Golden ratio
First of all, what is the Golden Section?
According to Wikipedia :
Gold section (golden proportion, division in the extreme and average ratio, harmonic division, Phidia number, φ) - division of the segment into parts in such a ratio, in which the most part refers to the smaller, as the sum to the larger. For example, dividing a segment of an AU into two parts in such a way that a large part of it, AB, belongs to a smaller sun, as the whole segment of an AC belongs to AB (i.e. | AB | .
This proportion is usually denoted by the Greek letter φ (there is also the designation τ) and it is equal to 1.618 ... (infinite number)
In the ancient literature that has come down to us, the golden section is first encountered in the Epochs of Euclid (3rd century BC). The term “golden section” was introduced much later by Leonardo da Vinci, who used the golden section as a proportion of the “ideal human body”. The golden section has many wonderful properties, but even more properties are fictional, following Leonardo da Vinci, many people "strive to find" the golden section in everything between one and a half and two.
On the topic of the Golden Section, a lot of literature is written, so I will not paint in detail what it is. For those who for the first time hears this concept, I strongly recommend to read, on the links below below:
The easiest option is to query on the word "Golden Section" in Google
But, I can highlight the most interesting links:
Divine Proportions of the Golden Section
Golden ratio
Hormones and Golden Section Museum
The Golden Ratio on the Web
Fig. 1: The Golden Ratio in Web Practice
In Fig. 1 demonstrates the principle of the Golden Section. Let's say your fixed-width layout is 960px and contains two main blocks, content and sidebar. How would you calculate the width of the Kolnok without knowing the magic number 1.618?
Of course, web design should not be strictly tied to the Golden Ratio. But in some cases, this proportion would help improve the visual relationship of the entire layout.
For example, consider the design of the blog The 404 Blog .
Fig. 2: The 404 Blog
Nice composition, soothing colors. No visual tension and no aggressive concentration on the right places on the blog (although this is now in vogue, which is done with the help of bright details).
But blog design does not adhere to the principles of the Golden Section. And interestingly, most often, users simply do not feel this, because they intuitively divide the layout into two separate blocks (583px wide
(630px - 31px - 31px) and 299px (330px - 31px) ).The fact is that the free space on the blog is passive. The ratio between the two main blocks is
630px : 330px ≈ 1.91 ≠ 1.62 .The reason that the layout looks almost perfectly balanced, although it does not adhere to the Golden Section, is that the relations between the blocks are equal.
By the way, here are some handy applications that will help with calculations of the Golden Section without a calculator.
1. Phiculator is a small and convenient application that automatically calculates the value corresponding to the Golden Section from any entered number.
2. Golden Section Ratio Design Tool - a powerful tool that helps to avoid routine operations when working with the layout of objects and forms. You can see the result on the fly.
Rule of Thirds
This is the principle of composition, based on the simplified rule of the golden section. The rule of thirds is mainly used by photographers.
When defining visual centers, a frame is usually divided by lines parallel to its sides in the proportions 3: 5, 2: 3 or 1: 2 (successively the Fibonacci numbers are taken). The last option gives the division of the frame into three equal parts (thirds) along each side.
Despite the noticeable difference in the position of the spotlights, obtained by the rule of thirds, from the golden section, technological simplicity and clarity made this scheme of composition popular.
Fig. 4: Photography demonstrates use of the Rule of Thirds
Most often, it is impossible, and it is simply useless to use all four points to highlight the most important details of the site layout. But, at least successfully use one or two points, as is usually the way they do.
The upper left corner is usually the “strongest”, since users view the site on the basis of the shape of the letter “F”.
Consider the rule of thirds by example. Let's say we have a layout whose width is 960px. The height varies between 750 and 950px.
How to divide the layout into 9 equal parts? A few simple steps:
1. Divide the width of your layout by 3. 960px / 3 = 320px.
2. Divide the height of your layout by 3. ((750px + 950px) / 2) / 3 ≈ 285px.
3. The size of the rectangle should be approximately 320px by 285px.
4. Draw a grid of rectangles by drawing lines through the ends of the rectangles.
5. Place the most important elements at the intersection of the horizontal and vertical lines.
As an example of life, you can take the project demandware.com .
Although the color scheme of the site is bright and colorful, nevertheless, everything on it seems extremely simple and clear.
Fig. 5: Demandware
If we consider the effectiveness of the design of this project, then you can immediately see a great balance, due to the perfect use of the Rules of Third.
Notice, on two of the four intersections, the most important information is highlighted, the names of which the company wants to emphasize (marked in pink squares).
The navigation block is also remarkably located at the second intersection of the lines. This is a truly effective (or effective) design.
Conclusion
In some cases, applying the Golden Section and the Rules of Thirds can significantly improve the relationship of your project with visitors.
With a ratio of 1: 1.62, your site becomes more convenient and more structured to view.
And it works not only in web design.
Source: https://habr.com/ru/post/27465/
All Articles