Applying the Golden Ratio to Your Web Designs

by on 19th October 2010 with 35 Comments

As web designers we have to take a lot into consideration when starting a project. One of the biggest segments working with layouts and systems to order spacing. Commonly designers will work with a grid-spaced CSS library but there are many ways to implement creative layouts.

Today we’ll be going over the Golden Ratio and how you can apply simple lessons into your design work. Most of the techniques discussed are applicable to a wide range of arts and design but we’ll be focusing on the digital aspect. Along with the Golden Ratio consider some other useful tools which can aid in the development of site layouts.

The Divine Proportion

The Divine Proportion is also known as the Golden Ratio. It’s a mathematical constant closely equal to 1.618 used to describe the ratio between two elements. This ratio has been used since the early Renaissance period when new age art concepts exploded onto the scene.

screenshot

Artists during this time period considered the ratio to be magical and hold mystical divine powers when integrated into design work. Hundreds of years ago this mostly applied to things like architecture, sculptures, and paintings, but today we can use these same techniques in our digital art.

The ratio is best described mathematically. It’s a bit confusing to understand at first but we can replace each variable used in the equation with actual numbers, just so things will start to make sense a bit more. We are only working with 2 variables – let’s call them a and b. Elements are working within a golden ratio when a+b/a is equivalent to a/b.

You can test this out with any values of both variables to see what you get. Ultimately you’ll want to end up with 1.61803398 (or just 1.618) as your answer. Since the proportions we’re working with are not set to a specific value we can assume any number of values equate to an equal proportion. This leaves our design work flexible and relative to size rather than sitting within a domain of absolute numbers.

screenshot

Mathematical Functions within the Ratio

An interesting trick is formed by working with just the ratio itself and variables out of our total system. Take for example the 960 grid system split into 2 columns. We don’t know how big to make each column to keep our layout within the divine proportions, but we do have enough numbers to figure it out.

960 (represented in units of pixels) holds our value of a+b. So we can divide 960 into 1.618 to obtain the value of our longer side, which is represented by our variable a. In this case 960 / 1.618 comes out to 593px.

Using this new information we can subtract 593 from 960 to get the width of our side column – 367. If we want to check our answer we can take 593+367(960) and divide it by our larger side value 593. Based on my calculations you should get a return value of ~1.618, exactly equal to our golden ratio. Ta-da!

This technique is essential when it comes to developing fluid layouts for dynamic websites. The divine proportion helps to keep things organized in the most organic, natural way. You can further organize your design into 3 or 4 column layouts if you wish. With that option you’d need to test out what exactly the look is you’re going for and what the total size of your layout will be.

screenshot

If you’re stuck on figuring out a fixed proportion for your site don’t sweat the small stuff. The divine ratio is only meant to guide you as a designer, not to force ideas down your throat set into using exact numerical values everywhere. As long as your design can hold it’s own weight and keeps an even feel throughout the page you should be okay.

As a general rule of thumb you can use the ratio 5:3 in place – although not exactly equal to the golden ratio it should provide results close enough to account for errors.

Outlining the Rule of Thirds

When optimizing your site layout things may not always come out perfect. This is the way of web design and there’s certainly no reason to follow exact guidelines here. The Rule of Thirds is almost a simplified “lazy man’s” way of applying a golden proportion.

It’s not going to provide you poor results or misshapen websites, far from it. But it is a laid-back approach to design ratios which many will find superior to exact calculations.

The rule states you can divide any mockup or piece of art into nine equal squares. This is accomplished by placed 2 vertical and 2 horizontal lines equally spaced into the entire image. The four points in the image where your lines meet are the “hot spots” for your website. Or put in general terms those areas should contain the most important user-driven content.

An interesting approach to this problem resolves dividing up each column into halves again. This gives you a grid evenly distributed amongst your site with proportions set across the board. In this way your top-left square will contain most of your site’s branding (logo, navigation, heading area…). Alternatively your top-right square may contain lesser important information split going down your site vertically.

screenshot

Focusing on each inner point in the site design can help you figure out where to keep headings, buttons, links, etc. To restate this isn’t a strict rule all designers must follow to keep their layouts in check. This is merely an ideology which has been applied to countless design principles and proven to work with complex website layouts. This is even easier to work with since Adobe design software comes with tools to enable grids in your files. How much easier could things get?

The Golden Rectangle

As the name suggests it’s possible to create a golden rectangle by applying the same ratio we’ve been discussing geometrically. The longer side of your rectangle should hold your longer value, or variable a, while the shorter side would represent your variable b value. This shape can also be applied heavily in design layouts and other pieces of graphics including logos and smaller icons.

These special pieces of geometry can guide you into figuring out just about any layout issue or element you may be fussing with. More specifically you can outline stock imagery or fancy Flash displays placed within your site’s home content. These rectangles can also be used throughout your footer or sidebar areas to mark off individual elements or widgets.

screenshot

Of course the most prominent use for this is in dynamic content. When placing photo galleries or works in a portfolio you should consider golden rectangles as your delimiter. E-commerce websites can do much better with this ratio in-tact by displaying products in not only rows but content-rich columns evenly spaced within golden rectangles.

I am not here to suggest every element on your page should be paved by golden rectangles. In fact there are plenty of considerations when it comes to alignment and grids to keep yourself aware of any design flaws you may be creating. This is just another tool in addition to the countless others used to create a beautiful layout.

Conclusion

We’ve scratched a bit deeper down past the surface of the Golden Ratio to figure out just how it can be implemented in modern design works. Grid systems can be finicky and working within the divine proportions allows both fixed and elastic layouts room to breathe and fall into place. You shouldn’t base your entire layout on these mathematical constants. But you can get a huge advantage by starting off in this sector and considering your website’s grid layout.

There are some amazing free grid templates available for download to aide during this process. These are great if you’re not confident jumping head-first into design proportions and want to work on some solid ground first.

Try applying these ideas into your next design and see how things turn out. Organic layouts and structures coupled with naturally powerful mathematics can make for one astounding website design.

Comments & Discussion

35 Comments

Comments & Discussion

35 Comments

  1. Imran Khan says:

    very interesting read!!! Thanks

  2. next do one on the 80/20 rule!

  3. Giacomo says:

    Nice article..thank..!

  4. Far too often the technology of the golden rectangle is applied – nice Article, thanks for the Grid Template. respects from berlin

  5. C.F. Action says:

    Interesting post… thanks! Cheers!~

  6. Phil D says:

    Here is a great photoshop ditty for
    creating almost every variation of golden ratio

    http://goo.gl/QWzw

  7. freshface says:

    Jake, the Twitter example is just the most wrong you could ever pick… I can’t understand how Twitter can now look much more confusing than Facebook when the core idea is just a bunch of 160 characters long messages. And the integration of the golden section there is pure nonsense, probably based on the designer’s desire just to have it there for fun, without a proper reason and without tons of user testing. This is an app afterall, the interface should create itself (no kidding) based on the inner elements, importance and interactions. And for the love of god, I can’t believe that the golden section just popped out there, all by itself.

    To stop my whining and bring something useful to the table, here is a much better example of golden section I’ve found a while ago (sry, don’t remember the source anymore), enjoy:

    http://bit.ly/bLrxRS

  8. Alessio says:

    It is a nice approach, but not “THE” way to go. Nice for prototyping, but as mentioned above, to take twitter as an example how a structured formula can’t help against “unstructured” ergonomy.
    However, interesting article though.

  9. StudioDino says:

    interesting…how about the gutenberg diagram or visual hierarchy… and how to apply it to designing a web site too.

  10. Stuart says:

    I studied this at college and it is a very interesting way to look at structure. I’m not sure it works in all situations but can be a good ‘device’ if used well.

  11. mindbleach says:

    In this article and its replies, pretentious people have all the answers, and also math. I want my ten minutes back you fucking eye rapist.

  12. eddy says:

    Very nice material.
    Much easier using the golden mean gauge as can be seen on http://www.goldenmeangauge.co.uk
    What do you think?

  13. Tony says:

    Maybe it is a sin to think this but I don’t believe that the golden ratio that golden and quite frankly is summarily overrated. It is my belief that you can get the same “magical symmetry” from non-symmetrical means or even grid based layouts.

  14. Edit says:

    Being a designer (interior field) I fallow the golden rectangle role naturally.
    The webdesign is my hobby and this is a very interesting approach.
    Thx for the info…

  15. PH Test : says:

    Digital art is a general term for a range of artistic works and practices that use digital technology as an essential part of t .

  16. Raaj Cena says:

    Nice Article,

    But In practicle Not fits to the earning with such website design idea. It seems to be search engine friendly but very hard to follow such rule. Being a web desiner I supose to have very clear about the search ideas linked with futue growth of my money?

  17. Shower Caddy says:

    sometimes i find digital arts a bit weird looking he he he, but of course they are very cool too `:~

  18. Andrew Mur. says:

    actually (a+b)/a = a/b
    not a+b/a = a/b

  19. Excellent աay οf describing, ɑnd fastidious article to take data reɡarding my presentation subject
    matter, ѡhich i am going to deliver in institution ߋf higher
    education.

Leave a Comment

Subscribe
Membership
About the Author