Golden Proportions in web design

The golden ratios are considered ideal and precisely for this reason, they have been used for years in architecture and other aspects such as web design. When creating a website, there are many who take into account the golden proportions so that its design is perfect.

The calculator of Golden Ratios in web design allows you to know the exact width that the content column and the sidebar of the web should have, the most common configuration used on the Internet today. You simply have to enter the total width of the web in pixels and after clicking the calculate button, you will get the width that each of these elements should have:

The golden ratio

If you've made it this far, you may be asking yourself what is the golden ratio. If you don't already know, the golden number or golden ratio is an irrational number (it has infinite decimal places) and relates the proportion between two segments of a straight line.

This proportion is present in some geometrical figures, in elements of nature and has been used on numerous occasions in the world of architecture and art thanks to its "perfect proportionality" and the harmony that it conveys in the places where it is present.

The golden ratio is represented by the Greek letter Phi (symbolized by Φ) and whose value is as follows:

Φ = 1,6180339887498948...

As of today, the golden ratio continues to be used as a ratio of proportion which has also been taken to the Internet world and which should be used to achieve a design that is pleasing to the eye and proportionate.

How to calculate the golden ratio

Segments of golden proportions

As we have said before, the golden number relates two segments of a line, being a the segment of greater length and b the one of lesser length, so that the following equation is fulfilled:

Formula of golden ratios

The quotient of a/b is the golden ratio.

If we want to demonstrate the value of the golden ratiowe have to start from the above equation and premise, so that if Φ =a/ b, then the above equation can be expressed as:

1 + Φ-1 = Φ

We solve until we obtain:

Φ2 - Φ - 1 = 0

When solving this second degree equation we are left with the following positive solution:

Golden number

Example of golden ratios on a web site

Golden Proportions in web design

If we want to design a website that has a total width of 600 pixels, the golden ratio calculator will tell us that we need the content section to be 370 pixels wide and 230 pixels in the case of the sidebar where banners, links and other navigation elements are placed.

Golden Ratio Calculator for the web

Leave a Comment

Information on data protection

  • Responsible: Ignacio Cuesta
  • Purpose of processing: Spam control, comment management, etc.
  • Legitimation: Your consent
  • Communication of data: Data will not be communicated to third parties except by legal obligation.
  • Rights: Access, rectification, portability, forgetfulness.
  • Contact us:
  • Additional information: More information at our privacy policy.