Understanding and Using The Golden Ratio In Web Design

Great web design these days is often the result of two things – usability testing and great aesthetics. If both of these facets remain true, for the most part a design will be successful.
However on the aesthetic side of things, creating a a clear, intuitive and user friendly design solution can be the result of many things such as grids, typography, consistent UI elements and well structured layout.
Nonetheless you still need to create a sense of order, structure, visual harmony and balance in your design and this is where things like the “Golden Ratio” or “Rule of Thirds” can come into play.
So you might have heard of these things right? Or maybe you’ve even seen a design that claims to use them – like this one here. I often consider terms like these as “design buzzwords” or “Duzzwords” if you will. These are things that people throw into conversations to make themselves look smart, when in reality their understanding of the concept itself is very much surface level.
So let’s clear a few things up and take a look at these two concepts and their practical use (if any) in web design.

---

What is The Golden Ratio and Where Did it Come From?

The all important Golden Ratio, arguably one of the most misunderstood concepts in web design and design in general. It’s difficult to say who “discovered” the ratio originally, however it’s been used throughout history for over 2400 years in everything from astronomy, science, painting, math(s) and architecture, to art, design, music, the pyramids and of-course nature.
The golden ratio is based on a relatively simple mathematical equation or sum which produces a ratio. As a visual representation in a straight line, in its most simple mathematical form, the ratio looks like this:

As you can see there is a unique ratio here which shares a relationship between the two sizes and proportions of the lines. As a decimal, the ratio of b:a is represented as 1.618033… when a > b. In the example above, if we assumed b was equal to 5 the golden ratio would be expressed algebraically like this:

---

Fibonacci Sequence

You may have heard of the Fibonacci sequence at some point, but what is it really and how does it work? Well, it’s a series of numbers where any given number is created by adding the two numbers before it. Starting with 0 and 1, the sequence goes 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and so forth. So:
1 + 2 = 3
3+2=5
3+5=8
5+8=13 etc..
Written as a rule, the expression is xn = xn-1 + xn-2.
The sequence is closely tied to the Golden ratio because if you take any two sequential numbers and divide the latter by the former, the fraction is very close to the golden ratio. As the number value increases, the fraction becomes even closer to the golden ratio. For example 8/5 is 1.6, 34/21 is 1.619 and so on.

---

The Golden Spiral/Rectangle

Ok so you’ve almost definitely seen this at some point or another right? But what is it other than a fancy piece of geometry that some designers randomly overlay on things without any actual meaning?
The “diagram” itself is called the ‘Fibonacci Spiral’ and is really quite simple. It’s often considered one of the most visually satisfying of all geometric forms.
The spiral is created by connecting a series of quarter circles drawn inside an array of squares based on Fibbonacci dimensions. In its most basic form the spiral/squares can be infinite, however it’s commonly presented from 1 to 34.
In the diagram below the squares’ dimension’s are relative to each other, so square ‘8’ is created by adding the dimensions of 5 and 3 and so on. If you’re a visual thinker like me, most things are better understood visually.

Furthermore, If you take one point on the spiral, and then a second point one-quarter of a turn away from it, the second point is Phi times farther from the center than the first point. The spiral increases by a factor of Phi.
The resulting spiral is found in all kinds of things from flowers and nature, to paintings and architecture.

---

Rule Of Thirds

The rule of thirds is a bastardized “idiot proof” variant of the Golden spiral and is often used in photography and video to crop frames to make them aesthetically pleasing.
To apply the rule, you simply divide an image into 9 equal parts by creating two equally-spaced horizontal lines and two equally-spaced vertical lines. The idea is to align the focal point approximately with the left most vertical divide. The horizon or ‘vanishing point’ should also run along the bottom most horizontal line. This avoids the image looking ‘split’ in half by the horizon horizontally or split vertically by a focal point.

Of course it doesn’t just apply photography. It can be used in poster design, web design, advertising, film etc…

---

An Example Of The Golden Spiral In Use

Visually, application of the golden ratio is often achieved by using the Golden Spiral, which as we discussed is a visual representation of the Fibonacci sequence, which is closely related to the Golden ratio.
Here’s a widely known example of its use in art on the Mona Lisa. In the example below, we can draw a rectangle whose base extends from the woman’s right wrist to her left elbow and extend the rectangle vertically until it reaches the top of her head, creating a golden rectangle. If we then create squares inside that Golden Rectangle based on the Golden Spiral, all the important focal points of the woman are on the edges of the internal squares – her chin, her eye, her nose, and the upturned corner of her mysterious mouth. The general ‘flow’ of the painting itself seems to follow the direction of the golden spiral.
It’s believed that Leonardo da Vinci incorporated many forms of the golden ratio into his work, as seen in the famous Vitruvian Man.

---

In nature, the Golden Spiral can be found everywhere from galaxies and flowers to hurricanes and shells, here are two examples:

---

Application In Web Design

A lot of designers make the mistake of thinking that by simply dividing or multiplying things by 1.61, they’re somehow creating a “Golden Ratio based design”. This is incorrect and is basically just fodder. You can’t just use the number randomly and expect things to somehow magically be proportional. There is a method to using it.
Likewise, there’s a lot of “non believers” out there that seem to think the Golden Ratio is some sort of myth. Actually it’s not, it’s simple math(s) and as I’m about to show you, it works.
Below is a simple wireframe based layout I’ve created specifically to demonstrate how it works. If you subscribe to our newsletter, it should look familiar. In terms of design, it’s based on our newsletter. However I’ve designed the entire layout and proportions from scratch to demonstrate how the golden ratio actually works.

Looks pretty simple right? Well actually it is! The design itself is based on a 960px layout with 20px padding either side. However the entire layout as I will explain is based on the golden ratio.
Using a single Golden scale which spans 960px across I set the height of the header, placing the logo along the spiral line. As you can see below, this then dictates the size of the image below the header.

Moving down the layout, I then used the same scale for the next piece of the layout:

---

I then continued to cascade my way down the layout using the same scale for the various other elements:

---

Because the layout itself is based on the Golden Ratio there are a number of proportional relationships within it which all abide by the proportion of a golden spiral and rectangle. At the bottom of this article, I’ve included a PSD file, which includes the design and the scale I used. You can then use it to measure things and see for yourself. Although there are way too many examples of the ratio in the layout to present properly, here’s a quick overview of just a few proportions.

---

Final Notes

As you can see, using the golden ratio in web design is not a myth at all. Infact it’s based on some relatively simple math(s) and is actually straight forward to implement. Usually I would use Illustrator or sketch for this kind of stuff, however I used Photoshop simply due to it’s wide use.
It’s important to understand there’s no rule of thumb when using it however. Although the ratio, rectangle and spiral are based on math(s), application can be subjective. For example, you need to consider what it will be based on when incorporating it into a design What are the important parts of a design that need to be focused on, logo, sidebar, header, navigation, images etc… Will you use it just for layout, or will you extend it into buttons, image sizes and text. There’s so many possibilities, hopefully this article has shed some insight into how it works though.
Go ahead and download the PSD to take a deeper look at some of the layout proportions or play with the scale yourself. You can rotate and flip the scale around as you like to see different proportions from various layout sections.

Download PSD