Applying Divine Proportion To Your Web Designs


Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous1 posts2. However, how can you achieve a clear and intuitive design solution? Well, there are a number of options — for instance, you can use grids, you can prefer the simplest solutions or you can focus on usability. However, in each of these cases you need to make sure your visitors have some natural sense of order, harmony, balance and comfort. And this is exactly where the so-called Divine proportion becomes important.

This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs. Of course, there are many possibilities. Hopefully, this post will help you to find your way to more effective and beautiful web designs or at least provide some good starting points you can build upon or develop further.

Divine Proportion

Since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio — especially in the form of the golden rectangle, in which the ratio of the longer side to the shorter is the golden ratio. The rationale behind it is the belief that this proportion is organic, universal, harmonic and aesthetically pleasing. Indeed, being evident everywhere in the universe (in fact, many things around us can be expressed in this ratio), divine proportion (which is also called Golden ratio, divine section, golden cut and mean of Phidias) is probably the most known law of proportion which can dramatically improve the communication of your design.

As Mark Boulton states in his article Design and the Divine Proportion3, “one of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should feel rather than create logically.” Hence, to comfort your visitors with a pleasing and intuitive composition it is often worth considering the Golden ratio. So what exactly is Golden ratio? Basically, it is a proportion 1.618033988749895 ≈ 1.618 which holds between objects placed within some context.

Divine Proportions4

Consider the example above. You would like to create a fixed width layout. The width of your layout is 960px. You would to have a large block for your content (#content) and a smaller block for your sidebar (#sidebar). How would you calculate the widths of your columns?

  1. First, calculate the width of your #content-block. You need to make sure that the ratio between this block and the overall layout width is 1.62. Hence you divide 960px by 1.62 which results in approximately 593px.
  2. Subtract 593px from the overall layout width (which is 960px) and get 960px – 593px = 367px.
  3. Now if you calculate the ratio between the #content-block and the #sidebar-block (593px : 367px ≈ 1.615) and the ratio between the container-width and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio.

This is the whole idea behind the “Golden” proportion. The same holds for fluid and elastic layouts, too.

Of course, a web design doesn’t need to be organized according to the Divine proportion. However, in some cases it can improve not only the communication of your design, but also improve further details of your layouts. As an example consider The 404 Blog5. The design itself is visually appealing, provides calm and supporting color scheme and has a nice composition.


However, the design does not correspond to the Divine proportion as you can see from the image below. Actually, users don’t necessarily feel it, because they intuitively split the layout in two separate blocks of the width 583px (630px – 31px – 31px) and 299px (330px – 31px). The reason behind it is that white space of the main area is passive (three columns, each 31px wide), it clearly supports the content next to it rather than being the content itself.

The ratio between the layout blocks is 630 : 330 px ≈ 1.91 ≠ 1.62, and the ratio between the content blocks is 583 : 299px ≈ 1.92 ≠ 1.62. The reason why the layout looks almost perfect although it doesn’t stick to the Divine proportion is the simple fact that it is balanced — both the layout blocks and the content blocks have the same proportion. Hence the design provides some sense of closure and structural harmony.

The interesting thing is, however, that due to a suboptimal layout length visitors are offered a suboptimal text length of over 90 symbols per line. However, an optimal number for comfortable reading lies between 60 and 80 symbols per line. The improvement of the layout would therefore lead to the improved readability of the content, too. That’s a useful side-effect of getting things done according to the laws of nature.


For some quick’n’dirty drafts you may use the ratio 5 : 3 which is not exactly the Divine proportion, but can turn out to be a useful rule of thumb in case you don’t have a calculator near you. Divine proportion usually provides bulletproof values one can perfectly incorporate in almost every design. When working on your next project you may want to consider using the following tools to calculate the widths “on the fly”:

  • Phiculator8
    Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.
  • Golden Section Ratio Design Tool9
    Atrise Golden Section is a program, which allows avoiding the routine operations, calculator compilations, planning of grouping and forms. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project.

The Rule of Thirds

Basically, the Rule of Thirds is a simplified version of the Golden ratio and as such poses a compositional rule of thumb. Dividing a composition into thirds is an easy way to apply divine proportion without getting out your calculator.

It states that every composition can be divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. The four points formed by the intersections of these lines can be used to place the most important elements — the elements you’d like to give a prominent or dominant position in your designs. Aligning a composition according to Rule of thirds creates more tension, energy and interest in the composition than simply centering the feature would.

Rule of Thirds10
This photograph demonstrates the principles of the rule of thirds. Source: Wikipedia11

In most cases it is neither possible nor useful to use all four points to highlight the most important functions or navigation options in a design. However, you can definitely use some of them (usually one or two) to properly place the most important message or functionality of the site. The left upper corner is usually the strongest one, since users scan web-sites according to the “F”-shape.

So how do you split a layout into 9 equal parts? Jason Beiard states12 the following method for applying the Rule of Thirds to your layouts:

  1. To start the pencil-and-paper version of your layout, draw a rectangle. The vertical and horizontal dimensions don’t really matter, but try to keep straight lines and 90-degree angles.
  2. Divide your rectangle horizontally and vertically by thirds.
  3. Divide the top third of your layout into thirds again.
  4. Divide each of your columns in half to create a little more of a grid.
  5. You should have a square on your paper that looks similar to the rule of thirds grid.

Let’s consider the following situation. Assume you have a layout of fixed width 960px. Consider the area above the fold which is likely to have the height between 750 and 950px.

  1. Divide the width of your layout by 3. In an example you get 960px / 3 = 320px.
  2. Divide the height of your layout by 3. In an example you get ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
  3. Each rectangle should have the size of 320px × 285px.
  4. Construct the grid of the rectangles described in step 4 by drawing lines going through the ends of rectangles.
  5. Place the most significant elements of your designs in the meeting points of horizontal and vertical lines.

Consider the design of demandware.com13 presented below. Although the design uses a number of vibrant colors, it is not noisy and seems to be both simple and clear. The navigation options are clearly visible and the structure of the site seems to be easy to scan.

Rule of Thirds14

However, if you consider the effectiveness of this design, you might find a perfect balance the design actually has. Indeed, it almost perfectly uses the Rule of Thirds as two out of four intersections of the lines (pink blocks in the picture below) contain exactly the information which the company wants its users to see — namely what the site is all about and an example of their work. Note also how perfectly the main sections are placed on the second horizontal axis. That is effective.

Rule of Thirds15
Rule of Thirds in use: two out of four intersections of the lines (pink blocks) contain exactly the information which the company wants its visitors to see.


In some cases, applying the Divine proportion and the Rule of Thirds may significantly improve the communication of your design to your visitors. Offering your users an almost natural balance in proportion 1 : 1.62 you literally impose the natural order on it and force your design layout to become more scannable and well-structured.

Using the Rule of Thirds you can also effectively highlight important functions of your site providing your visitors with a design they can easily work with and effectively delivering the message you want to deliver in the first place.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    Leon Paternoster

    June 2, 2008 3:46 am

    Using the ‘golden rule’ or dividing a text up into 9 sections might work for static texts such as posters, but there are too many factors that affect the size of flexible text such as a web page.

    Another problem is that this fad for grids will lead designers to make decisions about the organisation of their site that might not be appropriate. For example, if you’re following the ‘golden rule’ then you’re more likely to use at least two columns when one might suffice. More so if you’re dividing the page up into 9 sections (and placing elements in an absolute horizontal position is very difficult).

  2. 52

    Agree with Jason Beaird. One can hardly follow the rules of thirds and divine proportion ALL the time, but keeping them in mind will make you a better designer, indeed.

  3. 103

    very bad example. blows. it’s nice looking but the UI is bad. The Call to Actions are not clear. the top header navigation isn’t that great. Why do you think this site is a good example? please tell me. I know others do NOT agree with this as being good. Can someone shead some light on this please.


  4. 154

    Ryan Bollenbach

    June 2, 2008 5:01 pm

    I found this article to be extremely useful.

    I have heard about the rule of thirds in the past but never the divine proportion. I will definitely keep this in mind for the next website I’m creating.

  5. 205

    In terms of the “feeling” the harmony vs. the “logical” approach. To be on point or to be a master designer you have to be logical. The divinity nature of the Phi ratio (1.618) is that it “harmonizes” with nature. So you use it logically because only in its structure and precision will you tap into the frequency in which all things in nature have been designed. From the flowers to the university. The relational space between the roots to a trees branches to one plant to another even to the frets on a guitar. All are DESIGNED.

  6. 256

    I almost always enjoy what I read on this site. :)

  7. 307

    I’ve been reading up on the Divine Proportion in web-design for a while now, and though I understood it before, this article and your comment put it in perspective for me.
    I completely agree though, I’d love to see a ton of examples where Phi and the Rule of Thirds is put into good use.

  8. 358

    Audrey Viviana

    June 3, 2008 8:19 pm

    very interesting … i recently attended a short workshop on photography and had learned about this golden proportions and rule of thirds …

    it’s interesting in a way to see how these two concepts can actually be applicable to websites – even if to just serve as a basic guideline …

    i am learning to create my own website and will keep this in mind, thanks for sharing !!

  9. 409

    Well before every newbie starts following it religiously and every ‘mature’ designer takes person pride in refuting it. At least understand what it was. Yes, it’s scientifically proven, that number is what it is because of science.

    The greeks tried to figure our what looked best esthetically so they made shapes of all sizes and explored all ratios, and they, using their eyes, voted on what looked best. That number won’t make EVERYTHING MAGICALLY BETTER, but to humans, it looks ‘right’ or natural. and no amount of nay-saying can change that.

    You may use it in your work or composition or not, but I think it’s odd that of those designs that don’t use it, the most perfect ones are the ones that approach the Golden Section on their own, where among those designs that do use it, it’s hard to find a failure. Sure they may not be stellar, but it’s a good rule of thumb and it can’t possibly hurt.

  10. 460

    Richard Morton - Web Accessibility Auditing

    June 4, 2008 8:20 am

    I’m not convinced. These may be useful for inspiration and ideas but I think that the only real way to know if one design layout works better than another is through usability testing.
    The rule of thirds is very commonly quoted for photography but it is only a guideline and I have often found that the “rule” can be broken, and of course with digital photography it is much easier to include everything and crop later (bearing in mind compromising quality).

  11. 511

    Good article, thanks.

  12. 562

    Web Design Company

    June 5, 2008 8:11 am

    Wonderfull idea.

  13. 613


  14. 664

    great article!

    does the design of is free?

    where can i find it or someone similar?

  15. 715

    great article!

    btw does the design in on-demand is free?

    im searching for something very similar….does anyone knows something?

  16. 766
  17. 817

    about a year ago or so i looked up golden ratio on wikipedia. i though it might be interesting to use it on webdesign… now this :)
    guess my unique idea isnt so unique at all :D
    thx for the tips!

  18. 868

    1.618 is my lucky number.

  19. 919

    This was great. Definitely information you want to keep in the “front” of your mind when designing and developing a site.

  20. 970
  21. 1021

    Good :)

  22. 1072

    Ha! I’ve been using golden ratios before I read this. Still, it is good knowledge to have. Nice post!

  23. 1123

    Marcos said above that there isn’t scientific evidence that proves that the Divine proportion is better than any other proportion. But, there is a little property about the number phi, or as you call it Divine Proportion. Given the definition of irrational number, it is possible to prove that phi is the “most” irrational of all the irrational numbers. Obviously, we have to define an irrational number and also define what we understood by “most”, but that is another story.

  24. 1174

    I’m glad to see other website designers wanting to apply the power of the Golden Section. My concern is that most people on the internet that I have found only know the .618 part of the Golden Section. Since they have not read or be trained in the use and practices of the Golden Section.

    This tutorial heads in the right direction but has much more to go.
    Tip … When dealing with the PHI ratio .618 or any Golden Section rectangle you have to respect the “Rectangle”. If the width is 960px wide and 593px is your .618th measurement and 367px is your .382th measurement then you need the height of the rectangle to be exactly 593px high. Now you have a Golden Section Phi ratio Rectangle. If you change the high (like extendable website do) then you need to change the width according – if you don’t you will not have the Phi 1.618 Ratio any longer and therefore your not using the Golden Section (of that rectangle.) This become tricky for a web designer working on a dynamic website. It’s much much easier to engineer a great design for an illustrator, painter, architect or for a web site designer dealing with a static design.

    I look to the drawings of architect Otto Wagner you could also look at the drawings of Frank Loydd Wright or the paintings of Gustave Klimt… because they composes with different Golden Section rectangles on top of each other. And like module based website such as Joomla sites this can works very nicely with some code tweaks.

    Here is a some examples Otto Wagner:
    Also there is an Art Studio in PA ( ) that has trained artists in the practices of the Golden Section for the last 30 years. There you can find Video Lectures, Podcasts with past students and over 1700 images of power artwork and articles on the use of the Golden Section : goto and click the video – Pablo Picasso & The Golden Section.

  25. 1225

    dinesh singh rawat

    January 20, 2009 10:51 pm

    I loved this post, although I knew few rules but the way you guys explained here is really easy to get. (Proving the first law of usability: Don’t let user think :) ).
    Great one
    Thanks .. :)

  26. 1276

    dinesh singh rawat

    January 20, 2009 10:58 pm

    Hi! I’m looking that few people are criticizing the post. I admit their views, everyone has their own level of knowledge. And I must say that there’s no harm in learning the rules either for design or something else, they always help in some way. Use them where you need or use your own where you don’t need. Simple guys!!!!

  27. 1327

    Cool! Didn’t know that the Golden Ratio could be used in web design. Am gonna try it out on my website.

  28. 1378

    Gr8 post….


  29. 1429

    All this fawning over the use of a system which was designed for static proportions in geometry. Basically boils down to “looks pretty”, “I can do THAT in CSS” and “I’m not a coder, I’m an artist! look! see! An Artist!”.

    The golden proportion, no matter how many straw men are flung at it, is not meant for communication of anything but aesthetic. How can a golden section be justified for Japanese textual content, or content that is displayed on a device with a 90×120 screen area, or content that scrolls? And how does it consolodate multiple viewpoints to nonrelated images?

    Interfaces, specifically web designed, (and also like game design, while we’re at it) is stuck in the unholy aura of other media and needs to get some cohonas.

    Computer interface art will have its davinci’s and boticellis, but going by the excessive fan boi-ness of most of the comments on this and most other web design “best practices” pieces we’re going to be waiting a long while yet.

  30. 1480

    It’s great to think about this topic – but I would not like to have the template above for free.

    In photography I love the golden ratio! But in this example (and many other blogs) I don’t like it.

    In this example the golden ratio shall be the place for a border of dark and bright parts. The dark part is used for the navigation – which generally should not be the main content of the blog, but more a supportive part.
    As dark parts appear more intense anyway, through its size of ~3/8 it becomes such intense, that it catches my attention and I first look there and need several seconds to look at the content. That’s why for many blogs I don’t see the advantage in using the golden ratio. The navigation simply gets too intense, angles for my attention. I’d rather say that a smaller navigation would center the content more and therefore would better guide the attention there.

  31. 1531

    Some people want to tell others what to do. Some people want to be told what to do. Decide which camp you’re in and act accordingly. Me? I want contemporary web design to be less formularised, less templated, less constrained by rules. And so do clients. So, break out from all these constraints and see where you end up. The divine rule, (and other ‘rules’) in my opinion, has absolutely no rlevance to screen based interactive design. Web design is a new medium so ‘go boldly …’ etc etc. But that’s my opinion.

  32. 1582

    I’ve been using another golden ratio calculator for a while already.
    It’s the one created by “Design By Ninjas”, doing the trick nice and easy.
    Strange that no one mentioned this one before…

  33. 1633

    thanks for sharing, i do have a few questions though.

    a) how do i apply the golden ration corectly? &
    b) how do i (re)balance the golden ratio?

  34. 1684

    Hey, great article… the Golden Section is an excellent tool, in the right (conscious) hands, of course… it is thoroughly taught and used at the Barnstone Studios ( where I spent many years as a student… We were taught a far more simple way to set up the Golden Rectangle: draw a square based on the height your (landscape) rectangle is to be. With a compass with the point set at the lower left corner, and the lead set at the opposite corner, scribe an arc down to the horizontal (base) line, extended. From that intersection point, draw a vertical line the same length as the height of the square. Extend the top horizontal line to meet the vertical line and VOILÀ, you have the Golden Rectangle. No calculator needed!

    ~ Gene in Bethlehem, Pennsylvania

    • 1735

      It doesn’t sound like you were taught correctly. You are designing according to the proportion 1:sqrt(2), not 1:Phi. That is another common design theme, which I find often gives a more pleasing rectangle than 1:Phi, especially when in portrait mode. Geometrically, sqrt(2) is simply the diagonal of a square.

      Phi is 1+sqrt(5)/2 and is constructed by putting your compass point at the center (not the left corner) of the base edge of your square and the lead at the upper right corner and drawing the arc to the base line. Then you can draw a vertical and join up at the top. Geometrically, the vertical still represents 1, and you’ve constructed 1+sqrt(5) at half the size of that (thereby dividing by 2) by putting your point at the center of the base of the square (at 1/2). sqrt(5) is the diagonal of a rectangle twice as high as it is wide, which happens to be the the same as the right half of your square.

      • 1786

        Gene was taught correctly — it was just 60 years ago – so he may get a tiny cloudy. :) Sorry Gene. David you are correct – what Gene describe is a Root 2 rectangle — often used to compose portraits. Instead of running the archs from the bottom LEFT / top right corner… you need to run the arch from the bottom CENTER / top right corner of the square. That will give you the Phi rectangle.

  35. 1837

    You did not show examples of perfect proportion. You commented on badly designed sites.

  36. 1888

    does this apply to lunch? is a perfect portion 1.618 or should i just eat a third of it?

  37. 1939

    Applying this ratio in new creative ways will make your work stand out. Instead of utilizing it horizontally try vertically and break it down into sections that flow harmoniously with the content of your site.

    I would have to agree that templated designs hold no aesthetic value, they are like coloring books or connect the dots. I appreciate websites that have taken thought into its design to match its content.

  38. 1990

    professional artist

    April 26, 2010 6:48 am

    This is short minded stuff of logical-mathematical intelligence biased people = is disconnection from holistical mental functionality (emotions). Makes no sense. You seriously think that the world is made from formulas (absolute truths) that can be ran through our logical mathematical intelligence ? Wake up, it’s time for some zen. The world is not math, semantics, symbols, recordings etc…

  39. 2041

    Found this article today in my bookmarks and it really helped me. Thank you!

  40. 2092

    Explained in very nice and simple manner.

  41. 2143

    Are You guys Using THE DIVINE PROPORTION here?

  42. 2194

    “Actually, users don’t necessarily feel it, because they intuitively split the layout in two separate blocks of the width 583px (630px – 31px – 31px) and 299px (330px – 31px). ”


    “The ratio between the layout blocks is 630 : 330 px ≈ 1.91 ≠ 1.62, and the ratio between the content blocks is 583 : 299px ≈ 1.92 ≠ 1.62. ”


  43. 2245

    Did I miss a math class?

    630 – 31 – 31 = 568. Not 593 or 583. These numbers seem a bit illogical.

    960px / 1.618 = 593
    593 – 31 – 31 = 531 (content div)

    960 – 593 = 367
    367 – 31 = 336 (sidebar div)

    But actually I believe it would look more uniform if the middle gutter were split among the two DIVs, it should be…

    593 – 32 – 16 = 545 (content)
    367 – 16 – 32 = 319 (sidebar)

    It doesn’t have to be 32, as long as the number used is divisible by 2. e.g. 20 or 30. 31 /2 = 15.5.

    Or am I taking crazy pills?

  44. 2296

    The principle of thirds keeps a website professionally in order and user friendly. When I built my website at, this is the principle that we used.

  45. 2347

    I hate to be the one to disagree, but using either the rule of thirds (2:1) or the golden ratio (1:0.618) to naively divide your browser window as you advocate with the 404 blog window will lead to overly large sidebars, as your example so ably demonstrates. Sidebars tend to clutter the window of most inexpertly designed websites and the rule of thumb should be to eliminate them whenever possible, not let them dominate with an arbitrarily large portion of your design space.

    Secondly, the best way to use the rule of thirds is in conjunction with another rule to create a more dynamic composition. Combine a landscape rule of thirds with a portrait rule of fifths, for instance. This, by the way, also implements a subtle reference to Phi because 3 and 5 are sequents in the fibonacci sequence that converges on Phi.

    Thirdly, I think the demandware site could be greatly improved. The background photo of the human should be larger and cropped closer horizontally to include less background and cropped looser vertically to include more detail. It would be nice to have enough detail to identify the gender of said human. The center headline does not need to be in a distracting black box. A more transparent gray that allows some detail from the photo to show through would be a huge improvement. Moving the logo to the center and right justifying the text of the headline would be a further improvement because it would not only put the logo in a more prominent position relative to the rule of thirds, but it would also lend variety. (There are three logo-like images in the composition, all to the left of associated text like overgrown bullets.) Finally, black is not doing anything for me as a frame color for the photo. A color should be chosen that compliments the photo, probably selected from the background thereof. Alternatively, a transparent gray could be used effectively to allow the photo more room to breathe. This would repeat the transparency introduced behind the headline, and it is always good to design features in pairs and thirds to establish a design theme.

    Whatever you do, remember that you are not designing a static medium, like a painting. Your user has a browser and a machine that you have no way of predicting, and the more you try to rigidly control it, the less successful your design will be. You have to remember to make your design flexible enough that it flows into the space provided for it without resorting to horizontal scrolling as your first priority. You cannot predict whether your user is allowing you a width of 800 pixels or 1600, or even outside that range. And you don’t even know how big a pixel is on her machine. Unfortunately, there are an abundance of amateurish designs from even fortune 500 companies that break this first and most basic rule of good website design.

    Secondly, and a big surprise for many neophytes, judging by the websites I see, is that content is king, and both navigation and tag-along features such as advertising need to be reigned in rather firmly. Allowing a huge stripe of either the left or right side of the user’s display to be filled with distracting widgets and spinning logos from sponsors detracts from your design. It matters not that the divisions are made using “nice” proportions like Phi. That is space you should be using for valuable graphic content to illustrate the points of your content, not squandering on distractions.

    Enough said for lesson 1.

  46. 2398

    You should give a try to the “Golden Ratio Grid” at
    “The Golden Ration Css Grid is actually not a grid : it do not provides you columns and rows, but only widths and heights (and maxwidths and maxheights) to use on your own columns and rows, and those widths and heights are build following the Golden Ratio (phi).”

  47. 2449

    Sorry, I don’t buy it. Maybe this made sense back in 2008, or maybe it makes sense only for main images, but to apply this concept through-out the site just seems like an unnecessary constraint.

  48. 2500

    Great refresher for me. I haven’t designed from scratch in ages and it helped get me back on track. I usually cookie cut and build off templates because I got lazy.

    Just one question… does the smashing magazine site follow this golden rule? Is the menu just a golden proportion inside a section of another golden proportion? If not, it still looks good, but I’m just trying to wrap my head around it through example… lol

  49. 2551

    look at this slider I’ve made thinking about the fibonacci proportion:

  50. 2602

    Thank you for the information in the article, it’s very interesting, a must-read for every designer, I have just started and this helps me greatly.


↑ Back to top