Effective modern website design should not just be a pretty and bright picture. It should be simple and intuitive. What are the means to achieve this? How to do so, so that the visitor arose a sense of harmony and comfort? And here to help us come to mathematics. In the meantime, let’s see how some basic rules of mathematics in website design. We’ll look at this with examples of the Golden Ratio rule, the Fibonacci numbers, the Five Element rule, the Sinusoid oscillation, and the Rule of Thirds.
Mathematics is wonderful. To someone far removed from numbers and equations, this may sound absurd. However, many of the most beautiful things in nature, and the universe itself, are based on strict mathematical proportions. As far back as Aristotle, one of the most authoritative philosophers of antiquity, said, “Mathematics reveals order, symmetry and certainty, and these are the most important kinds of beauty.”
Mathematics has been used for centuries in both art and architecture. But mathematics is rarely used in website design. Perhaps because there is a widespread belief that mathematics and creativity – things incompatible. Although this view can be refuted, mathematics is a good tool for creating websites. However, in this case, only rely on the mathematics should not be. Here you need something else.
The Golden Ratio or Golden Rectangle
The golden ratio (the golden ratio, the division in the extreme and average ratio) – the division of a continuous value in two parts in such a ratio, at which the smaller part so concerns the greater, as greater to the entire value. The ratio of the parts in this proportion is expressed by an irrational mathematical constant of approximately 1.618033987.
It is believed that objects containing the “golden ratio” are perceived by people as the most harmonious. Here is an interesting fact from Wikipedia. It is known that Sergei Eisenstein artificially built the film “Battleship Potemkin” by the rules of the golden ratio. He divided the tape into five parts.
In the first three, the action unfolds on the ship. The last two are in Odessa, where the uprising unfolds. This crossing into the city takes place exactly at the point of the golden ratio. Yes, and in each part there is a different turning point, occurring according to the law of the golden ratio.
Now let’s move on to the Golden Rectangle. It’s simple here. At such rectangular the lengths of adjoining sides are related by the rule of a golden section, i.e. 1:1.618.
To build a golden rectangle, we first draw a square (red in the picture), then draw a line from the middle of one of the sides of the square to the opposite corner (the line with the arrow in the picture). Use this line as the radius of the arc, which will determine the height of the rectangle. Now finish drawing the rectangle (blue in the picture).
Let’s look at this minimalistic website design below as a visual example. It consists of 6 gold rectangles, measuring 299×185 pixels, 3 rectangles in a row. The sides of these rectangles are related by the golden ratio rule 299/185=1,616.
Pay attention to the big amount of space around a gold rectangle. It creates a calm and pleasant atmosphere in which the elements of navigation can breathe easy. Despite the use of only a few colors and single-type blocks, all the navigation elements are intuitive and serve their purpose.
In order to add a new block without disturbing the logic of the design, it is advisable to add blocks in a third line and move downwards in a similar way.
Applications. Using Golden Rectangles in design works well for a variety of photo galleries, portfolio sites and product-oriented sites.
Fibonacci Numbers in Website Design
Fibonacci numbers are a mathematical sequence of numbers.
Fibonacci numbers are used in music to tune instruments, in architecture to calculate the harmonious proportions, for example, the ratio of the room height to the height of the wall decorations with different materials. The distances between the leaves (or branches) on the trunk of a plant refer roughly as Fibonacci numbers.
The main area of application of Fibonacci numbers in the design is to determine the size of blocks with the main content (containers) and the sidebar. The essence of the method is as follows. We take the base width of a container, for example, 90 pixels, and multiply it sequentially by numbers from the Fibonacci number series. Based on these calculations, the site grid is built. Let’s look at an example.
The page is divided into three columns. The basic width of the container is 90 pixels. Then the first column is 180 pixels wide (90 x 2), the second column is 270 pixels wide (90 x 3) and the third column is 720 pixels wide (90 x 8). The font size also corresponds to the Fibonacci row. The font size in the header is 55 pixels, the font in the section is 34 pixels and the font for the text is 21 pixels.
If the site has a fixed width, such as 1000 pixels, the Fibonacci numbers are not very convenient to use. As the closest number to 1000 is 987 (…, 610, 987, 1597 …), then it is from this number will have to perform calculations for the width of the site blocks. In such situations, it is best to use the Golden Ratio rule (1000 x 0,618 = 618px) and based on it determine the width of the blocks.
Applications. Fibonacci numbers are best suited for the design of blogs and magazine layouts.
Five Elements or Kundli Website Design
Another interesting example of mathematics in design is a technique based on the rules of the Indian horoscope Kundli. Here the basis is the following figure. A square is drawn, two diagonals are drawn inside it, connecting the opposite corners, then lines connect the centers of the neighboring sides of the square.
Inside the square we see four rhombuses. This is the basis for the location of the five design elements on the page.
The following example of site design is based on Kundli geometry. This layout can be suitable for a one-page business card site with interactive design elements based on jQuery technology.
Also, this layout can easily turn into a site with a three-column header and footer.
Applications. This design is most suitable for portfolio and product display oriented sites.
Fluctuating Sine Wave
If you want variety, it is not necessary to adhere to the basic rules of the golden ratio and Fibonacci numbers. You can experiment with other well-known formulas.
Let’s see what will be the layout of the site, based on the oscillation of the sine wave, a mathematical function describing the repetitive oscillations. The picture below is an example of a simple and original one-page site.
Or another option. A layout consisting of a header, five columns and a footer. Such a site can also be enhanced with JQuery cues to make it more interactive.
This design is optimal for sites where you want to reflect the chronology of events. Most suitable for horizontal navigation.
Rule of Thirds
This rule states that the image should be divided into nine equal parts with two horizontal and two vertical lines. And all important compositional elements should be located along these lines or at their intersections.
In this example, two of the four intersections contain the most important information. Marked with pink squares. And the navigation block is located just along the second horizontal line.
