Design Tip: The Golden Ratio

Visual design within the drupal community is something that needs improvement. Acquia recently reported the results of a study that showed Drupal themes are not up to the quality level of Joomla! and Wordpress themes. Recent efforts have been started to cultivate the design element of Drupal including the redesign of drupal.org, the Design 4 Drupal initiative, the design track at DrupalCamp Copenhagen, the upcoming Drupal Design Camp in Boston, and entire track dedicated to design and theming at Drupalcon Paris.

But, there are some simple steps we can all take to help make our Drupal sites look better. Even the most diligent of programmers can take steps to beautify their sites and learn to appreciate the deisgn element. Over the next several weeks I will be blogging about simple design tips. To kick this off, let's look at the Golden Ratio.

mfarina
#Design | Posted

Visual design within the drupal community is something that needs improvement. Acquia recently reported the results of a study that showed Drupal themes are not up to the quality level of Joomla! and Wordpress themes. Recent efforts have been started to cultivate the design element of Drupal including the redesign of drupal.org, the Design 4 Drupal initiative, the design track at DrupalCamp Copenhagen, the upcoming Drupal Design Camp in Boston, and entire track dedicated to design and theming at Drupalcon Paris.

But, there are some simple steps we can all take to help make our Drupal sites look better. Even the most diligent of programmers can take steps to beautify their sites and learn to appreciate the deisgn element. Over the next several weeks I will be blogging about simple design tips. To kick this off, let's look at the Golden Ratio.

<!--break-->

The Golden Ratio

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.

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.

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.

mfarina