"Mathematics is wonderful. "This may sound absurd to those who cringe in the face of numbers and formulas." But from the smallest shells to the largest spiral galaxies, nature and most of the beautiful things in our universe are mathematically characteristic. In fact, Aristotle, one of the greatest philosophers of ancient times, once said: "Mathematics shows order, symmetry and limit, which is the ultimate form of beauty."
Because of its beautiful nature,
MathematicsIt has always been a part of art and architectural design. But it
Has not yet played a role in web design。 The reason may be because most of us think of mathematics as the antithesis of creativity. On the contrary, mathematics can be a creative design tool. In other words, you don't have to rely on math in every design. The key is to treat mathematics as a friend, not an enemy. To illustrate this point, we have created several web designs that present the mathematical principles discussed in this article. We have also presented several PSD format files so that you can use them directly in future designs.
The layout in this article is specially created for the purposes of this article. In the design process, we ensure that all the designs presented in this article follow the essential nature of mathematics, which is to show order, symmetry and limit. And we also follow Network design Algorithms--There are separate themes, styles, and elements. To keep it simple and straightforward, we try to stick to minimalist design and also recommend a single page layout. Obviously, the examples in this article should serve as the basis for a simple design rather than being used directly as a finished design.
Gold split ratio and golden rectangle
The Gold division ratio, also known as the Divine Division ratio, is a mathematical irrational constant with a value of about 1.618033987. If the ratio of the whole to the larger part is equal to that of the smaller part, then this quantity is called the Gold partition ratio.
We have published a very detailed article the application of Divine Division ratio in web designTo explain how to use the gold split ratio in web design. In today's article, we'll look at how to use the Golden rectangle in web design. The golden rectangle is the ratio of the ratio of the edges to the ratio of gold to 1: (one is more than Phi), that is, 1:1.618 of the rectangle.
The drawing of the golden rectangle is very easy and simple. First, create a simple square. Then draw a line diagonally from the midpoint of the square to define the height of the rectangle by drawing an arc to the radius. Finally, the remaining portion of the golden rectangle is completed with a complete golden rectangle.
a method of constructing a golden rectangle. Squares are outlined in red. The resulting size is the 1:phi ratio, which is the golden ratio.
As an example, consider using the following minimalist design. This design has
6 Golden Rectangles, each row has 3 rectangles. The dimensions of the rectangle are 299x185 pixels. As a result, the edges of these rectangles are grown about according to the Golden ratio, which is 299/185 = 1.616. Notice how much space is left around the golden rectangle to create a calm and simple atmosphere in which navigation options can represent and serve the purpose of the atmosphere. Although the layout uses only a few colors and all the pieces of information are positioned very similar, the navigation options are obvious.
Large View
However, while maintaining design consistency, it may be difficult to add a new piece of golden rectangle. Perhaps the only reasonable design here is to use the rest of the horizontal space to add the other blocks to the third line when needed, and more or less this is a feature-highlighting design. You can click on the image below to view the enlarged version.
Large View
Possible ApplicationsThe golden Rectangle is designed to showcase photo galleries, collections, and product-oriented websites. The golden rectangle can also be arranged in conjunction with other reasonable mathematical methods to produce a graceful design. You may want to use them to block the display of a sidebar picture or ad. Of course, the simple collection of golden rectangles is not a professional, good-looking design. It also needs to work closely with the grid, alignment, approximation, and emphasis to achieve the main purpose of the design. For example, an interesting design solution based on the golden rectangle would be an important part of the css/jquery fluid grid design, but the introduction of this article does not cover this technique.
Download the PSD format file for the layout designWe're prepared to follow the Golden section ratio and the Golden rectangle principle designed P An example of SD format layout design。 Please feel free to use it in any way, and if you want to disseminate the relevant information, please send the link to your colleagues.
Fibonacci Design
The Fibonacci design is based on the Fibonacci number sequence, as its name implies. By definition, Fibonacci's first two numbers are 0 and 1, and each subsequent number is the sum of the first two numbers. Some sources omit the original 0 and replace it with two 1 as the starting number for the array. So the first two numbers of the Fibonacci sequence are given, and each subsequent number is the sum of the first two numbers. The higher the number of entries in the Fibonacci sequence, the closer the ratio of the two adjacent items is to the gold partition ratio. The Fibonacci sequence is this:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 ...
In music, Fibonacci numbers are sometimes used for tuning, whereas in visual art the Fibonacci number is used to determine the length and size of content and form elements. Jogen Schmiddhube's Blog: The design theory based on Fibonacci。 However, if you review the design he created, you may find it somewhat rigid and difficult to read and navigate. In fact, the use of mathematics requires a certain degree of creativity rather than blind adherence to the rules--mathematics provides us with a guide to apply, but it is more about referencing mathematics when implementing a Web site than applying mathematics to our design.
approximate and true of the golden Helix. The green helix consists of each square and one-fourth tangent of the inner circle, while the red Helix is the golden helix, which is a special type of logarithmic helix. The overlapping portion is yellow. The edges of a square is divided by a smaller square, which is the golden ratio. Source
The main idea behind this design is to use the Fibonacci principle when deciding the size of the content area or sidebar. The golden ratio and the Fibonacci principle all make the designer have the basis, is the page container and the page container inside block of the Commons.
In general, the use of Fibonacci sequences makes it very easy to develop a page layout. You can select a specific base width--for example, 90px. Then, when determining the size of the container, multiply the base width by the number from the Fibonacci sequence. Depending on the results of the calculations, they need to be used in the page area. Let's take a look at an example. The following figure is a minimalist blog layout based on the Fibonacci Web page design.
look at the big picture
As you can see, the page is divided into three columns. Each column corresponds to a Fibonacci number. In this design, we use a base width of 90 pixels. Then multiply the base width by a Fibonacci number to get the width of a particular column. For example, the first column has a width of 180 pixels (90x2), the second column has a width of 270 pixels (90x3), and the third column is 720 pixels (90x8). The font size also corresponds to a Fibonacci number. The title of the blog is 55px, the title of the article is 34px, and the size of the content is 21px.
The downside of the Fibonacci sequence page layout design is that if you get a specific fixed size width (for example, 1000px), it's hard to use this method. In this case the golden ratio is easier to use because you simply need to use 1000px times 0.618 to get 618px, which is the ideal width of the content block. However, if you try to achieve the same effect through the Fibonacci itself, you first need to compute the sequence in the range of 1000.
Under Fibonacci Sequence CalculatorThe result of the calculation, the sequence should be ..., 610,987,1597 ... in fact, the 987 fits well, and you can start by choosing to use the number before the sequence as the smaller chunk width. However, if the fixed width of the page layout is smaller or larger, then you should use some approximations that make the results more perfect. This problem may also occur to some extent in flow design or elastic design, but that design has greater freedom of design.
Possible ApplicationsThe Fibonacci design is best suited for blogs and magazine page layouts. You can arrange different page layouts according to the Fibonacci sequence numbers. Article nombre d ' or, Suite de Fibonacci et autres grilles de mise en page pour le design web(French) The application of Fibonacci sequence numbers in web design is discussed in more depth. Again, you need to be creative when using Fibonacci sequences in your design, or your design will look stiff and difficult to use and navigate.
Download the PSD format file for the layout designWe're prepared to follow the Fibonacci sequence. example of PSD format layout design。 Please feel free to use it in any way, and if you want to disseminate the relevant information, please send the link to your colleagues.
Five elements, also known as Kun Delhi design
Another interesting page layout technique comes from Indian astrology, also known as "Khun 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'll find that in the design Gas-Gua(Sanskrit, seven energy centers of the human body, also known as seven rounds) also have mathematical properties.
Large View
This is a single-page page layout. As shown in the following illustration, clicking on an element will show more information related to it. In addition, you can add a few simple jquery animations or jquery tooltips so that you can show more information on demand. A more advanced application is to use animations to display sliding pages for different chunks of content; You might also want to change the background of a single content area to make them look different.
In the following illustration, we can see that our design is just a simple three-column layout: A header, three columns, and a footer. It's not complicated at all.
Possible ApplicationsThis design is best suited to display product information and a portfolio of works. You can make it more interesting by using JavaScript animation frame technology. For example, you can use the Raphael LibraryApply color conversion, or you can use the JsanimLibrary to add free animations. When the user clicks on the elements of the Earth, the tree can sprout, or it can show that marine life swims in the water element. When you use these JavaScript libraries, the sky is the limit.
Download the PSD format file for the layout designWe're prepared to follow the Quintiq principles. example of PSD format layout design。 Please feel free to use it in any way, and if you want to disseminate the relevant information, please send the link to your colleagues.
sine Wave design
When it comes to mathematics, you do not have to follow the well-known golden ratio and Fibonacci sequence. You can also use more general formulas and values in your design by experimenting with mathematical, chemical, and other scientific formulas.
For example, let's consider a sine wave, or sine curve, a mathematical function that describes a smooth, repetitive oscillation. We use simple sine wave mode as a simple original web design and create a single page layout based on. Of course, you can also use the same method for other designs, such as graphics or data charting.
look at the big picture
The page layout is still simple, consisting of a header, five columns, and a footer. You can use jquery's ToolTip to make your design more interactive.
possible.
ApplicationThis waveform is often found in nature, including waves, sound waves, and light waves. In addition, a rough sinusoidal chart can be seen in the daily or yearly average temperature plane chart, although the figure may look like the inverted cnoidal. You can also use it to show the timeline of events. It can even be used to develop horizontal navigation. You can use jQuery HighlighterPlug-ins to increase interactivity, the JQuery highlighter Plug-ins emphasize each element (for example, DIV) so that users can focus on the content.
Download the PSD format file for the layout designWe're prepared to follow the sine wave principle. example of PSD format layout design。 Please feel free to use it in any way, and if you want to disseminate the relevant information, please send the link to your colleagues.
Other technical
The law of three halvesThis rule stipulates that the image should be supposed to be divided into nine equal parts by two equidistant horizontal lines and two equidistant vertical line, while the important constituent elements should be placed on these lines or on their intersections. This can also be expressed as a simple mathematical method of dividing arbitrary page layouts from left to right and from top to bottom.
Music LogicThe rhythmic or thematic structure of a musical work can be applied to the distance between elements in a page layout, such as ABA, ABAC, and so on. For more information on music and math, please refer to this Wikipedia entry。
Useful links and resources
Wikipedia entry
* Sacred Geometry.* proportions* the homepage construction of the card agriculture
Article
* Mathematics in art and architecture* design and the divine proportions* Create an awesome geometric design, myoats* photographers like math, her portrait* letterpress Printing: scale and Tempo* Michael Paunker-Art and mathematics
Books
* Geometric Design* Euclid elements* The mathematics of Nature
We hope you like this article about math and web design. Hope now you understand that mathematics is a barrier to creation, but a friend. Hug It!
Adit GuptaA web designer and programmer from India, he has a strong interest in computer science, art, mathematics and astrophysics.
"This translation is only for the purposes of foreign language learning and reading, and the author's personal views have nothing to do with translators and translation networks."
