Use of Golden Ratio golden splitting in Website Design

 

　　

 

When a web designer starts a project, the layout of the web page is often taken into account. Although many people prefer to use the Grid css framework (such as 960, blueprint ), however, sometimes we also need to design some unique la S. This article will discuss how to apply the golden splitting theory to web design. Most of the technologies involved are also applicable to other design or art jobs, of course, it is mainly for website design layout.

　Gold proportion

The golden section, also known as the golden proportion, is a mathematical term used to represent the ratio of two elements. Its value is about 1.618. The golden split began in the Renaissance. Artists in that era were very admired for the golden division and widely used in various design works. Over the past few years, they have seen the golden division in the fields of architecture, sculpture, and painting, today we can also apply it to digital art.

　　

 

Golden division is a mathematical term, so it may not be easy to understand at first. Let's give a simple example. Suppose there are two line segments a and B. If their lengths a + B/a are equal to a/B, that is, a + B/a = a/B = 1.618, then the golden split is established, and the Golden Split points are between a and B.

　　

 

　Use of golden Segmentation

Taking the design layout of a webpage with a 960px width as an example, if we want to divide the webpage into two columns, how can we find their golden Split points?

It is very simple. From the above mathematical formula, we know that a + B/a = 1.618, 960px is equivalent to the value of a + B, so we only need to use 960/1. 618 = 593, so the position of 593px is the golden split point. In this way, you can set the width of the left sidebar to 593px and the width of the right sidebar to pixel PX (960-593.

This method is also applicable to some non-fixed elastic web page la S. You only need to use the same formula to obtain the corresponding value, which is expressed in a relative unit (such as a percentage, this kind of Web design is the most natural. You can further divide the webpage into three and four columns.

Of course, the golden split ratio is only a guide in design. If you can break this rule and maintain the natural balance of the webpage design page, you can also, as a general rule, the golden ratio is often replaced by. Although it is not very accurate, it is more intuitive and convenient to use.

　　

 

　Three-way

As mentioned above, when designing a webpage, we should not stick to a design theory completely, and the webpage design should not completely follow the value of 1.618. The three-way method is a simple and practical method that uses golden segmentation.

The three-way method uses two horizontal lines and vertical lines to divide the chart horizontally and vertically. The intersection of the four lines forms four points. These four points are called the key points. The important design elements are best placed in these four points. Many Web pages have been designed with three points, such as important website information (logo, navigation bar) placed in the upper left corner, the upper right corner may place less important content. When you are considering placement of titles, buttons, and links, you can consider using the three-way method for reference. Of course, it should also be used flexibly and should not be "strictly followed ".

　　

 

　Golden Rectangle (Golden Rectangle)

In the webpage design layout, the webpage is divided into several rectangles according to different functions. The size of these rectangles refer to the golden section ratio, which forms many golden rectangles. These rectangles can solve most of the puzzles you encounter in the web design layout. For example, you can use these golden rectangles to decide where the flash or image should be placed on the homepage, you can also decide the content on the sidebar and the bottom of the website. Some e-commerce websites can refer to the golden rectangle especially when designing products.

　　

 

VIA: designshack

Design Box