Golden Ratio
in Web Design
Mai El Hadidy
UI Designer at eSpace Technologies
What’s Golden Ratio

▪ The magic number
(actually 1.618…)

1.62

▪ If the ratio of the sum of the
quantities to the larger...
Golden Rectangle

• Choose a number that will
be the length of the
rectangle’s short side.
• Multiply that by 1.618.
• The...
Golden Ratio in

Nature

• The golden ratio is
found throughout
nature, art, and
architecture.
• Pinecones, seashells,
and...
Golden Ratio in

Art & Architecture
Logos with Golden Ratio
Applying the Golden Ratio
to 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...
Example: You would like to create a fixed width layout. The width
of your layout is 960px. You would to have a large block...
Example: You would like to create a fixed width layout. The width
of your layout is 960px. You would to have a large block...
The Golden Ratio and CSS
Frameworks
The Golden Ratio and CSS Frameworks

Bootstrap
Bootstrap grid system utilizes 12 columns, making for a 940px wide
containe...
Golden Ratio Tools
Golden Ratio Tools

Golden Ratio
Calculator
Golden Ratio Tools

goldenRATIO
Golden Ratio Tools

Phicalculator
Golden Ratio Tools

Atrise Golden Section
Thanks 
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Golden Ratio in Web Design
Upcoming SlideShare
Loading in...5
×

Golden Ratio in Web Design

3,348

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
12 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
3,348
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
84
Comments
1
Likes
12
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 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×