The application of Golden ratio Golden Section method in web design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

As a web designer to start a project often take into account the layout of the page, although now many people tend to use the grid CSS framework (such as 960,blueprint), but sometimes also need to design some unique layout this article we want to explore how to apply the Golden section theory to web design, Most of the technology involved is also applicable to other design or art work, of course, mainly for the design of the site layout.

Gold ratio

Gold Division, also known as the golden Ratio, is a mathematical term used to denote the proportions of two elements, and its value is approximately equal to 1.618. The golden divide began in the Renaissance. The artist of that era is very highly praised for the Golden Section, and widely used in various design works, hundreds of years, in architecture, sculpture, painting and other fields can see the figure of gold, today we can also use it in the digital arts.

The Golden section is a mathematical term, so the beginning may not be very well understood. We can give a simple example, assuming that there are two segments A and B, if their length a+b/a value equals A/b, that is, a+b/a=a/b=1.618, then the Golden section is set up, A and B is the golden point of division.

The application of Gold Division

Take a 960px-width web design layout For example, if we want to divide the page into two columns, how can we find their Golden Division point?

Very simple, from the above mathematical formula we know that a+b/a=1.618,960px is equivalent to a+b value, so as long as the 960/1.618=593, so 593px position is the golden point of division. The page layout for both columns, the width of the left column is set to 593PX, and the right column width is set to 367PX (960-593).

This approach also applies to some of the inflexible flexible Web page layouts, as long as the corresponding values are expressed in relative units (such as percentages) by the same calculation formula, which makes the web design feel most natural. You can also further divide the page into 3 columns and 4 columns.

Of course, the golden ratio is only a guide in the design, if you can break this rule and to maintain the page design page of the natural balance is also possible, as a common rule, often the proportion of gold in lieu of 5:3, although not very accurate, but more intuitive and convenient to use.

Three-point method

As mentioned earlier, when designing a Web page, you should not be completely wedded to a design theory, and web design does not need to follow exactly the 1.618 value. The three-point method is a simple and practical method to use the gold partition.

The three-point method uses two horizontal and vertical lines to divide the composition in both horizontal and vertical directions. These four lines intersect to form four points, these four points are called key points, and the important design elements are best placed in these four places. A lot of web design has unknowingly used the three-point method, such as the site's important information (logo, navigation bar) will be placed in the upper left corner, the upper right corner may place a slightly lower importance of content. When you think about placement of headings, buttons, and links, consider using the three-point method for reference. Of course, the same should be used flexibly, do not "strictly follow."

Golden Rectangle (Golden Rectangle)

When designing a Web page, the page is divided into rectangles, depending on the function, and the size of the rectangles is based on the percentage of the gold, which creates a lot of golden rectangles. These rectangles can solve most of the confusion you encounter in the Web design layout, such as you can use these golden rectangles to determine where the flash or image should be placed on the home page, but also to determine the sidebar, the location of the bottom content of the site. Some e-commerce sites in the design of product display, especially can refer to the golden rectangle.

Via:designshack

Design Box