May 2009

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.

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.

Comments

Too bad that on 1024x768 you don't see a bit of content. Your solution is better especially because the width is below 1000px

By using Golden Ratio in Web designs its help make design perfect.
seo company

Here's my design tip: use a font size that doesn't impair one's reading. Good contrast is also nice to have.

The golden ratio is effective and true but on many sites it's not practical, because that ratio doesn't look good on all layouts and neither on all content.

I do always aim for consistent ratios like the other example you gave. There should always be relative equidimensionality between all objects on the site, it will do much for a design!

When you mess up the ratios, good chance no one will tell you so, but yoy may get feedback saying your design looks a little off.. It creates a sense of inconsistency.

I am working in Indianapolis Web Design company where we need to handle many of the site and the designs.I totally agree with you. It is true that the golden ratio cannot be useful for every sites. It's all about layouts and contents that matches the site to look good.I don't say the golden ratio is bad but in some extinct it can be used for the manageable site's. If everything goes messy than certainly the final output of the site is also going to be messy and the webmasters will not appreciate that kind of work.

What about three or more column layouts?

Three or more columns is a different animal. Unless you really know what you're doing I wouldn't recommend going over 3 columns.

When it comes to 3 column layouts make sure your ratios are consistant. Your design may feel off even if people who see it can't tell you why. I like to think of it like juggling. Juggling 2 things is easier than 3. Making sure your ratios are consistant with 2 columns is easier than with 3.

Here is the formula: a+b is to a as a is to b

It's all about spacing the present your web content in the best way.

Lane

Three or more columns is a different animal. Unless you really know what you're doing I wouldn't recommend going over 3 columns.
thanks i will try to publish similar things in my site:
http://www.gadizayn.com/

The theme developed is petty cool and i will be interested in using it for my new website. Find People

I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal.

When it comes to 3 column layouts make sure your ratios are consistant. Your design may feel off even if people who see it can't tell you why. I like to think of it like juggling. Juggling 2 things is easier than 3. Making sure your ratios are consistant with 2 columns is easier than with 3.

I still Drupal site templates are falling behind in the number of Joomla site template. The most templates available or otherwise help the popularity of Drupal. Online Picture Storage

I still Drupal site templates are falling behind in the number of Joomla site template. The most templates available or otherwise help the popularity of Drupal. Online Picture Storage

They call it the golden rule but it's really more like the golden idea. And I think it can sometimes be a crutch, but so can so many other guidelines, like strict grids, baseline grids, etc. Consider how effective your ratios and alignment is if you think it serves to be improved. I think to most designers it sort of happens naturally--stuff lining up, ratios looking good, etc.

Mike Davidson, Newsvine CEO, puts it well.

"I feel like grids are the new web standards. What I mean is that they are a potentially useful tool to achieve a noble means, but they aren’t the second coming of the messiah. If grids help you do great work, then by all means learn them, love them, and live them. But if you’re perfectly happy eyeing layouts as a drunken painter eyes a canvas, then eye away. I’m no painter, but I’m plenty happy creating layouts without the use of grids or any sort of sizing heuristics. I don’t make sure my main column is sized according to a golden-ratio and I don’t make sure every line of type lines up vertically with every other.

I just do what feels right… and that’s plenty good enough for me. You should do the same, whether or not that involves the use of grids."

http://www.mikeindustries.com/blog/page/3

This design tip really looks like something solid.

casino

del plz erorr

Excellent post and people around the world will certainly get much through reading it. I'll come back again and again to read such articles. Thanks
Da Buddha Vaporizer

The theme developed is petty cool and i will be interested in using it for my new website.

Colo-x is UK's largest commercial specialist agents for data centres like Uk Data Center

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <hr> <blockquote> <h3> <h4> <h5> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.
Stay Informed

Sign up now for the Treehouse Newsletter.