Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 Link

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 Proportion, “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 Proportions3

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 Blog4. The design itself is visually appealing, provides calm and supporting color scheme and has a nice composition.

5

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.

6

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

  • Phiculator7
    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 Tool8
    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 Link

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 Thirds9
This photograph demonstrates the principles of the rule of thirds. Source: Wikipedia10

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 states11 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.com12 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 Thirds13

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 Thirds14
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 Link

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 Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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 UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    cool! ;)

    -2
  2. 2

    M.Senthil Kumar

    May 29, 2008 9:04 am

    Useful tips for Beginner’s…
    From India-Chennai

    -4
  3. 3

    denhartenweg

    May 29, 2008 9:07 am

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

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

    2
  5. 5

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

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

    JeremieSpoken

    May 29, 2008 9:39 am

    hey thanks! been looking for this hehe

    -9
  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’

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

    Julius Orias

    May 29, 2008 12:33 pm

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

    -4
  19. 19

    Julius Orias

    May 29, 2008 12:34 pm

    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

↑ Back to top