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

What is the golden ratio?

The gold ratio is a mathematical ratio, usually found in nature, and combines the classical design theory to establish 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.

Case 1:ystudio

yourlocalstudio.dk

　　What is this website about?

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

　What is this website about?

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:

　Why is it effective?

Want to stand out in the crowd? As Yourlocalstudio (YL) did, by using the golden ratio to design the site. The design uses a step-by-step, well-organized, structured grid system, which, you might say, looks like a guide, noticing that more and more Web sites are structured in a more dynamic layout to attract users ' attention.

Case 2:mashable

Mashable.com

　　What is this website about?

Mashable is a news website that gets the source of information, the "Connecting generation" of knowledge and resources.

　How does it use the golden ratio?

I used the Golden ratio test UX (user experience) trigger to demonstrate how Mashable uses the Fibonacci sequence layout, the content layout is flexible, the left title and links to more news, separated by a trellis.

　Why is it effective?

The gold ratio here is very effective because it allows a content-driven website to give information to typesetting breathing space. Similar sites use traditional grid layouts to look dense, but Mashable shows that the gold ratio is very effective, even if it is intangible.

Example 3:jackson & Kent

www.jandk.fr

　　What is this website about?

Jackson & Kent is a Web production agent from France website. They specialize in digital services such as Html5,css3,drupal,wordpress,php/mysql,flash.

　　How does it use the golden ratio?

The screenshot above shows how the layout is mainly comprised of previous customer work items, and there is a piece of information about the organization itself as well as a navigation bar in the center of the screen, the contact button, as shown in the following figure, also using the gold split grid system and organize the layout in a unique way.

　　Why is it effective?

The examples here encourage you to pan the site and explore the inner level, making the content more intuitive and interesting in the grid view and in different sizes of block shapes. Because the user is likely to be watching the content on the screen (as well as on the plate), on the horizontal axis of the navigation also has a paging number. This is a novel way to view each piece of content, and a user interface as a whole.

　Conclusion

The golden ratio naturally attracts the user's eyes to a particular point on the page. As a concept, it can help you to think about the layout of the content and effectively use the hierarchy, combination of layout, typography, color and general principles, will help to upgrade your design level to a new stage.