Web Design Skills Case: Building visual effects with mathematical principles

Article Description: have these mathematical theories to back up your web design.

The ancient principles of mathematics have existed for hundreds of years, but still can help us improve the design level, do you believe it? These mathematical principles can withstand the test of time, to give us guidance on composition, to help us build more harmonious visual effects.

You may have used mathematical principles or not in your design. In any case, the laws of mathematics apply to a variety of designs, from print design to web design. So understanding these mathematical principles will make your design more attractive and forward-looking.

Gold ratio

The gold ratio, also can be said to be a golden rectangle or gold Division, the ideal ratio is 1.618. The origins of this principle are unknown, but the gold ratio is everywhere-from the pyramids in the Sahara to the towering Parthenon.

Of course, not only limited to building, we can from Leonardo da Vinci's "Vitruvian Man." to see the gold ratio, but also in countless web design to see the gold ratio.

In print and web design, the gold ratio is not so rigorous, with a slight change in proportion, but still close to 1.618. But it still falls into the broad range of the golden ratio. (The layout in the web design, sometimes the designer will take an integer, so that the design can be more convenient)

The golden ratio is widely used--when designing a single element, you can design the outline of the element with the idea of a golden ratio, or you can use the gold ratio when you have more than one element combination.

What is the effect of using the golden ratio? Well, it can simulate the natural feeling, let the viewer feel balance and harmony.

Fibonacci Series

The Fibonacci sequence refers to a series of numbers, each of which comes from the previous two digits.
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 7502 5, 121393, 196418, 317811 ...

The Fibonacci sequence was discovered by Leonardo Pisano Bogollo, which existed for 750 years. His nickname is "Fibonacci", so it gets its name.

The curve drawn from the Fibonacci sequence shows a circular spiral. This shape is ubiquitous in nature.

The principle is closely linked to the gold ratio, as you will find that the ratio will be getting closer to 1.618:1 with the last one, except for the previous one.

This principle helps the designer to choose the long width and size of the picture. Give the designer guidance on the layout. For example, in a three-column layout, the Fibonacci sequence is applied, and in a 1170-pixel layout, the three-column pixel width is 180,270,720, respectively.

Composition of the three-division method

Unavoidable principles, widely used in digital publishing and printing.
In any image, size in the use of horizontal 3, longitudinal 3 of the imaginary grid lines, to achieve the standard composition. In fact, each of the cells in the nine is the same size. This principle can help designers build visual focus in the design.
A single image can help the composition. Multiple image layouts can help organize the organization in an orderly manner. According to this principle (above), the eye usually first notice the position on the left, then the lower left, then the upper right, and then the lower right. (This is why a lot of design logos and contact information is on the left)

And the three-way composition can also achieve a sense of balance. And it's asymmetrical sense of balance. Because the eyes generally move along the intersection of the nine Gongege lines, there is no central reference point.
Please see the excellent network translation of this article: Want to do a good job design? First to understand the magical magic number "3″

Kun Delhi geometry

From Indian astrology, also known as "Kun Delhi." Basically, Khun Delhi is a simple graphic that takes only three steps to get. Draw a square and then draw two diagonal lines. Connect the midpoint of each side of the square to get Kun Dritu. You will notice the four rectangular diamonds on the diagram. They are the basis of web design.

The following design is based on the layout of the Kun Delhi geometry page. You will find that the design of the gas-gua (Sanskrit, the human body's seven energy centers, also known as seven rounds) also has mathematical characteristics.

———— smashing Magazine "Applied Mathematics in Web design" (Thanks to the wonderful translation of 25 degrees north latitude, another strongly recommended this article, can be said to be the updated version of this paper)

Grid

This is most common in web design, isn't it? Can be used for row, column layout, reasonable organizational elements, so that the page looks orderly.

Page design in the column scope is generally three columns, can be divided into 16 columns.

The mathematical principle is an interesting design tool

It's interesting to think about design from a mathematical point of view, but don't be too rigid, scrupulous follow the rules of Mathematics. This provides several tools that can help you calculate dimensions and proportions.

Golden Ratio Calculator (Gold ratio Calculator)
Phi Calculator (Gold Division numerical calculator)
Golden Ratio typography Calculator (Gold Proportional font design calculator)
Fibonacci Sequence Calculator (Fibonacci series Calculator)
Grid Calculator (Trellis calculator)

Conclusion

Mathematical principles can help! It can bring a sense of organization and balance to web design. These principles mostly deal with numbers, and they come from the observation of nature, so they create a very harmonious visual effect.
But do not be too harsh, strictly according to the mathematical principles to design. Knowing, mastering is good, can be a weapon in your "Arsenal", but also can further expand your thinking.

Image source: Geometerartist, THEILR, Hitchster and Brklynn.

Original address: http://designshack.net/articles/intentional-or-not-mathematical-theory-in-design/
Excellent network translation: @MartinRGB