Golden Ratio in Web Design

Mai El HadidyUI Designer at eSpace Technologies

What’s Golden Ratio

▪ The magic number 1.62(actually 1.618…)

▪ If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.

Golden Rectangle

• Choose a number that will be the length of the rectangle’s short side.

• Multiply that by 1.618.

• The result, is the length of the long side of your rectangle.

• Therefore, this rectangle obeys the golden ratio.

Golden Ratio in Nature

• The golden ratio is found throughout nature, art, and architecture.

• Pinecones, seashells, and the human body all exhibit the golden ratio.

Golden Ratio in Art & Architecture

Logos with Golden Ratio

Applying the Golden Ratioto Web Layouts

Applying the Golden Ratio to Web Layouts

Applying the Golden Ratio to Web Layouts

Golden Ratio

Golden Ratio

Example: You would like to create a fixed width layout. The width of your layout is 960px. You would to have a large block for your content (#content) and a smaller block for your sidebar (#sidebar). How would you calculate the widths of your columns?

Step 1:Calculate the width of your #content-block. You need to make sure that the ratio between this block and the overall layout width is 1.62. Hence you divide 960pxby 1.62 which results in approximately 593px.

Example: You would like to create a fixed width layout. The width of your layout is 960px. You would to have a large block for your content (#content) and a smaller block for your sidebar (#sidebar). How would you calculate the widths of your columns?

Step 2:

Subtract 593px from the overall layout width (which is 960px) and get 960px – 593px = 367px

Example: You would like to create a fixed width layout. The width of your layout is 960px. You would to have a large block for your content (#content) and a smaller block for your sidebar (#sidebar). How would you calculate the widths of your columns?

Step 3:

Now if you calculate the ratio between the #content-block and the #sidebar-block (593px : 367px ≈ 1.615) and the ratio between the container-width and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio.

The Golden Ratio and CSS Frameworks

The Golden Ratio and CSS Frameworks

Bootstrap

Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport.

Golden Ratio Tools

Golden Ratio Tools

Golden Ratio Calculator

Golden Ratio Tools

goldenRATIO

Golden Ratio Tools

Phicalculator

Golden Ratio Tools

Atrise Golden Section

Thanks