How to use the "golden ratio" in web design?

What is the Golden ratio ?

The gold ratio is a mathematical ratio that is usually found in nature to create a balanced composition. It is about 1.6180, also known as the "golden mean", "golden section", which is usually represented by the Greek alphabet Ф.

The "Golden rectangle" refers to the width of a rectangle that is 1.618 times times its height. For example, one side of the PX is divided into 300 * 1.6180≈485 px on the other side, which can be called the Golden rectangle.

If you slice a perfect rectangle from this golden rectangle, you'll be left with another golden rectangle:

You can continue to do the same thing with smaller rectangles, and then continue to split, infinite loops, and you'll get this familiar image:

　　Fibonacci sequence

The Fibonacci sequence is similar to the gold ratio, but not quite so. This is a series of numbers, and the next number in the sequence is the sum of the first two. For example: 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377 ... This rule formula is xn = xn-1 + xn-2.

Let's say we start with a square and then add another one, and we get a rectangle we need:

Keep the maximum length of the added square, and then we add another rectangle that equals the maximum number of lengths:

And then again and again:

This can be extended indefinitely, and will result in the same golden rectangle effect, but this time it is new rather than Shard. Both the gold ratio and the Fibonacci sequence make us attractive proportions.

Now let's analyze some of the sites where we can see their usage.

　　yourlocalstudio.dk

"Your local Studio" is a website based on design and development, studio in Copenhagen, Denmark. They are good at using any form of visual concept to optimize Web pages.

This site has two or three pages that are useful to the golden ratio. The home page is a conceptual annotation of key information. However, when you visit the Studio page, you will find that it blends a little traditional web layout with a golden rectangle, such as the following pages:

Want to stand out in the crowd? As Yourlocalstudio did, by using the golden ratio to design the site. The design employs a progressive, well-organized, structured grid system that attracts users ' attention with unconventional layouts.

　　Mashable.com

Mashable is a news site, we use the Yellow Line marked the golden ratio of the layout, you can see the site content layout flexible, given the information typesetting breathing space. and content-driven similar sites, most of the use of traditional grid layout, content-intensive and no focus, can be seen Mashable gold ratio is very effective, even intangible.

　　jandk.fr

Jackson & Kent is a Web production agent from France website.

The screenshot above teaches you how to showcase your previous client's work items, as well as contact and company addresses, as shown in the following figure, as well as using the Golden Grid system for organization and layout.

The case here encourages you to make content look more interesting in different sizes, when users browse the site, not only to see the content, but also to experience the design of the site, the Golden Section for visual guidance is a very effective way.

　　Conclusion

The golden ratio is the site layout of the eye-sucking Dafa, although it is a mathematical concept, but the effect is significant, it and the site's fonts, color, design combined to make your design level more on a level.