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

1. Golden Ratio
in Web Design
Mai El Hadidy
UI Designer at eSpace Technologies

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. 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. 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. Golden Ratio in
Art & Architecture

6. Logos with Golden Ratio

14. Applying the Golden Ratio
to Web Layouts

15. Applying the Golden Ratio to Web Layouts

16. Applying the Golden Ratio to Web Layouts

17. Golden Ratio

18. Golden Ratio

19. 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.

20. 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

21. 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.

24. The Golden Ratio and CSS
Frameworks

25. 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.

26. Golden Ratio Tools

27. Golden Ratio Tools
Golden Ratio
Calculator

28. Golden Ratio Tools
goldenRATIO

29. Golden Ratio Tools
Phicalculator

30. Golden Ratio Tools
Atrise Golden Section

31. Thanks 