Web Design & Print Design Team - Array Studio

Golden Ratio WordPress Theme

Posted By Predrag on April 10, 2009

Many visitors of Array Studio Workshop were more then interested in the Golden Ratio post. Even though I promised more material about it, I couldn’t find enough time to conduct a research. Until now. I don’t intend to bother you with more theory, but rather to show you how to use it in practice.

Since we’re using WordPress regularly, we thought that creating a WordPress theme based on Golden Ratio rule will have two pretty good points:

• We’ll have a theme just the way we want in Golden Ratio
• We’ll present the actual way how you can use Golden Ration in design.

We also wish all of you to participate with ideas and comments!

So, for start here are some written in stone rules we will keep in mind throughout the process.

Golden rules for creation of Golden Ratio WordPress Theme

Rule #1: Theme must be functional, practical & user friendly

This basically means that we’ll round some numbers, we’ll think about the most common ad spaces people use, we’ll make the font sizes readable, etc.

Rule #2: Website shouldn’t be wider then 960 pixels.

This one is pretty understandable – it is a safe width for most screens.

Rule #3: Simple is good

We’ll make the main theme as simple as possible, so it can be upgraded later.

Let’s start!

Here is our initial, rough-rough composite.

I personally enjoy 3 column design for blogs, with the main column on the left hand side, and the 2 smaller ones on the right. In order to follow the Golden Ratio rule, two side columns should be in different width. However, nowadays you need at least 160 pixels for the far right column (since that is the place for adverts, and the 160 pixels is what we need). We also need some margin space on the left from that column. Let’s say 20 pixels will do.

Now let’s do some math

So, we have:

160+20 pixels =180 pixels (for the right hand sidebar plus spacing)

Now, let’s calculate the second sidebar:

180 x 1.618 = 291.24 pixels. We’ll round that up to 290 pixels.

We’ll take our 20 pixels back, so we’ll have 270 pixels for the second sidebar.

Now it’s time for the main content.

290 x 1.618 = 469.22. Again, we’ll round it up to 470 pixels for the main content.

This space is enough for the 468×60 regular banner ad, which you might use as well.

However, when you calculate the sum, you’ll get:

160 + 20 + 270 + 20 + 470 = 940px

That’s absolutely fine, since we have 960 pixels defined as a safe maximum width. So, we’ll decrease the original value for 20 pixels.

So, by applying the Golden Rule, we have a 3-column WordPress theme with the: 470px column, 270px column and 160px column, by looking from left to right.

What about the header & footer?

For the header at this stage, we used simple calculation. For the top part, where the logo and navigation bar should be, we took 100 pixels. Bottom part of the header is 160 pixels high.

For the footer divider, we’ll continue this array of numbers.

160 pixels x 1.618 = 258.88. We’ll use 260 pixels for the footer height.

Conclusion

Till now, we have defined the main sections. In my next post, I’ll deal with the font sizes. Your comments are more then welcome.

Category: Web, Web Design, WordPress | 4 Comments »
Tags: