Applying the Golden Ratio to Your Web Designs

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 Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

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.