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 topShare on Twitter

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 and loves solving complex problems in large companies. Get in touch.

Advertising
  1. 1

    cool! ;)

    0
  2. 2

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

    -1
  3. 3

    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’

    -9
  4. 4

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

    -1
  5. 5

    first!

    -38
    • 6

      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.

      -2
  6. 7

    M.Senthil Kumar

    May 29, 2008 9:04 am

    Useful tips for Beginner’s…
    From India-Chennai

    -2
  7. 8

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

    0
  8. 9

    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.

    4
  9. 10

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

    -2
  10. 11

    Very nice. loving it.

    0
  11. 12

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

    0
  12. 13

    hey thanks! been looking for this hehe

    -6
  13. 14

    I was talking about this over 2 months ago..

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

    -6
  14. 15

    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.

    -2
  15. 16

    great post

    -2
  16. 17

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

    -2
  17. 18

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

    -2
  18. 19

    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.

    -2
  19. 20

    Thanks alot for this interessting information

    -3
  20. 21

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

    -3
  21. 22

    This is a great tool, great job guys…

    -3
  22. 23

    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

    -1
  23. 24

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

    -3
  24. 25

    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 ^_^

    -3
  25. 26

    Good post, and thanks for the golden ration tools.

    -1
  26. 27

    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!

    -1
  27. 28

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

    -2
  28. 29

    gr8 post , looking for it man

    -2
  29. 30

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

    -4
  30. 31

    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
    • 32

      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.

      -3
  31. 33

    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!

    -2
  32. 34

    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…

    -1
  33. 35

    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.

    -3
  34. 36

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

    -3
  35. 37

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

    -2
  36. 38

    wicked!
    thanx guys

    -3
  37. 39

    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.

    -2
  38. 40

    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!

    -1
  39. 41

    Jennifer Kyrnin

    May 30, 2008 7:24 am

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

    -3
  40. 42

    Tyler @ Building Camelot

    May 30, 2008 8:24 am

    Now – are there any wordpress themes using this principle?

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

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

    -3
  43. 45

    Useful Post!! Thanks

    -3
  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

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

    -3
  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

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

    -3
  48. 50

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

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

    -2
  50. 52

    Really useful! Thanks a lot!

    -2
  51. 53

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

    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.

    -2
  53. 55

    very bad example. Demandware.com 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.

    thanks!

    -2
  54. 56

    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.

    -1
  55. 57

    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.

    -2
  56. 58

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

    -2
  57. 59

    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.

    -2
  58. 60

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

    -2
  59. 61

    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.

    -2
  60. 62

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

    -2
  61. 63

    Good article, thanks.

    -2
  62. 64

    Web Design Company

    June 5, 2008 8:11 am

    Wonderfull idea.

    -2
  63. 65

    Cool
    :)

    -2
  64. 66

    great article!

    does the design of demandware.com is free?

    where can i find it or someone similar?

    -2
  65. 67

    great article!

    btw does the design in on-demand is free?

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

    -2
  66. 68
  67. 69

    funny…
    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!

    -2
  68. 70

    1.618 is my lucky number.

    -2
  69. 71

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

    -2
  70. 72
  71. 73

    Good :)

    -2
  72. 74

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

    -2
  73. 75

    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.

    -2
  74. 76

    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: http://tinyurl.com/ottowagner
    Also there is an Art Studio in PA ( http://www.barnstonestudios.com ) 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 http://www.barnstonestudios.com and click the video – Pablo Picasso & The Golden Section.

    -2
  75. 77

    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 .. :)

    -2
  76. 78

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

    -2
  77. 79

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

    -2
  78. 80

    Gr8 post….

    Cheers

    -2
  79. 81

    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.

    -2
  80. 82

    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.

    -2
  81. 83

    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.

    -2
  82. 84

    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… http://goldenratiocalculator.com/

    -2
  83. 85

    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?

    -2
  84. 86

    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 (http://www.barnstonestudios.com/) 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

    -2
    • 87

      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.

      -2
      • 88

        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.

        -2
  85. 89

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

    -1
  86. 90

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

    -2
  87. 91

    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.

    -2
  88. 92

    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…

    -2
  89. 93

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

    -2
  90. 94

    Explained in very nice and simple manner.

    -2
  91. 95

    Are You guys Using THE DIVINE PROPORTION here?

    -2
  92. 96

    “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). ”

    630-31-31=568px

    “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. ”

    568/299=1.899

    0
  93. 97

    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?

    0
  94. 98

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

    -2
  95. 99

    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.

    2
  96. 100

    You should give a try to the “Golden Ratio Grid” at http://golden-ratio-grid.impossible-exil.info:
    “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).”

    -2
  97. 101

    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.

    0
  98. 102

    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

    -2
  99. 103

    Hi,
    look at this slider I’ve made thinking about the fibonacci proportion:
    http://www.al-tho.it/

    2
  100. 104

    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.

    2
  101. 105

    nice article on how to use golden ratio in web layout but Divine Proportion don’t work with bootstrap 12 column grid layout. around 40 to 50 px deference in actual Divine value. :(

    0
  102. 106

    Nice article but I have two questions :

    How do you calculate the right white areas between your content and the sidebar (the padding around the text) and how do you choose the right width for your container ? (in this exemple 690px)

    Thanks !

    0
  103. 107

    The golden ratio is a myth. You’ve actually stated things as if they are facts, when they aren’t. Here is everything you need to know about it, and what the truth is. The truth is, no one cares about it.

    http://www.youtube.com/watch?v=4oyyXC5IzEE&feature=youtu.be

    0
  104. 108

    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.

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

    -1

↑ Back to top