October 10, 2012 at 16:35The mathematical approach to creating sites
“The math is beautiful.” This may seem absurd, for people who, at the mere mention of mathematics, startle. However, some of the most beautiful things in nature and our universe are the projection of mathematical properties, from the smallest to the largest galaxies. One of the ancient philosophers, Aristotle said: "Mathematical sciences tend to arrange everything in order, in symmetry and limitations, they are the main forms of beauty."
Due to its natural beauty, mathematics is part of art and architecture. But it is practically not used for the design of sites and applications. This is due to the fact that many do not correlate math with design. Although, on the contrary, mathematics can be a tool for the production of truly magical designs. However, you should not rely on mathematics for each of your creations. The fact is that you should consider mathematics as your assistant. For clarity, we have created a couple of sites that represent the mathematical principles discussed in this article. We also created recommendations that can be used in design.
All the recommendations given here were also used in the process of writing this article and its examples. In the process of writing, we made sure that all the design techniques shown in this article are of a mathematical nature, that is, they have symmetry. We also relied on the article Web Design Algorithm. In order not to complicate the approach, we tried to adhere to a minimalist design, and also preferred single-page layouts. Obviously, the examples in this article should serve as the basis for your projects, not ready-made solutions.
Golden section "and" Golden rectangle
The golden ratio, also known as divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. The Golden Ratio (golden ratio, division in the extreme and middle terms) is the division of a continuous value into two parts in such a way that the smaller part refers to the larger as the large to the entire value.
We have already published a very detailed article, “Using the Golden Ratio in Web Design,” which explains how to use the golden ratio in web design. In today's article, we will look at how to use golden rectangles in web design. A golden rectangle is such if its sides correspond to a proportion of 1: (one-to-Phi), i.e. 1: 1.618.
Building a golden rectangle is easy enough. First, you need to build a square. Then draw a line from the middle of one side to the opposite corner and use this line as the radius of the arc, which determines the height of the rectangle. Finally, complete the rectangle by completing the section where the angle into which the radius is drawn is the lower right corner of the section and the upper left corner is bounded by an arc.
As an example, consider the minimalist design below. It has six golden rectangles, three rectangles in each row. Rectangles are 299 x 185 pixels. Thus, the sides of these rectangles form a golden ratio, i.e. 299/185 = 1.616. Please note that the large amount of free space surrounding the Golden Rectangle creates a calm and simple atmosphere in which each block serves its purpose. Although only a few colors are used and all the blocks are very similar, navigation is obvious and simple. However, it can be quite difficult to add a new block while maintaining the construction sequence. Probably the only sensible solution is to add a block on the third line and use the rest of the horizontal space for other purposes. You can click on the image below to see a larger version.
Such rectangles are well suited for photo galleries, presentation sites and product catalogs. They can also be used in a different sequence to obtain beautiful designs. For example, this approach can be used to organize a side menu and display ads. Naturally, this approach is not used to create professional sites. You should also work on the grids, consider alignment, the ratio of blocks and not lose focus on the main goal of your site. For example, a CSS / Jquery-based rubber design would be an interesting design decision, but we will not cover this technique in this article.
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the Golden Section and Golden Rectangle. Feel free to use it.
As the name suggests, the Fibonacci design is based on a sequence of Fibonacci numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each subsequent number is equal to the sum of the previous two. Some sources omit 0, and begin the sequence with two units. So, the first two Fibonacci numbers are 0 and 1, and each subsequent number is equal to the sum of the previous two. The larger the numbers in the Fibonacci sequence, the closer they are related to each other in accordance with the "golden ratio". The Fibonacci sequence is as follows:
In music, Fibonacci numbers are sometimes used for settings, and in the visual arts to determine the length or size of content or elements.
Jürgen Schmidhuber, on his blog, looks at the design basis of Fibonacci numbers. However, if you study the design that he created, you will probably find it tough and a little difficult to understand and navigate. Indeed, you should apply a creative approach to mathematics, and not blindly follow the rules - mathematics gives us opportunities that we can apply. Approximate and true golden spirals. The green spiral is constructed from quarters of a circle tangent to the corners of each square, and the red spiral is constructed using a special type of logarithmic spiral. Overlapping is colored in yellow. The main idea of this design is to use Fibonacci when deciding on the size and content of the main and side areas. And Fibonacci and the Golden Ratio are equivalent in this context and let designers rely on what is more convenient for them.
In general, a layout is fairly easy to build using a Fibonacci sequence. You choose a specific width for the base of the first block - for example, 90px. Then, when determining the size of the container, you need to multiply the base width by the block number from the Fibonacci series (1,2,3,5,8 ...). Depending on the calculation, you get values that are the width of the blocks for your layout. Let's look at an example. Below is a minimalistic layout based on Fibonacci web design.
You see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a 90 pixel wide base. This base width is then multiplied by the Fibonacci number to get the total column width. For example, the first column has a width of 180 pixels (90 x 2), the second column has a width of 270 pixels (90 x 3) and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to the Fibonacci number. The page title has a size of 55px; article title 34px; and the main text is 21px.
However, it’s hard enough to adapt a fixed-width template to use the Fibonacci sequence. But this is only in the case of a choice of width, for example, 1000px. In this situation, it is easier to use the golden ratio. Just multiply your 1000px width by 0.618 and get 618px which would be the ideal width for content blocks. However, if you are trying to achieve the same result with the Fibonacci sequence, you must first find out the number closest to 1000.
According to the Fibonacci sequence calculator , the sequence will be
Fibonacci design is best for blogs and magazine layouts. You can arrange the layout differently according to the Fibonacci numbers. An article by Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web (in French) explains the deeper use of Fibonacci numbers in web design. Again, it is worth noting that you should rely on creativity when using the Fibonacci sequence in your work, otherwise your layouts will seem too rigid and therefore difficult to use and navigate.
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the Fibonacci sequence. Please feel free to use it in any way.
Another interesting technique for creating layouts comes from Indian horoscopes, also called Kundli. In general, Kundli is a very simple figure that can be done in three steps. Draw a square. Cross it with two diagonals. Connect adjacent midpoints of the sides. And we get Kundli. We got four rectangular rhombuses in the figure. They will be the basis for our design.
The design presented below is based on the Kundli geometric layout. It is worth noting that chakras also have mathematical properties (I have not found evidence. Approx. Per.) .
This is a one-page layout. In addition, you can use some simple animations in jQuery or text help to present our site in a more informative light. Another option would be to use a slide, where the animation is used to display different contents of the blocks, you can also change the background image for each of the areas to make them different from each other.
In the following figure, you can see that our design is quite simple: a header, three columns, and a footer.
This design is optimal for displaying product information or for displaying profiles. You can decorate your JavaScript template with animation. For example, you can turn to the possibility of color conversion by changing the color of the chakras using the Raphael library, or you can add any other animation, for example using the jsAnim library . You can show the tree sprout when the user clicks on the "Earth" element, or you can show the marine life by clicking on "Water". There are no limits when it comes to animations using these JavaScript libraries (but don’t bother with approx. Lane) .
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the design of Kundli.
When it comes to mathematics, and you don’t want to stick to the Golden Ratio or the Fibonacci sequence. You can experiment with formulas from physics, chemistry and other sciences or use general formulas in your projects.
For example, let's look at a sine wave, or sine wave. This is a mathematical function that describes smooth repetitive vibrations. We used a simple layout with a sine wave as the basis for a simple and original design. Of course, you can use the same approach in other designs, and not just when creating sites such as graphics or infographics. The layout is again very simple, consisting of a heading, five columns and a footer. You can use jQuery to make the design more interactive.
This wave pattern is often found in nature, including ocean waves, sound waves, and light waves. In addition, a roughly represented sinusoidal picture can be seen when constructing the daily average temperature, although the graph may resemble an inverted wave - the cosine. You can also use it to display a chronology of events. It will look great with horizontal navigation. You can make it more interactive with all the same jQuery .
We have prepared an archive with PSD mockups, which includes a template designed in accordance with a sinusoidal design.
Rule of Thirds
This rule states that an image should be presented in nine equal parts. We are building two equidistant horizontal lines and two vertical lines that are equally distant, and, importantly, the compositional elements should be located along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides the layout into thirds, from left to right and from top to bottom.
Musical logic The
rhythmic or thematic structure of a musical composition can be used to determine the distances between elements in a layout, such as ABA, ABAC, etc. Learn more about music and math in this Wikipedia article.
Wikipedia articles
Articles
Books
We hope you enjoyed the math article on web design. We hope that now you see mathematics as an opportunity to improve your design decisions, and it will become your friend.
Original article in English
Due to its natural beauty, mathematics is part of art and architecture. But it is practically not used for the design of sites and applications. This is due to the fact that many do not correlate math with design. Although, on the contrary, mathematics can be a tool for the production of truly magical designs. However, you should not rely on mathematics for each of your creations. The fact is that you should consider mathematics as your assistant. For clarity, we have created a couple of sites that represent the mathematical principles discussed in this article. We also created recommendations that can be used in design.
All the recommendations given here were also used in the process of writing this article and its examples. In the process of writing, we made sure that all the design techniques shown in this article are of a mathematical nature, that is, they have symmetry. We also relied on the article Web Design Algorithm. In order not to complicate the approach, we tried to adhere to a minimalist design, and also preferred single-page layouts. Obviously, the examples in this article should serve as the basis for your projects, not ready-made solutions.
Golden section "and" Golden rectangle
The golden ratio, also known as divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. The Golden Ratio (golden ratio, division in the extreme and middle terms) is the division of a continuous value into two parts in such a way that the smaller part refers to the larger as the large to the entire value.
We have already published a very detailed article, “Using the Golden Ratio in Web Design,” which explains how to use the golden ratio in web design. In today's article, we will look at how to use golden rectangles in web design. A golden rectangle is such if its sides correspond to a proportion of 1: (one-to-Phi), i.e. 1: 1.618.
Building a golden rectangle is easy enough. First, you need to build a square. Then draw a line from the middle of one side to the opposite corner and use this line as the radius of the arc, which determines the height of the rectangle. Finally, complete the rectangle by completing the section where the angle into which the radius is drawn is the lower right corner of the section and the upper left corner is bounded by an arc.
As an example, consider the minimalist design below. It has six golden rectangles, three rectangles in each row. Rectangles are 299 x 185 pixels. Thus, the sides of these rectangles form a golden ratio, i.e. 299/185 = 1.616. Please note that the large amount of free space surrounding the Golden Rectangle creates a calm and simple atmosphere in which each block serves its purpose. Although only a few colors are used and all the blocks are very similar, navigation is obvious and simple. However, it can be quite difficult to add a new block while maintaining the construction sequence. Probably the only sensible solution is to add a block on the third line and use the rest of the horizontal space for other purposes. You can click on the image below to see a larger version.
Possible application
Such rectangles are well suited for photo galleries, presentation sites and product catalogs. They can also be used in a different sequence to obtain beautiful designs. For example, this approach can be used to organize a side menu and display ads. Naturally, this approach is not used to create professional sites. You should also work on the grids, consider alignment, the ratio of blocks and not lose focus on the main goal of your site. For example, a CSS / Jquery-based rubber design would be an interesting design decision, but we will not cover this technique in this article.
PSD layout
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the Golden Section and Golden Rectangle. Feel free to use it.
Fibonacci Design
As the name suggests, the Fibonacci design is based on a sequence of Fibonacci numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each subsequent number is equal to the sum of the previous two. Some sources omit 0, and begin the sequence with two units. So, the first two Fibonacci numbers are 0 and 1, and each subsequent number is equal to the sum of the previous two. The larger the numbers in the Fibonacci sequence, the closer they are related to each other in accordance with the "golden ratio". The Fibonacci sequence is as follows:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...In music, Fibonacci numbers are sometimes used for settings, and in the visual arts to determine the length or size of content or elements.
Jürgen Schmidhuber, on his blog, looks at the design basis of Fibonacci numbers. However, if you study the design that he created, you will probably find it tough and a little difficult to understand and navigate. Indeed, you should apply a creative approach to mathematics, and not blindly follow the rules - mathematics gives us opportunities that we can apply. Approximate and true golden spirals. The green spiral is constructed from quarters of a circle tangent to the corners of each square, and the red spiral is constructed using a special type of logarithmic spiral. Overlapping is colored in yellow. The main idea of this design is to use Fibonacci when deciding on the size and content of the main and side areas. And Fibonacci and the Golden Ratio are equivalent in this context and let designers rely on what is more convenient for them.
In general, a layout is fairly easy to build using a Fibonacci sequence. You choose a specific width for the base of the first block - for example, 90px. Then, when determining the size of the container, you need to multiply the base width by the block number from the Fibonacci series (1,2,3,5,8 ...). Depending on the calculation, you get values that are the width of the blocks for your layout. Let's look at an example. Below is a minimalistic layout based on Fibonacci web design.
You see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a 90 pixel wide base. This base width is then multiplied by the Fibonacci number to get the total column width. For example, the first column has a width of 180 pixels (90 x 2), the second column has a width of 270 pixels (90 x 3) and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to the Fibonacci number. The page title has a size of 55px; article title 34px; and the main text is 21px.
However, it’s hard enough to adapt a fixed-width template to use the Fibonacci sequence. But this is only in the case of a choice of width, for example, 1000px. In this situation, it is easier to use the golden ratio. Just multiply your 1000px width by 0.618 and get 618px which would be the ideal width for content blocks. However, if you are trying to achieve the same result with the Fibonacci sequence, you must first find out the number closest to 1000.
According to the Fibonacci sequence calculator , the sequence will be
...,610, 987, 1597... And, 987 is a good number that is closest to the selected number 1000 and you can determine the width for other blocks using the previous numbers in the sequence. But if your layout is a fixed width smaller or larger in width, then you will need to use approximate values. The problem may arise in the rubber template but not in the fixed one, but when using% you have much more freedom.Possible application
Fibonacci design is best for blogs and magazine layouts. You can arrange the layout differently according to the Fibonacci numbers. An article by Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web (in French) explains the deeper use of Fibonacci numbers in web design. Again, it is worth noting that you should rely on creativity when using the Fibonacci sequence in your work, otherwise your layouts will seem too rigid and therefore difficult to use and navigate.
PSD layout
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the Fibonacci sequence. Please feel free to use it in any way.
Five Elements, or Kundli Design
Another interesting technique for creating layouts comes from Indian horoscopes, also called Kundli. In general, Kundli is a very simple figure that can be done in three steps. Draw a square. Cross it with two diagonals. Connect adjacent midpoints of the sides. And we get Kundli. We got four rectangular rhombuses in the figure. They will be the basis for our design.
The design presented below is based on the Kundli geometric layout. It is worth noting that chakras also have mathematical properties (I have not found evidence. Approx. Per.) .
This is a one-page layout. In addition, you can use some simple animations in jQuery or text help to present our site in a more informative light. Another option would be to use a slide, where the animation is used to display different contents of the blocks, you can also change the background image for each of the areas to make them different from each other.
In the following figure, you can see that our design is quite simple: a header, three columns, and a footer.
Possible application
This design is optimal for displaying product information or for displaying profiles. You can decorate your JavaScript template with animation. For example, you can turn to the possibility of color conversion by changing the color of the chakras using the Raphael library, or you can add any other animation, for example using the jsAnim library . You can show the tree sprout when the user clicks on the "Earth" element, or you can show the marine life by clicking on "Water". There are no limits when it comes to animations using these JavaScript libraries (but don’t bother with approx. Lane) .
PSD layout
We have prepared an archive with PSD mockups, which includes a template designed in accordance with the design of Kundli.
Sinusoidal design
When it comes to mathematics, and you don’t want to stick to the Golden Ratio or the Fibonacci sequence. You can experiment with formulas from physics, chemistry and other sciences or use general formulas in your projects.
For example, let's look at a sine wave, or sine wave. This is a mathematical function that describes smooth repetitive vibrations. We used a simple layout with a sine wave as the basis for a simple and original design. Of course, you can use the same approach in other designs, and not just when creating sites such as graphics or infographics. The layout is again very simple, consisting of a heading, five columns and a footer. You can use jQuery to make the design more interactive.
Possible application
This wave pattern is often found in nature, including ocean waves, sound waves, and light waves. In addition, a roughly represented sinusoidal picture can be seen when constructing the daily average temperature, although the graph may resemble an inverted wave - the cosine. You can also use it to display a chronology of events. It will look great with horizontal navigation. You can make it more interactive with all the same jQuery .
PSD layout
We have prepared an archive with PSD mockups, which includes a template designed in accordance with a sinusoidal design.
Other methods
Rule of Thirds
This rule states that an image should be presented in nine equal parts. We are building two equidistant horizontal lines and two vertical lines that are equally distant, and, importantly, the compositional elements should be located along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides the layout into thirds, from left to right and from top to bottom.
Musical logic The
rhythmic or thematic structure of a musical composition can be used to determine the distances between elements in a layout, such as ABA, ABAC, etc. Learn more about music and math in this Wikipedia article.
Useful Links and Resources
Wikipedia articles
Articles
- Mathematics in Art and Architecture
- Design and Divine Proportion
- Create Awesome Geometrical Designs , Myoats
- Photographer Loves Math, Graphs Her Images
- Typograph: Scale and Rhythm
- Michael Paunker - Art and Math
Books
We hope you enjoyed the math article on web design. We hope that now you see mathematics as an opportunity to improve your design decisions, and it will become your friend.
Original article in English