# Applying the Golden Ratio to Layouts and Rectangles

by anthony on 10/21/10 at 5:36 pm

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 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 has 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.

**Golden rectangle grid for creating vertical rectangles**

**Golden rectangle grid for creating horizontal rectangles**

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

Gpapa

Oct 22nd, 2010You can create golden rectangle simpler by making first a square, then from the middle of the side draw a line to the opposite corner. Move the pivoting point to where the line begins (on the side of the square) and rotate down until is over the side of the square. Draw a rectangle over the square limit down by the line you just rotate.

image: http://imgur.com/8VqFe.jpg

anthony

Oct 22nd, 2010Nice! That’s a great way to do it if you don’t have the golden rectangle grid. However, the golden rectangle grid might make it easier since all you have to do is scale your object accordingly. Here you have to make a square, bisect it, make a rectangle, orient it at an angle and then create a big rectangle, which is a lot of steps. Nevertheless, thanks for sharing this alternative method.

Jon H

Oct 22nd, 2010Corel Painter has a Golden Rectangle guide tool.

Rafalages

Oct 23rd, 2010Hello can you make a post teaching how to use it in website layouts?

thanks

anthony

Oct 24th, 2010That’s what this post is…

Herbert

Oct 27th, 2010The new Twitter web design is also based on the Golden Ratio: http://goo.gl/5ssq

UXMovement: Applying the Golden Ratio to Web Layouts and Objects | Usability Counts | User Experience, Social Media

Oct 27th, 2010[...] From UXMovement: 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. [...]

Pavan Garre

Oct 27th, 2010fyi, google Chrome header is also designed with golden ration… for more info visit http://www.chromium.org/user-experience/visual-design

anthony

Oct 31st, 2010Thanks for sharing. I didn’t know that!

Rinat

Oct 28th, 2010Hail, Anthony! Thank you very much for this article. I’ve always known about the Golden Ratio and its usefulness for a layout, but you’ve also made it clear how to use the Golden Rectangles for creating “golden objects”!

James

Oct 28th, 2010I find the whole thing fascinating, and created a little tool (a long time ago now) to help people calculate numbers according to the ratio: http://www.thismanslife.co.uk/phiculator/

Madhawa Habarakada

Nov 1st, 2010thanks for the post. it is valuable.

Manisha

Apr 19th, 2011I would love to use the golden rule in my designs but it’s just not possible when working with standard advertising blocks that simply don’t transfer. Including an mpu within the content above the fold mean you always have to have a column to accommodate this that would look unbalanced if I made it 366px unless I made my gutters 33px…which would use up far too much space!

Rod Dunne

Apr 26th, 2011The ratio also has a close relationship to the Ogilvy ad layout, though his more broadly goes for

- 2/3 image

- 1/3 headline + body + link

or alternatively

- 1/3 image

- 2/3 headline + body + link

Don’t know if Ogilvy realized this when he defined his method but the similarities to the golden ratio are startling.

Great post!

anthony

Apr 27th, 2011Thanks for the insight. Never heard of the Oglivy method before.

jack

Feb 13th, 2014Have you seen this? Debunking insane claims of the golden ratio.

http://www.youtube.com/watch?v=4oyyXC5IzEE

jack

Feb 13th, 2014THERE IS NO SUCH THING AS “DIVIN PROPORTION” lol. It’s a myth. A joke. A totally useless waste of time. I can’t believe anyone would actually waste their time with it!

Edward de Leau

Apr 15th, 2014I assumed “the golden ratio” stuff was true for a long time. But now I actually found the whole golden ratio stuff is utterly nonsense , see: http://vimeo.com/88132964

NO: architects, painters etc… did NOT use the golden ratio in their works, never, NOT: not the egyptians, NO: Da Vinci stuff is also nonsense. Even utterly nonsense.

It was some kind of hype after Adolf Zeising published a book on the golden ratio in 1854. Before 1830 there is not even mentioning of it. Any statistical analysis on pyramids to any paintings reveal there is no such usages.

And no… humans do NOT prefer the golden ratio as more beautiful contrary to the folk legend.

And on top of that : that famous sea shell: it does not even HAVE the golden ratio proportions…….

Again see: http://vimeo.com/88132964 because Dr. Keith Devlin: http://www.stanford.edu/~kdevlin/ can explain this way better than me.