Golden Ratio in Web Design

6,377 views
5,919 views

Published on

What’s Golden Ratio?
Golden Ratio in Nature
Golden Ratio in Art & Architecture
Logos with Golden Ratio
Applying the Golden Ratio to Web Layouts
The Golden Ratio and CSS Frameworks
Golden Ratio Tools

Published in: Design
1 Comment
17 Likes
Statistics
Notes
  • I think I've answered your slideshow with my new project: www.GoldBootstrap.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,377
On SlideShare
0
From Embeds
0
Number of Embeds
670
Actions
Shares
0
Downloads
153
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

Golden Ratio in Web Design

  1. 1. Golden Ratio in Web Design Mai El Hadidy UI Designer at eSpace Technologies
  2. 2. What’s Golden Ratio ▪ The magic number (actually 1.618…) 1.62 ▪ 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. Golden Ratio in Art & Architecture
  6. 6. Logos with Golden Ratio
  7. 7. Applying the Golden Ratio to Web Layouts
  8. 8. Applying the Golden Ratio to Web Layouts
  9. 9. Applying the Golden Ratio to Web Layouts
  10. 10. Golden Ratio
  11. 11. Golden Ratio
  12. 12. 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 960px by 1.62 which results in approximately 593px.
  13. 13. 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
  14. 14. 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 containerwidth and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio.
  15. 15. The Golden Ratio and CSS Frameworks
  16. 16. 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.
  17. 17. Golden Ratio Tools
  18. 18. Golden Ratio Tools Golden Ratio Calculator
  19. 19. Golden Ratio Tools goldenRATIO
  20. 20. Golden Ratio Tools Phicalculator
  21. 21. Golden Ratio Tools Atrise Golden Section
  22. 22. Thanks 

×