The Golden Ratio – What Is It And How To Use It

The Golden Rectangle rule

The golden ratio (or the divine proportion) is a mathematical constant that can be often seen in the natural world, as well as in the artwork throughout the history. In mathematical terms, when a is larger than b, and the two are added and then divided by a, the sum represents the golden ratio (1.618). That number is represented by the Greek character “phi”.

It is still not clear why this ratio is so appealing to the human eye. Anything following this ratio tends to be perceived as attractive and even the slightest change in an image that gets closer to the ratio is automatically considered to be more beautiful to the human brain. It is not a matter of magic; it is just a yet unexplained fact that our minds react very positively to anything formed on the basis of the golden ratio. As many artists have been using this fact, so could you when it comes to web designing.

The layout

The general possibility of making the golden ratio work for you is to use it when organizing the layout of your website, namely the size and placement of the header, logo, main content and the sidebars. The method of forming a golden rectangle, a rectangle with the golden ratio dimensions, can help you when deciding the overall size of the main components. For example, if you want to measure the width of the main content and sidebars column, you need to divide the total width of the content area by the golden ration, namely 1.618. The number you get is the width of the main content column, and the rest is actually the width of the sidebar column.

The rule of thirds – grids

If you don’t feel like using your calculator each time you want to check the ratio of an image or the layout components, the rule of thirds, or the grid, can simplify your work. Basically, when you horizontally and vertically divide any image into thirds, you will get nine equal grids. The places where there lines cross, namely the vertices, are where the focus of the image should be. Human eye tends to look at the things that are positioned near those imaginary lines, and the whole division is pleasant to view. In case of a more detailed image, you can break the original nine thirds into further thirds to define additional central points. In short, the use of grids speeds up your work and makes it aesthetically pleasing. What’s more, you can easily download a grid template from certain sites.
Rule of the thirds


Images and logos

  • Images – When it comes to photos or any other images, there is often the need to crop them. Again, the golden ratio can be of a great use here when you must decide on the new dimensions of the image. Of course, it is not obligatory to crop every single image according to the golden ration, but you should consider doing it for at least the image that represents the center of your design.

The other possibility when cropping images is to mind the golden spiral. To be more precise, the focal point of the image should also be the center of the golden spiral. This method is similar to using the rule of the thirds, but it is actually more natural to the human eye.

  • Logo – It represents an important part of a company’s brand, so you could also consider applying the golden ratio when designing your logo. Even if the logo is set out to be a pretty simple one, the golden ratio can still be applied on its basic elements.


Content is the core of any website, as it is where the most important information for the reader is located. Web developers from Sidney recommend you should pay extra attention to it and learn how the golden ration can be of help to you.

  • Fibonacci sequence – It consists of numbers that start with 0 and 1, and where the previous two numbers give the added sum, which is actually the number in the sequence. There is the relation between the golden ratio and the Fibonacci sequence – if you divide a number from the sequence with the number that comes before it, you will get the golden ratio – 1.618.

Fibonacci numbers can help you decide on the relationship between the size of the header and the content. You can also use them to determine the width of the columns, especially with the layouts filled with different texts. Fibonacci tiling is the method of determining tile size according to Fibonacci sequence.


  • Golden spirals – This method is a combination of the golden ratio and Fibonacci numbers. The spirals are formed according to Fibonacci tiling and they get wider on basis of the golden ratio for every quarter turn. This method is widely used in art, where the negative space also plays an important role. In the need, similarly as with the rule of thirds, human eye naturally pays attention to the center of the spiral to see the details.

Regarding the content, this method can be considered when you have to solve the problem of your content density, so it doesn’t look overcrowded and the most important text ends up in the focus of the reader’s attention.


The golden ratio is not a must when it comes to designing complex things such as a website. The degree to which you will use it depends on you, whether it is going to be for the layout only or even for the images following the text. Try out different possibilities and see what suits you best. However you choose to utilize the golden ratio, it will definitely bring you some undeniable benefits.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: