The Golden Ratio and Web Design
The Golden Ratio and Web Design
Web design is largely a matter of structure. Content is incredibly important, but without a coherent structure underpinning it all, a site is likely to be little more than a confusing clash of images and words. Understanding the basic principles of how to design a website that people will intuitively feel at home interacting involves learning how to use some basic elements of structural design.
When a web user clicks a link to a site, the first thing they see is the general layout. If this layout is not inherently and aesthetically pleasing to the eye, it is highly likely that they will bounce before finding out what the website has to offer.
Luckily, there are a few simple rules and formulas you can follow in order to make your website appear near-perfect.
The Golden Ratio
The golden ratio is a mathematical concept. This ratio consistently appears in nature – pinecones and a seashell show beautiful examples – as well as art, and is what humans subconsciously recognise as an expression of perfection.
The relevant equation can be written as this:
ab = a+ba = 1.618 (When a is larger than b)
With 1.618 being known as the ‘golden ratio.’
This equation can then be used to construct something known as the golden rectangle – this in particular is useful for web design.
To construct this ‘perfect’ rectangle, you need to:
- select a number to be the length of the rectangles shorter side
- Multiply this number by 1.618 (the golden ratio) and this will give you the length of the longer side of the triangle.
The result is a perfect rectangle that obeys the golden ratio, as shown below.
This is another mathematical concept that links into the golden ratio theory and is also useful in creating the ideal website. Leonardi Fibonacci is credited with introducing this number sequence to Western European mathematics in 1202, although it had been described in detail previously in Indian mathematical texts. The sequences’ strong correlation to natural processes and its applicability in fields as diverse as computer programming and musical composition continue to fascinate people to this day.
A Fibonacci sequence starts with 0 and 1. The previous two numbers are added together in order to provide the next number in the sequence as follows:
This links into the golden ratio concept very closely – if you divide any number by its preceding number in the Fibonacci sequence, the answer becomes closer to 1.618.
So how can these concepts be used in web design?
Determining text size for content and headers may seem a matter of judgement, but by following the golden ration the website can appear noticeably more appealing.
Firstly, decide on a size for your content text. For example, 14. Multiply this number by 1.618, and use the whole number closest to the answer as the text size for headers. In this case, 14 x 1.618 = 22.652. Therefore, size 22 or 23 would be the ideal text size for headers in this instance.
Firstly, decide on the size of your overall layout using the golden rectangle method mentioned above. The square created by the ‘a’ lines will be your content block. The small rectangle can be a side or navigation bar. Figuring out the width of your navigation bar is simple math.
For example – if your rectangle is 525 pixels (a) by 850 pixels (a+b) then b will be the width of your navigation bar. To find b, all you have to do it subtract a (525) from (a+b) (850) and your answer should be 325 (b). This then is your width.
Before we discuss content clustering, you must first understand what a Fibonacci spiral is. The Fibonacci sequence can be used to determine the size of tiles, in which each tile is built upon according to the sequence:
The spiral which can be made from this grid is shown here:
The theory is that the eye is drawn naturally to the centre of the spiral, and so content that is more dense should be placed here. Negative space and thinner content should be placed within the wider areas of the spiral.
By using the golden ratio concept, you are appealing to your viewers subconscious that recognises the layout you have used as being perfect – making them much more likely to read on and view your website in depth.
Have you used the golden ratio in your website layouts? Has it made a noticeable difference? Let us know in the comments below.
Bekah is a technology nerd who loves the latest gadgets. When she isn’t on the web she can be found reading. She writes for Greensplash Design