Web Design: the golden ratio

Tweet

If you are a fan of Lost (the tv series) you may know everything about Fibonacci and his sequence. You may have explored everything about the golden ratio and its relation with things in nature. You may now wonder what has the golden ratio to do with and how it is related to web design. Well, I won't get into a complete mathematical explanation of the golden ratio because it is not the reason why I wrote this post. The main point here is that the golden ratio has been and still is used and applied to achieve rational proportions and create pleasing aesthetics. The golden ratio has been and is used in architecture, painting, music and industrial design, you can find it in nature, and it has been used even in finance. With that in mind, it is easy to think that we can apply it to web design, in order to achieve pleasant layouts with the help of maths (because sometimes maths is beautiful).



PHI
Leaving all the demostrations to mathematicians, we can say that the golden ratio is an irrational number with infinite decimals. Its symbol is PHI (greek letter φ) and it is equal to 1.61803398874989484820... (keeps going, without any pattern). For our purpose, we can round up PHI to 1.618. Now, if we use PHI to divide our workspace, we can create pleasing proportions of it. If we need to divide our web safe area, for example creating a sidebar and a main container, we should use the PHI number. That will gives us a possible sequence of ratios to use in our web design.

An example

Let's say, we decided that our web safe area (as described in my previous article) is 849x507 (starting from a 1024x768 screen resolution), we can divide that area using the golden ratio and thus obtain the following sequence:

Px	%
849x507	100%x100%
525x513	62%x62%
324x194	38%x38%
200x120	24%x24%
124x74	15%x15%
77x46	9%x9%

The above numbers will determine how we can divide our layout, in pixels and in percentage. That will allow us to create a pleasant layout, dividing the area into smaller section. For explanation purpose, we can imagine to divide a 1024x768 area like:

But, as you may understand, we can do it with any size we like. The resulting areas are spaces where we can create containers for menus, sidebars, topbars, a company logo. You can apply the golden ratio to remaining undivided areas as well: for example you can further divide the lower right area, if you need.

Percentage or pixels?

I prefer to use percentage, because it is not strictly related to a fixed area. If you have read my previous article about web safe areas, you already know about possible issues related to fluid layout. Remember them when applying the golden ratio to your area.
It is clear that the above reasoning is indeed a general explanation. The golden ratio can be applied in different way, and to different section of your layout. If you want to understand how others used it, you can visit your favourite web sites, and try to see if the golden ratio has been applied to them. You will then discover that in many case, the golden ratio has been used to achieve a pleasant design.

The rule of the third

If the above explanation is too complicated (and for some designs might be), you can use a simplified rule called the rule of the third. When considering your working area, you can divide it into 9 equal parts by placing two equally spaced vertical lines and two equally spaced horizontal lines. You can then determine the most important points of your area, which are the points where the four lines intersect. Usually the upper left point is the strongest one, because people tend to follow an F shape when viewing things. We can then use those "strong points" as placemarks: there we are going to place the most important information, the objects we mainly want the visitors to see.

Ok, that is all. Please feel free to share your thoughts in the comment section below.