Good design isn't all art and creativity. Good design is mathematical. One such element is the
Golden Ratio which is a ratio of 1.618 to 1. This ratio has shown up in art and architecture for thousands of years and is in nature. We can see the Golden Ratio in ancient construction like the Parthenon and the Great Pyramid at Giza and modern day construction like the United Nations Headquarters. In nature the Golden Ratio can be seen in places like parts of the human body and flowers like the daisy and sunflower.
The Golden Ratio In Web Design
A simple example of the Golden Rule in web design can be seen in the ratio between the main content area and the sidebar. If you have a site that is 960px wide you would take 960px and divide it by 1.618 which would give you about 593px. Then subtract 593 from 960 which gives you 367px. If you divide 593px by 1.618 you'll get 367px.
This provides you with dimensions of 593px for the main content area and 367px for your sidebar. But, what about all those designs that look good without using the Golden Ratio?
For an example let's take a look at Fast Company. The wrapper is 1000px wide. To follow the golden ratio the main content area would need to be 618px wide and the sidebar would be 382px wide.
- ratio1.png (246.27 KiB) Viewed 2396 times
As you can see they aren't following the Golden Ratio. The ratio from the wrapper to the main content is 1.54 and the ratio of the main content to the sidebar is 1.86. When we examine why this works we see that proportions are preserved bringing harmony to the page.
- ratio2.png (247.71 KiB) Viewed 2396 times
The main content area without the white space between it and the sidebar is 638px and the sidebar content is 336px. The ratio of 638 to 336 is 1.89. This is very close to the 1.86 ratio. To the human mind the design is proportional where the ratio is preserved.
When you don't follow the Golden Ratio it's important to preserve the proportions and ratios. To the human mind this is part of what makes something beautiful and comfortable.
