The golden ratio, named for the Greek sculptor Phidias, is a mathematical equation otherwise known as ‘phi’. The ratio for length to width of rectangles of 1.61803 39887 49894 84820 os often considered the most pleasing to the eye.
Also known as the divine proportion or the golden mean, the golden rectangle – a figure constructed using the golden ratio, has been used to create pleasing proportions in human creation, from buildings to paintings. The golden ratio is often applied to divine proportions so that we can better understand why a majority find a creation beautiful. The golden rectangle is created so that all the sides equal the golden number.
The Golden Ratio
Website layout using the Golden Ratio
When used in web design, the golden ratio is mostly used to determine where elements will be placed on the page. For example, if the width of the website you’re working on is 1000px, you need to fit the side column and the main content into that column. Using the golden ratio is like to make the design more visually appealing.
- Divide 1000px by 1,61 = 621,11 (round down to 620).
- 620 is the width of the main content column.
- The remainder is the width of the side column.
Why Does The Golden Ratio Work?
Ancient Greeks found that the mathematical proportion Phi is commonly found in nature. They believed that it had a special influence on human’s perception. Designs that fit the golden ratio are more commonly believed to be beautiful. Artists like Leonardo da Vinci and Salvador Dalí have based their artworks on the golden ratio, as well as the architects of the Parthenon and more modern works, like those of Swiss architect Mario Botta, use the equation.
The golden ratio is said to satisfy our natural need for symmetry. We simply find symmetrical things more appealing. Studies have shown it also applies to how we perceive other people – the more symmetrical their face is, the more attractive we find them. When applied to web design, this equation ensures that you offer a site that is visually appealing as well as logical to the human eye.
Golden Ratio in Web Design Using Grids
Websites consist of many elements and the best ones place those elements in an aesthetically pleasing way. Many designers use grids to place elements on the web page, making the site look more organised and appealing. Two grid types are more frequently used – the Phi grid and the rule of thirds grid.
The Phi Grid
The rectangles which make the grid are the golden rectangles. The blue dots show the position where the human eye is naturally drawn when looking at the picture or website. This is the best place to position a CTA, special offer, or any other image that you want people to notice when landing on your homepage.
You can apply the Phi grid to crop images too. You simply make sure that the most important part of the picture is at least somewhere near the focus points (marked as blue dots above). This way you can ensure the image will be pleasing to the viewer.
One of the drawbacks of using the Phi grid is that every website has different measurements and you would need to calculate the grid every time. That is why the Rule of Thirds grid is so useful.
The Rule of Thirds
The Rule of Thirds is a simplified version of the Phi grid. It helps you use the golden ratio in web design without having to calculate the grid every time.
The Rule of Thirds Grid
The grid divides the space into nine equal parts. The grid is actually frequently used in photography, you can enable it on your camera or phone.
As with the golden-ratio-based grid the image above has the focus points marked on it with blue dots, however, the rectangles are slightly bigger than the ones on the previously shown golden grid. Studies have shown that the top left line-crossing point is the one that draws the attention of viewers. Over 40{21dc2fe1b43c4cf57a2e25a56b286f09fbb32a45ddf34dcf04be366972dd7b06} of people in the study focused on this point first and for the longest amount of time when viewing a website
Again, this is the position that you want to use to communicate with website visitors. Placing your most important message in this position helps to ensure that you are reaching your audience.
The Golden Ratio in Web Design
The Golden Ratio is used in many ways, including logos and branding. An adaptation of the rectangle, the golden spiral, is often used in intricate designs. The geometrical spiral is a visual representation of the golden ratio. It can be used while designing logos to make them mathematically beautiful.
The spiral indicates where to place elements in the design. Besides branding, the golden ratio is also used in typography, image cropping, book covers and many other things. The spiral is a way to balance elements. A pine cone, snail shell and many seashells are natural representations of the golden spiral, so using it in human-based design adds an element of natural beauty.
Welcome to Our Blog
We want to share our expert knowledge with you, and that is why we want you to know that all of our blogs are written by our in-house writing team.
Our writers do the research, discuss the topics and form their own opinions. They do not write for a commission from any sites, products or services mentioned, and we do not publish advertorials or paid reviews.
We enjoy writing for you and will continue to be transparent about our blogs, which are only opinion pieces.
