Table of Contents

Looking through the website design of sites created recently, one can not help but notice that web designers have adopted various techniques from magazine design. In the last article, we examined the technique of using a modular grid. In this article, we will talk about the golden section technique.

Website Design: Using the Golden Ratio

What should be web site design? Simple to grasp. It is for simplicity of perception that many techniques have been created that help to properly present visual content to people.

One of these classic techniques is the golden ratio technique. You have probably heard about this term, but you may not know how this principle is applied in web design.

The golden ratio principle is a mathematical proportion. It reflects the harmonious correspondence of two parts of one whole to each other. How does it work? Imagine that you have one. You divide it into two parts, and the ratio of the first part to the second should be the same as the ratio of the whole to the first part.

One of the first to use this proportion was an architect from Ancient Greece, Phidias. Euclid later gives the formula a mathematical description. And then Leonardo da Vinci uses the golden ratio in his works. The famous Vitruvian man was created according to the “golden” formula and is the standard of proportionality and harmony in the structure of the human body and the Universe in principle.

Where is this amazing proportion embodied? For example, in flowers that have blossomed, in illustrations of the Milky Way, in art.

Website Design and the Golden Ratio

Web resources created on the basis of the golden ratio are more convenient and easier to read. In website development, this formula is not always taken into account, but most site templates and layouts are built specifically on the golden section technique.

By the way, the principles of the golden section are often used when creating a guideline. The construction of a logo on a modular grid or the proportion of an advertising module in the press can be based on this principle.

We show you examples of use.

1. The location of the blocks

The golden ratio principle is used when a page needs to be divided into several blocks. For mathematical proportion there is a number, it equals 1.618.

For example, your block is 600 pixels wide. This means:
• The height is: 600 / 1,618 = 370.8 px
• The width of the larger part of the block (left picture) will be: 370.8 px
• The width of the smaller part is 600-370.8 = 229.2.

The same with site layouts. For example, most of the block is for content, the rest is for other elements.
The golden ratio is expressed in the proportions 3/2, 5/3, 3/8, etc.

The principle is also used in the text with headings. If the whole is divided into two parts, then for the golden ratio the percentage ratio of the parts will be equal to 62/38%.
For example, the size of your headline is 22 pt, which means that the size of the main text will be 22 / 1.618 = 13.59 – round to 14 pt.

2. Fibonacci numbers

Numbers base the golden ratio technique in numbers. There are a number of consecutive numbers, each equal to the sum of the previous two
1,2, the third number 1 + 2 = 3, the fourth number 2 + 3 = 5, the fifth number 3 + 5 = 8, etc. These number series are used in building layouts.

What does it look like?
Here is the Fibonacci square, just built on the principle of numerical series.

3. The Golden Spiral

The arrangement of blocks from small to large, in the form of a spiral.
Many site layouts are built in a golden spiral.

Finally: Website Design

The golden ratio makes website design layouts more harmonious, proportional, and most importantly – more understandable. Despite the fact that we generally may not know that the website is built according to some principles and canons, it may conceal the mysteries of formulas and proportions.

For Professional website designers dubai or consultation from GCC Marketing Dubai please Contact Us or call us directly on 00971567300683