Applying the Golden Ratio to Layouts and Rectangles

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

18 Responses to “Applying the Golden Ratio to Layouts and Rectangles”

  1. Gpapa

    Oct 22nd, 2010

    You 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, 2010

      Nice! 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.

  2. Jon H

    Oct 22nd, 2010

    Corel Painter has a Golden Rectangle guide tool.

  3. Rafalages

    Oct 23rd, 2010

    Hello can you make a post teaching how to use it in website layouts?

    thanks

  4. Herbert

    Oct 27th, 2010

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

  5. [...] From UXMovement: 1.618 is a number all serious designers should know. It’s known as the golden ratio found through­out 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. [...]

  6. Pavan Garre

    Oct 27th, 2010

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

  7. Rinat

    Oct 28th, 2010

    Hail, 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”!

  8. James

    Oct 28th, 2010

    I 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/

  9. Madhawa Habarakada

    Nov 1st, 2010

    thanks for the post. it is valuable.

  10. Manisha

    Apr 19th, 2011

    I 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! :(

  11. Rod Dunne

    Apr 26th, 2011

    The 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, 2011

      Thanks for the insight. Never heard of the Oglivy method before.

  12. jack

    Feb 13th, 2014

    Have you seen this? Debunking insane claims of the golden ratio.

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

  13. jack

    Feb 13th, 2014

    THERE 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!

  14. Edward de Leau

    Apr 15th, 2014

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

Leave a Comment