Effective modern web design should not just be nice and bright picture. It should be simple and intuitive. What, then, means to achieve it? How to make the visitor a sense of harmony and comfort? Authoritative Smashing Magazine offers for these purposes to use the basic rules of mathematics.
Mathematics - that's fine. For a man, far from the numbers and equations, this may sound absurd. However, many of the most beautiful things in nature, and indeed the universe is based on strict mathematical proportions. Aristotle, one of the most ancient philosophers, said: "Mathematics reveals the order and symmetry and definiteness, and this - the most important types of beauty."
For centuries, mathematics was used in art and architecture. But mathematics is rarely used in the design of websites. Probably because there is a widespread belief that mathematics and creative - are incompatible. Although this view can be refuted, mathematics is a good tool for creating websites. However, in this case, one just should not rely mathematics. There should be something else.
In the meantime, let's see how there are some basic rules of mathematics in web design.We look at an example rule golden section, Fibonacci numbers, the rules of the Five elements, variations Sinusoid's and the rule of thirds.
A. The Golden Section or Golden Rectangle
golden section (golden proportion, the division in extreme and mean ratio) - the division of continuous quantity into two parts in this respect, in which a minority of so much related to how much value to the whole. The ratio of units in the proportions expressed irrational constant approximately equal to 1.618033987.
It is believed that the objects that contain a "golden section", people are perceived as the most harmonious.It is known that an artificially constructed Sergei Eisenstein film "Battleship Potemkin" by the rules of the golden section. He broke the tape into five parts.
In the first three action takes place on the ship. In the last two - in Odessa, where the uprising is unfolding. This transition is happening in the city just at the point of the golden section. Yes, and in every part has a fracture that occurs under the law the golden section.
We now turn to the Golden rectangle. It's simple. Such a rectangle the length of adjacent sides are related by the rule of the golden section, ie 1:1.618.
In order to construct a golden rectangle, first draw a square (red color in the picture), then draw a line from the middle of one side of the square to the opposite of the corner (the line with an arrow in the figure). Use this line as the radius of the arc, which will determine the height of the rectangle. Now rectangle (blue color in the figure).
Consider as an illustrative example of this minimalist design, is presented below. It consists of six gold rectangles, the size 299h185 pixels, 3 rectangle in a row. The parties to these rectangles are related by the rule of the golden section 299/185 = 1.616.
Note the large amount of space around the golden rectangle. It creates a calm and pleasant atmosphere in which the navigation can safely breathe. Despite the use of only a few blocks of similar colors and all the navigation controls are intuitive and serve their purpose.
To add a new unit without violating the logic of the design, add blocks of third row and move down this way.
Application. Using Golden rectangles in the design is well suited for a variety of photo galleries, portfolio sites and sites focused on the representation of products.
Two. The Fibonacci numbers in the design of
Fibonacci numbers - a mathematical sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1. Each subsequent number is equal to the sum of the previous two. Series of numbers is as follows: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 ...
Fibonacci numbers are used in music to set the tools in the architecture to compute the harmonious proportions, such as the ratio of height to the height of the room decorating walls with different materials. The distances between the leaves (or branches) on the trunk of the plants are about as Fibonacci numbers.
The main applications of Fibonacci numbers in design - defining the size of blocks to the main content (containers) and the sidebar. The method as follows. Take the base width of the container, for example, 90 pixels, and subsequently multiplied by the number of the Fibonacci series. Based on these calculations, a grid site. Let's look at an example.
Page is divided into three columns. The base width of the container 90 pixels. Then the first column has the Schirn 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 size of the font in the header of 55 pixels, the font in the section - 34 and font for text 21 pixels.
If your site has a fixed width, eg 1000 pixels, the Fibonacci numbers is not very convenient to use. Insofar nearest to 1000 the number of the Fibonacci series is a 987 (..., 610, 987, 1597 ...), then from that number will have to perform the calculations for the width of the blocks of the site. In such situations it is best to use the golden section rule (1,000 x 0,618 = 618px) and proceeding from it determine the width of the blocks.
Application. Fibonacci numbers are best suited to design blogs and magazine layouts.
Three. Five design elements or Kundli
Another interesting example of mathematics in design - is a technique based on the rules of drawing up a horoscope Indian Kundli. Here is the basis of the following figure. Draw a square inside it held two diagonals connecting opposite corners, then the lines joining the centers of adjacent sides of the square.
Inside the square, we see cheryre diamond. This is the basis for the location of the five design elements on the page.
The following example of site design is based on the geometry of Kundli. This model may be suitable for single-site business card with the elements of interactive design based on jQuery technology.
Also, this model can easily turn into a three-column layout site with header and footer.
Application. This design is most suitable for websites and portfolio-oriented sites to demonstrate product.
Four. Fluctuations in the sinusoid
If you want diversity, you do not have to adhere to basic rules of the golden section and Fibonacci numbers. You can experiment with other well-known formulas.
Let's see how will the site layout, based on fluctuations of the sinusoid, a mathematical function which describes the repetitive vibrations. The picture below shows an example of a simple and original one-page site.
Or another option. Layout consists of header, footer, and five speakers. This site also can be enhanced JQuery tips to make it more interactive.
Application. This design is perfect for sites that require to reflect the chronology of events. More suited for horizontal navigation.
Five. Rule of Thirds
The rule states that the image should be divided into nine equal parts by two horizontal and two vertical lines. And all the important compositional elements should be located along these lines or their intersections.
In this example, two of the four intersections of the most important information is collected. Pointed pink squares. A navigation bar is located right along the second horizontal line.
0 comments:
Post a Comment