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.

Applying the Golden Ratio to Layouts and Rectangles

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.

Applying the Golden Ratio to Layouts and Rectangles

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.

Applying the Golden Ratio to Layouts and Rectangles

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.

Applying the Golden Ratio to Layouts and RectanglesGolden rectangle grid for creating vertical rectangles

Applying the Golden Ratio to Layouts and RectanglesGolden 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.

Applying the Golden Ratio to Layouts and Rectangles


Applying the Golden Ratio to Layouts and Rectangles Applying the Golden Ratio to Layouts and Rectangles

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

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

    • Radu

      Jun 6th, 2014

      @ Edward de Leau & jack:
      My friends I have watched the video of this wonderful “teacher”.
      He does not give any serious argument to his hypothesis.
      Basically he denies any deducted connection, because I do have to admit that we (the modern western scientific minds) have deducted the connection between ancient buildings and the golden ratio.
      But, this man does not admit deduction apparently.
      Also he bases all his arguments on the lack of physical, tangible evidence (like daVinci’s notes)….
      If anybody here is a bit of an artist they will know how many notes can be lost during one’s lifetime…(and I don’t even need this argument to prove the point)
      also about the modern architects: they are all trained to work in a very specific way, which has little to do with aestetics, especially in our outsourced/fragmented duties…architects nowadays (the vast majority of them) work on a tight schedule, for a corporation (majority of time), designing “toilets”…why do you think you have architects specialized only in a certain field…
      the system (educational, professional, healthcare, etc etc) was designed to fragment (systematize) the production (of learning, of products, of health etcetc) so that “more jobs can be produced” (and for better control) -> check the reason behind the creation of the standard educational system (clue: ants)

      in architecture there are many standards, and nowadays architects are more concerned about maximizing the “usefulness”/”productivity” of the patch of land – that’s what all employers want…actually the professor agrees with me on this one :)))) “only some clients have specifically asked for those proportions to be implemented” :)))

      also, main concerns in architecture today are: where do we put all the n fire hydrants? :O…where do we add the emergency exit :O….where are going to put the toilets (that’s a big one :)) )…the boss wants his office to be like this or like that, on that floor or the other…where do we add the lockers….

      and then u have “the Legislation” that comes along and rules out a lot of possibilities…because let’s face it: there is so much beaurocracy in the construction industry that it is hard to build something simple and elegant like back in the days….except if we’re talking about “cardboard supermarkets” boxes…those are pretty simple :)))

      besides all of this, how can u even compare Debussy’s productions with those of Mozart :))))))) I’m not saying he’s not a great composer, but seriously, this professor is undermining Mozart’s insights on music (of a genius, mind you) in favor of an “unknown” artist (among the classics) that “supposedly” only experimented with the ratio and with the sequence :)))))) c’mon I know u can laugh :))

      and besides all of this: (and I think everybody can agree upon this) -> the golden ratio and the golden sequence are just guidelines
      read my lips: GUIDE L I N E S !!! exactly, they just guide u, if u want to…if not, then it won’t…very simple….
      +
      the reason the ratio never reaches the exact phi ratio is because it is INFINITE (its job is to always be ahead of us :D)
      infinity cannot be pinpointed down…we do not have infinite buildings :)))

      now as u can see, this is the actual difference:
      listen to the professor (and the system) -> lock urself in legislation and all that nonsense

      listen to Anthony (and Pythagoras – fyi “the eggheads” we’re light years ahead of the professor’s understanding :D ) -> free urself from all artificial restraints and CREATE without boundries…
      simple as 1,1,2,3,5,8,13,21,34,55 :))) and so on and so on :))))))

      @ Anthony : Thank you! nice application of the DIVINE PROPORTION :D (the “divine proportion” was just to heat up some already boiling heads :)) )

      And always, the truth:
      “In the All we live and move and have our being”

  15. Userflow

    Jul 17th, 2014

    The golden rule is something I really like to apply in User Interface Design. It gives the user a easy look on the screen.

Leave a Comment