Applying Divine Proportion To Your Web Designs

Advertisement

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.

6

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.

7

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.

Summary

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.

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  2. 2 http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  3. 3 http://www.markboulton.co.uk/journal/comments/design_and_the_divine_proportion/
  4. 4 http://www.smashingmagazine.com/images/divine-proportion/divine.gif
  5. 5 http://404uxd.com/
  6. 6 http://404uxd.com/
  7. 7 http://www.smashingmagazine.com/images/divine-proportion/404full.jpg
  8. 8 http://www.thismanslife.co.uk/phiculator
  9. 9 http://www.atrise.com/golden-section/
  10. 10 http://en.wikipedia.org/wiki/Rule_of_thirds
  11. 11 http://en.wikipedia.org/wiki/Rule_of_thirds
  12. 12 http://www.sitepoint.com/article/principles-beautiful-web-design/3
  13. 13 http://demandware.com/
  14. 14 http://demandware.com/
  15. 15 http://demandware.com/

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

Advertisement
  1. 1

    cool! ;)

    -1
  2. 2

    M.Senthil Kumar

    May 29, 2008 9:04 am

    Useful tips for Beginner’s…
    From India-Chennai

    -3
  3. 3

    Awesome. Thank you for this insights. I alway make proportions by my feeling ;)

    -1
  4. 4

    Thanks great article and really well written and easy to understand. To use grid is truly one of the most important things in a great design.

    1
  5. 5

    good stuff… again… will keep in mind for next design.

    -5
  6. 6

    Very nice. loving it.

    -2
  7. 7

    Golden proportion is probably the most overrated (thanks to its name) concept in design. It remains a guideline and not something that you should apply blindly.

    And no offense SM (I love your articles) but this demandware example for the rule of thirds is just bad. The intersections highlighted here have no impact on clarity nor “leading the eye”. The example doesn’t even apply to a real case because the vertical area for content scales with browser size. The other design concepts (colors, contrast, emphasis, etc.) have far more influence on leading the eye than the rule of third (on this design).

    That being said, the picture has a fixed size (you would not show a part of the picture, but all of it – unlike web designs where users have to scroll) so the rule of thirds is much more applicable. It is certainly a good application of it, but many other factors come into play as well : the colors (orange/blue complementarity + black/white), contrast the shape of the clouds, and the “trailing” part of the tree, to name a few.

    To sum it up, I think a showcase article on examples of nice divine proportion applications could have been nice, but attempting to teach it in such a short article is nothing more than mystifying those who ignore the “rule”.

    -4
  8. 8

    *mystification of the common beginner mind, I should say.

    -3
  9. 9

    hey thanks! been looking for this hehe

    -8
  10. 10

    I was talking about this over 2 months ago..

    There isn’t scientific evidence that the divine proportion is better than other proportion system.

    -10
  11. 11

    Cool article. I think thet could be a part 2 to it with more examples.
    I have an old copy of the Divine Proportions book from Luca Pacioli… and always try to keep that kind of things in mind when designing… it gives clues and ideas and provide solutions to certain design problem we may be facing.

    -4
  12. 12

    great post

    -3
  13. 13

    Nice, I always wondered what or if there was a standard people were using a lot…

    -3
  14. 14

    That’s silly. Every site would look the same if they all used the ‘golden ratio’. No one notices that, I think there are more important elements of design than a arbitrary ratio. This is just trying to apply some rules to what designers and artists simply see as: ‘knowing what looks good’

    -10
  15. 15

    good article, thank you, I was looking for more about this, hope will be a second part of this :)

    -3
  16. 16

    Demandware, when i saw the image i thought, nice design.Then you got the raster out, rule of thirds, 2 points straight on!
    So our eye should be guided into the right direction.
    But oh god when you click on it, all the nice rules, ideas, rule of thirds they get blasted away by this HUGE flashing center text, with stock photo’s fading in and out. I’m no pro but in my opinion this site went from beautiful to horrible.

    -3
  17. 17

    Thanks alot for this interessting information

    -4
  18. 18

    This is a great tool for everyone..great job guys…

    -4
  19. 19

    This is a great tool, great job guys…

    -4
  20. 20

    Awesome post. That will give me something new to try with my next design – Thanks!

    -4
  21. 21

    The word “however” appears 8 times in the article. That’s quite a lot. However, it doesn’t appear to be too many. ;-)

    -1
  22. 22

    Questi sono concetti che un grafico editoriale acquisisce nei primi anni di formazione. Si parte SEMPRE dal formato per determinare le dimensioni delle colonne di testo e della gabbia, la griglia, eccetera.

    Comunque è sempre bene ricordarle certe cose ^_^

    -4
  23. 23

    This has been one of the most interesting and compelling articles I’ve read on Smashing Magazine so far. While this rule isn’t always practical to apply to web designs (especially when considering blog design) it’s certainly given me some food for thought :)

    Thank you for this insight!

    -2
  24. 24

    feels like my fundamentals of design class all over again :)

    -3
  25. 25

    gr8 post , looking for it man

    -3
  26. 26

    first!

    -38
    • 27

      Remember what the Bible says: the first shall be last and the last shall be first!

      I’ll be kind at this point and add a bit of content so your victory remains recorded.

      I notice that the picture of the tree at sunset would actually be more powerful if the photo was cropped to eliminate about half the sky. (Crop about the 1/3 horizontal line, just above the treetop.) The sunset is quite lovely, but the details are concentrated below that line. As cropped, the photo has a square aspect ratio which fights against the natural feel of the photo, which is panoramic. A 2:3 ratio favoring the landscape direction would enhance that panorama rather than fight it. One might even go as wide as 2:4 or 2:5 if the original had that much extra material on either side.

      -3
  27. 28

    Did you guys saw the episode from south park where a lawyer was using the cehwbaka defense to win a trial. That’s exactly what you guys did. You used a simple logicaly remarc to justify something that’s not entierly usefull. I’m just wondering why 1.618. I usually partition my designs acording to the client’s needs. And i prefer 550px (main column) 40px (margin) 310px (sidebar).

    -5
  28. 29

    sandie sørensen

    May 29, 2008 10:56 pm

    Devine proportions is not about the exats size of the webpage. Instead it is about at grid, you can use in your design, that is hamonic in an unconcious sort of way.
    Its a magical proportion that calmes the eye. The number is represented numerous times i nature (hence the name: Devine proportions-God made it! If you believe in that…?) For examble the “math behind” snails twists in their snailhouse.
    The Fibonacci numbers are also closely related to “the golden lines” as we call it in Denmark. :)
    Da Vinchi also calculated, the the devine proportions have something to do with the way we humans look:

    http://bit.ly/z207z2

    -2
  29. 30

    Good post, and thanks for the golden ration tools.

    -2
  30. 31

    I already used the divine proportion and the rule of thirds, but I have to say your article is very clear, and good explanations are never enough!

    Great work!

    -3
  31. 32

    Great post as always!

    Just a thought… By using a design width of 960px surely you immediately break the rule? Wouldn’t a 100% width design with a 62% (61.804…) to 38% width proportion be more appropriate? Therefore adjusting the design to suit the users screen resolution…

    -2
  32. 33

    I have never heard of “Devine Proportion” before but I have used the idea before without knowing its terminology. As a designer, you definitely need to feel the harmony of items on your design rather than placing it logically. But sometimes, logical placements of items on the design make sense too. I hope that made any sense.

    -4
  33. 34

    Unlike the majority of designblogs you provide knowlege instead of unreflected ime-so-hot-right-now bullshit. I like that.

    -4
  34. 35

    You may have a look at this article, very interesting and complete but in french.

    -3
  35. 36

    wicked!
    thanx guys

    -4
  36. 37

    Vitaly Friedman & Sven Lennartz

    May 30, 2008 2:35 am

    @Neil Skirrow: you are right. Fixed width layout was used only as an example. But you can apply the Divine proportion to fluid and elastic layouts, too.

    -3
  37. 38

    I was reading this excellent article and then I saw my name in there! Thanks for the mention, guys!

    The word “however” appears 8 times in the article.

    I know from experience that it’s pretty hard to find examples of design (even in my own work) that perfectly apply divine proportion. The same is true about examples of perfectly matched color schemes. The funny thing about design principles and color theory is that while being aware of them will make you a better designer, you shouldn’t always follow them verbatum. For me, they’re a great starting point and troubleshooting tools, however rules are always made to be broken. ;) Great post, as always!

    -2
  38. 39

    Jennifer Kyrnin

    May 30, 2008 7:24 am

    Good overview of an important design concept that is often forgotten!

    -4
  39. 40

    For those who don’t understand what this is, let me try to explain. The Golden Ratio (http://en.wikipedia.org/wiki/Golden_ratio) is a ratio that produces rectangles of equal aspect ratio but of different scale, forever, starting from a base rectangle. It is “a” compositional strategy, not “the” compositional strategy and I think that as designers we have an obligation to understand what the strategy is and what it is trying to solve.

    I have seen people diagramming how this ratio is found throughout nature, architecture etc. Sometimes it seems to be like the “Number 23″ (Jim Carrey movie) and arbitrary.

    My argument for not bashing it is that it is just a rule and an attempt at clarifying composition. I like when people give me design rules because it gives me a starting point. Many great musicians, artists, scientists actually had an education in the rules of their profession and it confuses me when people try to scoff at people showing rules and strategies. By knowing more about the rules, you are able to intelligently break them and have more control over your own output rather than accidentally making something wonderful (or not).

    Sorry for the rant. I’ve gone through a tough semester of being criticized by teachers who are expecting me to produce great new things without actually teaching…

    4
    • 41

      I can relate. I went to an architecture school at a major university in the United States (which shall remain nameless) that never once mentioned any classical rule of composition or aesthetic consideration whatsoever. Classical orders were not taught. No historical styles were taught. It was a travesty. Architecture without architects was the fad of the day and we “studied” sheds and other folk structures built by the unschooled. (I kid you not!) Fortunately, I decided to change majors after two years so I only ended up with a worthless minor in architecture and a useful major in computer science.

      -4
  40. 42

    Tyler @ Building Camelot

    May 30, 2008 8:24 am

    Now – are there any wordpress themes using this principle?

    -4
  41. 43

    There are many Websites out there using the golden ratio, not exactly but approximately. There are many Designer who use it without knowing about it. This article shows very well how you can work with it and what the advantages are.

    One word to the golden ratio:
    3:5 is a good rule of thumb, but you can go further. The summation of 3 and 5 is 8, which is the next number in the sequence that is called “Fibonacci sequence”. The next higher number is always the summation of the last two numbers in the sequence. So the next numbers are 13 (5+8), 21 (8+13) and so on. All these pairs of numbers have approximately the ratio 1.618, which is the golden ratio.
    So, what can you do with it. For example, you can divide your page into a grid of 21 sections. Then you can build two columns, one with 8 and one with 5 sections. First you have your page divides by the golden cut, second you can use the remainig sections for the grid within the two columns.

    -1
  42. 44

    Excellent! Thanks so much for the tutorial…I was able to use the divine proportion at work today. It transformed a “blah” ad to something much nicer looking. Cheers!

    -4
  43. 45

    Useful Post!! Thanks

    -4
  44. 46

    Great post,

    Just one thing; When you talk about the rule of thirds, then is it not somewhat necessary that the whole page/design has to be visible in one go ?? On the DemandWare website, although the first intersection point is visible straightaway, but to get to the second intersection point that you mentioned about, I have to scroll down the page; which then effectively places the shiny orange button in competition with it. And, due to the brighter color, the orange is more visible to the user (at first go)

    I’m new to this, so I might be incorrect. Just an observation

    :)

    Thnxs

    -4
  45. 47

    Vitaly Friedman & Sven Lennartz

    May 31, 2008 1:54 am

    @Tyler: yes, Information Archites offer an “Ideal” WordPress-theme which is based upon the Golden Section for free download: The Ideal WordPress Theme.

    -4
  46. 48

    very interesting, especially for me that I have a website focused especially on this aspect.

    You may like to take a look at my site Lab 1,618 and find out some more things about this subject

    -4
  47. 49

    960 pixels definitely seems like the right size for any website (that should be displayed on a 1024×768 res), because it factors into so many numbers. This article reminds me a lot of http://www.960.gs which uses a grid to break down the 960 layout into 12 or 16 chunks, and then grouping the chunks to create completed (if somewhat arbitrary) columns.

    -4
  48. 50

    smashing article as always. Web development just gets more interesting with this website

    -3
  49. 51

    Peter Pocklington

    June 1, 2008 11:53 am

    This article (and example site) don’t make sense—the dividing-up of the sample layout using the “divine proportion” rule doesn’t support the articles claims at all.

    Most designers will agree I would think: this “golden rule” comes from the gut, eye, and brain. You either naturally have the ability to balance layouts, or you don’t. You can learn, but nothing will replace your gut instinct as a designer.

    These rules don’t apply to the millions of possible variables that exist with design for the screen, browser, and web.

    -3
  50. 52

    Really useful! Thanks a lot!

    -3

↑ Back to top