Some general layout thoughts

The styling of a website is not just the looks, it is much more
than that. It is the thing that makes the visitor feel
comfortable, the thing that will make him subconsciously love it,
make him feel like home.

Perfect design is the one that is subtle and helps the
visitor use the website and not just admire it.

Let’s see for example a news site. Visitor should not spend time
looking your delicious gradients and your sexy rounded corners on
every element. He should spend him precious web-time reading the
valuable content. We must help him find as fast as possible what
he is looking for. Help him read as many articles as possible.
Make him stay more. Transform the first time visitor, into a
loyal fan.

To achieve all these we must offer harmony and uniformity in
every element of our page, even in the small and less important.
The summary of is going to give us the desirable result.

Harmony. A word that sounds so beautiful, like its own meaning.
But how is it possible to achieve it in every place of our layout
design? “Golden Ratio” is the answer.

But what is exactly the “Golden Ratio”. Let’s see how wikipedia
explains it perfectly: In mathematics and the arts, two
quantities are in the golden ratio if the ratio between the sum
of those quantities and the larger one is the same as the ratio
between the larger one and the smaller. The golden ratio is a
mathematical constant, approximately 1.6180339887

The use of this analogy should be catholic in a site, in order to
get the absolute harmony.

Making the ratio work for us

So let’s see some way we can use it in our layout.

At first we must begin with our basic containers. In a simple
example we can apply the analogy into the only divided container
is the content (main and sidebar). Because we cannot play with
the height of these elements, we have to focus only in the width.

Let’s say for example that our page width is 960 pixels and we
want to divide this using the golden ratio. Our main-content will
be 960 / 1.62 = 593 pixels and our sidebar 960 – 593 = 367
pixels.

Now that we found the analogy of our basic columns, it’s time for
the basic typography. My proposal for some relationships:

• line-height = font-size * 1.62
• paragraph margin = paragraph line-height * 1.62 / 2
• header’s margin-top = headers line-height * 1.62

Having this logic in mind we can solve any sizes or analogies
problem that comes along.

Another example is inside the form elements, where the input
width = label width * 1.62

The same ratio can be present in any rectangle which we want to
be “perfect”. Its width = height * 1.62

In conclusion

Many people will argue, that this technic is an utopia and we
cannot spend time coding next to our calculator, when we try to
catch up our deadlines, but that’s NOT the point of this
article.
The point is to try thinking of the 62% 38% analogy for
everything we need to divide.

Extra information

When we want to divide a quantity into three parts, we divide it
firstly in two (62% – 38%) parts and then we take the bigger and
divide it into two parts again with the same analogy.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (16 Comments)

1. Darice de Cuba
   November 6, 2008

   Excellent concept... I learned about the Golden Ratio(Phi) when I read The Da Vinci Code. It never occured to try make a layout/design using theg olden ratio. I have to give it a try sometime see how it turns out.

2. yvonh
   November 6, 2008

   Hello, nice article. Nicer is that we make the same typo mistake "ration" instead of "ratio". I make it all the time :-)

3. crs
   November 6, 2008

   Nice catch Yvonh! It's true! I make this mistake a couple of times. Thank you both for your comments :)

4. cssglobe
   November 6, 2008

   Fixed! Thanks for the heads up yvonh! Also thanks to Christos for great article.:)

5. Dan Lee
   November 6, 2008

   I feel as though this article on the golden ratio could have been more in depth. There is a lot to the golden ratio, including many of its different and useful aspects such as the golden triangle or even the Fibonacci Number when relating, for instance, the large box of the content to the location of the smaller boxes within the sidebars or navigation. This was a great subject, something that is taught and demonstrated across many forms of mediaart. No disrespect but I feel you barely scraped the surface of this great tool. Perhaps some follow up with more detail and usage for web designers would really help. A simple google search is all it takes for those more interested in the uses of the golden ratio in relation to design in general.

6. crs
   November 7, 2008

   Thank you Dan for your proposals. Of course i barely scraped the surface, but i think it's a beginning. I wanted to give people the general idea of dividing dimensions. Now definitely there should be an article paying more attention to layout, especially with the use of the square sequence from the Fibonacci spiral.

7. Online hry zdarma
   November 9, 2008

   960px ?

8. Emil Milanov
   November 14, 2008

   Great article Greek brother :) I'm personally addict of grids and numbers, and also use 960px for layout width. Cheers!

9. Raymond Selda
   December 2, 2008

   Nice article. I use Atrise when I'm designing in Photoshop. They have lots of options for different grids including the Golden Ratio. http://www.atrise.com/golden-section/

10. phil
    December 7, 2008

    I found this earlier this year http://www.thismanslife.co.uk/main.asp?contentid=phiculator I like the theory behind the idea - but havn't yet properly used it

11. Marek
    January 6, 2009

    I will try this on my layouts. THX!

12. Chris
    January 22, 2009

    A great article! I got totally turned onto the golden ratio after reading about it Richard Bringhursts "The Elements of Typographic style". However this statement made me smile: "The golden ratio is a mathematical constant, approximately 1.6180339887". There's nothing approximate about that value, 1.618 might be considered approximate. The value you quote is extremely precise.

13. Mustafa
    February 17, 2009

    While you drinking "greek coffee" ? There is nothing called greek coffee. It is orginally Turkish Coffee.

14. Adamn
    April 19, 2009

    Nice article i too made the mistakes some times :P

15. Marcello
    May 16, 2009

    Loved this article... and it looks like I'm not the only one. Take a look a this article "by" a certain Lauryin: she made a very good copy/paste. http://www.italianwebdesign.it/progettazione-la-golden-ratio-o-sezione-aurea/

16. Marcello
    May 18, 2009

    uuuppss... I have to apologize, sorry about my previous comment, I didn't notice the disclaimer in that page. Really sorry.

Sorry, the comment form is closed at this time.