1.618 is a number all serious designers should know. It’s known as the golden ratio found throughout nature, art and architecture. Seashells, the Mona Lisa and the Parthenon all show the golden ratio. Our faces and bodies are also proportional to the golden ratio. It’s so omnipresent that it’s even found in sounds and intervals of time. If there ever was a mathematical way to explain and express natural beauty, the golden ratio is it.
The golden ratio gives us a divine sense of aesthetic that we can apply to web design. By applying the golden ratio properly, we can make our websites visually compelling. The most common way to use the golden ratio is with a page layout. Using the golden ratio we can divide the width of our website to create a “golden layout” of two columns.
For example, take your typical 960 pixel width layout and divide 960 by 1.618. You’ll get about 594, which is the width of your main content column. To get the width of your side bar, subtract 594 from 960 and you get 366. Put it all together and you have a two column layout with widths of the golden ratio.
You can also apply the golden ratio to the height of your website, assuming your page has a fixed height. For example, take the height of 760 pixels and divide that by 1.618, and you get about 470 pixels, which is the height of your main content area. Take 470 away from 760 and you end up with 290 pixels, which is the height of your bottom bar.
Getting the width and height of your layout using the golden ratio is easy to do. But what about the elements within the page, such as boxes, panels, buttons, images, and text? For that, we turn to golden rectangles. The length and width of a golden rectangle have a golden ratio proportion.
Not every interface object is going to have a rectangular shape, but for objects that do have a rectangular shape, we can use the golden rectangle to make the elements proportional to the golden ratio. To do this efficiently, we have to build a golden rectangle grid. We will use this grid to scale our interface objects into a golden rectangle.
First, you’ll need to open up Omnigraffle or Fireworks, turn your canvas grid on and set the grid spacing to 5 pixels. You don’t have to use 5 pixels, but 5 is ideal because it gives you flexibility in how you can scale your golden rectangle. You’ll be able to create golden rectangles from a small to large size.
In order to create a golden rectangle, we will need to follow the Fibonacci spiral. Start by creating a 1×1 square. Make another 1×1 square and place it to the right. Make a 2×2 square and place that below the two square. Make a 3×3 square and place it to the left. Finally, make a 5×5 square and place it above. You have just created a golden rectangle with the spiral of 5. The golden rectangle gets larger as you continue to spiral, but for our purposes, we want to stop at 5.
The example above shows a vertical golden rectangle. By duplicating it multiple times vertically and horizontally we end up with a golden rectangle grid for creating vertical rectangles. However, for creating horizontal rectangles we have to orient the golden rectangle grid horizontally. You cannot create horizontal golden rectangles using a vertical golden rectangle grid and vice versa.
To create interface objects with golden rectangle proportions, lay the object over the grid and scale your object to match the same number of golden rectangles horizontally and vertically. The examples below show the number of horizontal and vertical golden rectangles in each grid. To use the grid, just click and save the image.
It’s important to remember that in order for the grids to work, you must have an equal number of golden rectangles horizontally and vertically, otherwise you won’t get golden rectangle proportions. When you use the grids correctly, you’ll be able to create beautiful interface objects with golden rectangle proportions. Below are some interface objects you can create using the golden rectangle grid. Use this knowledge to your advantage and start designing beautiful websites with divine proportions.
- Golden rectangle calculator: Get Ratio