Golden Ratio in Design Principles


What does the human anatomy, DNA structure, flower petals, ancient architecture, and Fibonacci series of numbers have in common? – Not many might know, but all of them are designed as per Golden Ratio.

Yes, we are talking about the divine Golden Ratio or Phi – 1.618

Don’t believe it? Let’s start with the most obvious one – The Fibonacci series (where a number in the sequence is the sum of the previous two numbers) that runs something like – 0, 1, 1, 2, 3, 5, 8, 13… etc. Now starting from five, if it’s divided by previous number, three, it is 1.666. Eight divided by five is 1.6. Thirteen divided by eight is 1.625. That’s the Golden Ratio at work.

Check out your fingers now. If your fingernail has a length of 1 unit then all sections from the fingertip to the base of the wrist goes on increasing in Phi. The ratio of your forearm to hand is Phi, the ratio of measurement from head to navel to full body is Phi, and many more such examples demonstrate Golden Ratio in human anatomy.

How does web design fit in?

You might be thinking “Fine, but how does web design fit in this talk about divine ratio of 1.618?”

As with all things, we people prefer web designs that are aesthetically pleasing and bear a sense of balance and harmony. This not only help elevate the UI experience of the user but also achieve clear design solution. What better way to accomplish these advantages than by implementing the divine ratio of 1.618?

Just like ancient artists of Greek and Roman culture, today’s web designers can utilize the prowess of Phi and implement it easily into their design by utilizing the proportion of 1.618 to two objects placed within a logical context.

Interested to know how? Then read on

1. Implementing Golden Ratio in web design – The use of Phi

Start off by creating a grid for your design. If your two column layout has an overall width of 960px, then the bigger frame on the left will have a dimension of 960px / 1.618 = 593px and the smaller frame will be 960-593 = 367px. For modern responsive design, the concept of fluid design kicks in and we can use the same principle in ‘em’ or %.

So, if we use a font size of 14px into a layout of 960px, then our calculation would be

  1. 960px / 14px = 69em (overall width)
  2. Left hand side bigger frame is 69em / 1.618 = 43em
  3. Right hand side smaller frame is 69em – 43em = 26em

This demo by Nick Cowie aptly shows how these calculations are implemented into fluid grid layout designs.

The above implementation is applicable to multiple other elements of the web design. So the ratio of width to height will be Phi. The ratio of logo line and horizontal menu line in the top 1/3rd block will be Phi. The width of horizontal menu tabs to the entire line will be Phi, and so on.

2. Implementing Golden Ratio in web design – The use of 5:3 ratio

This is a useful rule of thumb that follows the Golden Ratio. It can give you a quick and rough guideline of design and placement approaches without having to go to a precise degree of accuracy. So in our above example if the overall width of the container is 960px, the left hand side will be 960/5*8 = 600px and right hand side frame will be 960-600 = 360px. If you are inundated with your workload, we suggest you to check out some tools that do the same automatically.

  1. Phiculator uses a simple interface to return a number corresponding to the golden ratio for any number that you provide as input.
  2. Atrise Golden Section provides a design tool for designers to implement the Golden Ratio while working on their project

3. Implementing Golden Ratio in web design – The rule of ‘thirds’

Remember the words ‘top 1/3rd block’ towards the end point#1 above? We were talking about the rule of ‘thirds’. This is an abridged approach to the Golden Ratio. You can divide the entire layout into 3 horizontal and 3 vertical parts to get 9 unique blocks of similar dimensions. There are multiple placement options provided by this approach

  1. The four points that are created by the intersection of the horizontal and vertical lines is the place where you provide an element or content that is the most eye-catchy
  2. The top 1/3rd is where most of the navigation action happens in the home page (menu items, sub menus, contact us links etc.) You can further segregate the top 1/3rd into 3 equal parts and then determine the placement of company logo, website name, social sharing buttons, and menu items for other webpages

Using this option provides harmony to the overall web design.

To wrap up

By replicating the natural order into the scheme of things in website design through Golden Ratio, new age designers can enhance the communication of the design and appeal better to people. The use of the Golden Ratio also ensures that the design layout is much better structured and has an easy navigation to impart a stellar UI experience. For any queries or help on web design issues, please feel free to contact us.

Do write in to us and let us know if you see any element of your website that depict the divine Golden Ratio.

Never Miss Another Update
Subscribe to receive the latest updates

    I have read and accept the Privacy Policy

    We'd love to hear from you


      I have read and accept the Privacy Policy
      × Talk to us on WhatsApp!