Upload
mai-el-hadidy
View
1.092
Download
9
Embed Size (px)
DESCRIPTION
What’s Golden Ratio? Golden Ratio in Nature Golden Ratio in Art & Architecture Logos with Golden Ratio Applying the Golden Ratioto Web Layouts The Golden Ratio and CSS Frameworks Golden Ratio Tools
Citation preview
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