Mathematics, Seashells, and Web Design

In many ways, the layout of a Web page is the hardest part - mostly because it's the primary part. Deciding what should go where, how wide or narrow, tall or short everything should be can be very difficult. Many designers just throw things down on the page, white board, or graphics program until they have a design that looks "right" to them. I used to do that too. It's a lot more fun to just push images and blocks around on a blank piece of paper, than to try to figure out if there's some scientific way of composing the page.

What is the Golden Ratio

In a golden rectangle, it can be divided into a square and a smaller rectangle. The ratio of the width of the small rectangle to the width of the square is the same as that of the width of the square to the entire rectangle. In fact, when you divide a golden rectangle into a square and smaller rectangle, the smaller rectangle is a golden rectangle as well.

Golden Ratio in Nature

The most common example of the golden ratio is the nautilus shell (see image). As it spirals in on itself, the spirals get smaller and smaller in the same proportion to each other as they do to the whole. You can also see the ratio in things like sunflower petals, and the curvature of fern fronds (see image).

Golden Ratio in Design

The golden ratio (also known as the golden rectangle, the golden mean, or the divine proportion) has been used for centuries to create a design that is aesthetic and pleasing to most people. The golden ratio is a visual representation of the number phi (1.618033988749895). It is discovered in ancient architectural design such as the Parthenon and is still used today in architecture and design.

When the golden ratio is used it design, it builds on a natural language that your brain is hardwired to understand. Because Phi is all around us, it is a comfortable ratio, and so you have been trained to find it attractive. Designers who use this create designs that are more effective and visually compelling.

How to Use the Golden Ratio in Web Design

It is very easy to create a design using the golden ratio:

1. How wide is your design? You can design a page using the golden ratio using fixed or flexible widths, but in order to use the ratio you have to have a number. For this example, I'll say I'm designing for an 800x600 resolution monitor, so my page won't be more than 780 pixels wide. I'll make my width 760px.
2. Divide by Phi. Once you know the width, divide it by Phi (1.62 rounded is fine). 760 divided by 1.62 is 469.14 or 469 (Web browsers prefer whole numbers). That is the width of my main column.
3. Subtract the main column width from the whole width. This will give you the second column width. 760 - 469 = 291.

From this calculation, I should generate a 2-column site that has a main column 469 pixels wide and a secondary column 291 pixels wide. If I do this, I'll have a site that is aesthetically pleasing, without having to do anything else.

You can do this same calculation with percentages for a flexible width layout: 100% / 1.62 = 62% for the wide column and 38% for the wide column.

Note: Many sites recommend using the ratio 3:5 to get your golden ratio, but this ratio, while close, is not exactly the golden ratio. If you're designing something quickly or you have a grid that you're working from, this can be a great rule of thumb to get close to the perfect proportions, and is great if you really hate math or don't have a calculator.

Use the Golden Ratio for More than the Page Layout

If you think about how elements within your page are placed, you can use the golden ratio within them to create mini-golden rectangles. These will be just as aesthetically pleasing. Use it for captions on images, text flowing beside and around images, advertising space, and your navigation. If you create navigation buttons that have the same proportions as the golden rectangle, each one will look nice on the page.