Strategies Blog

The Golden Ratio

The golden ratio, or 1.618, is a ratio found throughout nature, art, architecture, sound and even intervals of time!

The most common way to use the golden ratio is with layout. Using the golden ratio we can divide the width of our website to create a "golden layout" of two columns.

For example, take a typical 960 pixel width layout and divide 960 by 1.618. You’ll get approximately 594, which is the width of your primary content column. Then, to get the width of your secondary content column, subtract 594 from 960 and you get 366. The result, a two column layout with widths of the golden ratio.

If your page has a fixed height, you can also apply the golden ratio. For example, if the height is 760 pixels, divide that by 1.618, and you get approximately 470 pixels, which is the height of your primary content area. Subtract 470 from 760 and you get 290 pixels, which is the height of your secondary content area.

The Rule of Thirds

Most people will tell you that the beauty of a layout comes from image, typography and color. That's true, but a beautiful layout is also created in the way you arrange the different elements.

The rule of thirds is a technique first-used by artists of the Renaissance period. The technique can still be applied to the images and layouts we see on a website today.

For example, a typical banner ad for a product consists of the following elements:

• Product name
• Product description
• Product image
• A call-to-action button
• Background image

Looking at the example banner ad (pictured below), you'll notice that there is a nice balance between all of the elements. No element gets ignored or overlooked because the elements all touch the intersecting lines of the grid.

How to apply the Rule of Thirds

It's easy to apply the rule of thirds. Divide your banner ad into thirds vertically and horizontally. This will create 9 rectangles and 4 intersections. Place 4 dots where the lines intersect. Then place your most important elements on the grid intersections or where the dots are. If you have remaining elements, place them on one of the lines near an intersection. The dots should act like magnets that pull the elements close to it.

Styling Basics

So your boss has asked you to manage the company website... and you've got no experience with web design. Don't panic!

When updating or adding new content to your website, it is always important to keep your brand in mind. Here are a few basics that will assist you in creating content that looks good and is user-friendly.

• Colour - Is the colour appropriate
• Image - Is the image high-quality; does it support the text; avoid clipart
• Text - Is the writing style appropriate; informative, persuasive or imaginative