Graphic Design / Photography Inspiration Blog

How to Use The Golden Ratio in Web Design


Mathematics is art, as some people say. But for the everyday man like you and me, math looks more like boring calculus and numbers all over the place. But there is a deep connection between aesthetics and numbers – especially when it comes to the Golden Ratio.

What is the Golden Ratio?

The short answer is 1.62 (well, more precisely 1.618). The long answer is a bit more complicated. In math, two quantities are in a golden ratio when their ratio is the same as the ratio of their sum to the larger of the two quantities. Or, expressed in math: a+b/a=a/b=φ (phi). This sounds like being too mathematical to be applicable to art – but architects, sculptors and painters have used this ratio in their work for over two thousand years. And you should apply it to your website, too.

Golden Ratio

The anatomy of a website

All websites are built using the same basic components. They have a header and a footer, a main content area and a sidebar (or two), as well as content and white space. Building a website by applying the golden ratio to these elements will help you better focus your visitors’ attention to certain parts of the website, thus making it more appealing and effective. And perhaps even more beautiful – all works of art using the golden ratio are considered to be very appealing to this day.

How to apply the Golden Ratio to web design

For a great example on how a golden ratio layout could look like take a peek at the red flush casino website. The proportion between the header and the visible body, the main content area and the sidebar all reflect the golden ratio of 1.62.

How to apply it to your own website design?

The simplest way to start is to take your layout’s total width and calculate the golden ratio between the sidebar and the main content area.

Read also: 7 Advantages of Responsive Web Design

Let’s assume your total width for a layout is 1000px. The easiest way to decide how wide the sidebar should be is to divide 1,000 by 1.62. This gives you the ideal width of your main content area (618 pixels), as well as the perfect width for the sidebar (382 pixels). You’ll get a golden square (618×618 pixels) for your main content, and another one (618×382 pixels) for your sidebar. You can use the same ratio to calculate the dimensions of the top area of the sidebar (382×382 pixels, another golden rectangle), and continue to calculate the same proportions for the rest of the elements of the website. But you can apply the same ratio to your header and main content area, as well as the main content area and the footer of your website.

And make sure you at least try it – it is the perfect proportion, used not only by ancient artists and architects, but nature itself.

Leave A Reply

Your email address will not be published.

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.