How to use the golden ratio in web design

I’ve written about the golden ratio before, and how I became confused when I was researching the Golden Grid System and The Golden Grid – two CSS grid frameworks whose names suggest there is some relation to the mathematical phenomenon. To be clear, using these frameworks won’t get you any closer to applying the golden ratio in web design, but they are both incredibly useful nonetheless.

There are several articles available that will give you some ideas of how to use the golden ratio in page layouts. Most of them suggest a strategy like this: Multiply the width of your main content area by the golden ratio – approximately 1.618 – and use the product as the width of your sidebar area. Too often, this suggestion is followed by instructions on how to use the rule of thirds, which has little (if any) application in web design and nothing to do with the golden ratio at all. The rule of thirds is a neat trick in print design and photography, but is pretty useless when it comes to page layouts with dynamic content.

I tried experimenting with this sidebar idea a couple of ways. Here is what I came up with:

Using the golden ratio to find the width of consecutive sidebar areas

In this first example, the two right-most columns are in golden proportion with each other, since 52 x 1.618 ~ 84. Then, these two columns combined are in golden proportion with the third right-most column, since (84 + 52) x 1.618 ~ 220. Finally, these three columns combined are in golden proportion with the left-most column, since (220 + 84 + 52) x 1.618 ~ 576. I also tried this:

Using the golden ratio to find the widths of consecutive sidebar areas (cont.)

In this example, each column is in golden proportion with the ones on either side of it. However, it’s much too wide, although you might be able to use only the middle columns. Both examples are very impractical. I’m sure I could think of a use for that far-right column, but not in most cases.

Another strategy I’ve come across goes like this: Divide the width of any content area by the golden ratio and use the quotient as the height of your content area. This is practical if you can restrict the height of your content area. You can see it in action in Adit Gupta’s article on Smashing Magazine. I’ll put the image up here but give him the proper credit:

Using the golden ratio to find the heights of media objects

Each of the content areas above (The Beginning, Newton’s Vision, Einstein’s Relativity, etc.) is a golden rectangle, which means that its width is in golden proportion to its height.

Looking at the picture of Space Geek, I realized it should not be that much of a stretch to make a grid composed of golden rectangles. The awesome discovery I made later restored some of the vigor I had once lost for mathematics. Next time, I’ll explain all about the discovery I made and unveil something truly freaking awesome.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s