Sharing useful information: web design + golden ratio

I believe many friends must be familiar with the term golden ratio. Because of its unique aesthetic value, the golden ratio is widely used in many fields: mathematics, physics, architecture, art and even music. However, few people can combine the golden ratio with website construction. In fact, using the golden ratio in web design can bring unparalleled proportion, coordination and artistry, giving the website a unique aesthetic. The topic that the editor wants to discuss with you today is the golden ratio. I hope the editor’s sharing can give you some inspiration and inspiration.

What is the golden ratio?

Usually we use line segment division to explain this concept: divide a line segment into two parts, and the ratio of the length of the shorter part to the longer part is equal to The ratio of the long part to the overall length is an irrational number, and the approximate value of the first three digits is 0.618. Because such a ratio can often bring harmony and beauty to the design, people call it the "golden" ratio (or golden section, Chinese-foreign ratio, etc.).

The use of the golden ratio has been used for thousands of years, from the Egyptian pyramids to the Parthenon in Athens, from Michelangelo's Sistine Chapel to Da Vinci's Mona Lisa , from Twitter’s logo design to Pepsi’s logo design, even human faces follow this digital ratio. In fact, we seem to be hard-wired to be attracted to objects and pictures that have golden ratios. This reaction is almost subconscious, and our brains will even fine-tune what we see to be closer to the golden ratio, deepening our own memory and impression of things. The golden ratio can also be used in graphics. The most typical one is the golden spiral, also known as the Fibonacci spiral. There are many Fibonacci spiral patterns in nature: fern stems, flowers, seashells, even hurricanes.

So how to use the golden ratio to improve the design aesthetics in a website? Since the golden ratio can be presented in various forms, we can use it in multiple elements such as layout, spacing, content, images, and graphics.

1. Layout: Set the web page size to the golden ratio

Using the golden ratio in layout is very effective. The key point is to control the proportion and size and grasp the golden ratio of 0.618. For example, if you use a 960px width layout, multiply it by 0.618 to get 594px, which is the height of the web layout. On this basis, you can divide the entire layout into one column of squares and one column of rectangles to present the golden section more intuitively and make the website more attractive. This two-column layout is very practical in web design, and many websites choose this design method. Even the well-known National Geographic magazine is like this. The entire page looks clean and easy to read, with all elements organized and layered, making browsing smoother for users.

2. Spacing: Use golden spiral layout

Spacing, like white space, is a very critical element in design. Reasonable spacing will help highlight the core content of the website and make the website layout more coordinated, while inappropriate spacing will affect the user experience and affect the brand image of the website. At the same time, getting good spacing in a website often takes a lot of time. So how can we arrange the spacing between web pages quickly and efficiently? Using the golden spiral is a good choice. Use graphics to reasonably place each element, so that the spacing of the website is arranged according to a carefully calculated proportion, not just intuition. Additionally, if you are working with multiple elements at the same time, you can also layer the golden spiral to make the proportions of the web page more coordinated.

Moodley Design Studio is an example. It designed posters, program guides, logos and other brand identities for the Bregenz Arts Festival. The overall design of the program list adopts the method of photo collage, with a large amount of white space, and the design proportion, position and white space of various elements are arranged with the help of golden spiral.

LemonGraphic Design Company in Singapore also used the golden spiral layout when designing the visual identity of Terkaya Wealth Management Company. The placement of the three elements on the card: the little eagle, the text, and the big eagle all have a reasonable basis.

3. Content: along the trajectory of the golden spiral

In addition to using the golden spiral to arrange the spacing of the website, we can also use it to determine the location of web content. According to the theorem of the golden spiral, the human eye will always unconsciously pay attention to the center of the spiral, so we should pay attention to the center of the spiral and place the content that users may be interested in or the most important here, so that visitors can get the Informationally easier. In addition, more important information should be placed inside the spiral so that it is more eye-catching. Here are three relevant examples:

Take the National Geographic magazine’s web page as an example. If you look closely at its homepage, you will find that its content is arranged according to the trajectory of the golden spiral. Since people may subconsciously pay attention to the center of this track, National Geographic placed its logo here to once again highlight the brand image. Other important elements of the website are also included in the spiral.

The same goes for Tim Roussilhe designer's website.

Although the website has a lot of content and a large amount of information, the entire layout of the website appears to be very tight, the information is well organized, and there are many elements without being chaotic. The content in the upper left corner is designed to follow the trajectory of the golden spiral. When the visitor logs in, he will first see the text "BonjourMyNameisTim", then the detailed text, the menu button, and then the logo in the upper left corner. The user has scanned all the necessary information before they notice enough white space, which is exactly what the design is intended to do.

When Helms Studio designed the brand for FullsteamBrewery, they also used the golden spiral to arrange website content. Various elements are placed in different blocks, and visitors can browse along the central figure, seal, ABV character, and location of the manufacturer. This browsing experience is natural and convenient.

4. Pictures: Golden Ratio and Rule of Thirds

The composition of pictures is also very important, whether the pictures serve the purpose of information transmission or aesthetic presentation. Using the golden ratio and the rule of thirds in your images creates visual centers using lines and intersections, making them more eye-catching and highlighting important information. Using the golden ratio in a picture means dividing the picture into 3 unequal blocks. The ratio of the 3 blocks should be 1:0.618:1, which means that the width of the first and third columns is 1, and the width of the 3 blocks is 1:0.618:1. The width of the second column is 0.618, and the same is true for the horizontal area. In this way, we can reasonably arrange the position and size of the image through these lines or intersections to see how to attract the user's attention and add interest and vitality. In addition to the golden ratio, we can also use the rule of thirds to cut images. In a sense, the rule of thirds is a variation of the golden section, which is simpler to use. It divides the picture into three equal parts with a ratio of 1:1:1, so that the picture is completely balanced and even. This way we can arrange the important elements around the central rectangle.

The cover of Complex magazine is a close-up photo of actress Solange Knowles. It uses the golden ratio to reasonably arrange the positive and negative spaces in the picture. The nose and eyes of the character fall exactly at the intersection of the lines, which is an attractive feature. Ideal location for visitors' attention.

When Jason Mildren designed the cover for Pilot magazine, he used the rule of thirds to build the visual center of gravity. In the picture, the model’s eyes, thumbs and arm axes are all at the visual center of gravity. The character is positioned to the lower right, leaving blank space. To the upper left, the layout not only highlights the key points, but also achieves harmony and unity.

5. Graphics: Golden Ratio Circle

Just like the golden ratio can be used to create proportionally coordinated rectangles, it can also be used on circles. A perfect circle should follow A ratio of 0.618. Let’s take the logos of Pepsi and Twitter to carefully analyze the application of the golden ratio circle in web design!

Pepsi’s logo is composed of the intersection of two golden ratio circles. Although the smaller circle is less prominent in the overlap, it does lay the foundation for the white block in the middle of the logo. Twitter's logo design is constructed with the help of several circles in golden proportions. However, when it uses circles in golden proportions, it does not use circles in adjacent proportions. At first glance, it may not be accurate enough, but it is still the same. harmonious.

The golden ratio not only allows each element of the website to exist independently, but also connects them in a coordinated way. Cleverly using the golden ratio in the website will make our website design more excellent.

Web design