Fundamental Design Principles for Web Page Layout

As I said in the introduction, the first graphic design principle that I’m going to explain is the one called “Golden Proportion” or “Divine Proportion.” But what is it? It's a very ancient concept that comes to us from Pythagoras and his followers, since they noticed that a recurrent ratio or pattern occurred very frequently in different elements of nature.  

Because of this recurrent proportion, they assumed that this pattern was a divine thing inspired by the gods, hence the name “divine proportion.” However, apart from learning this interesting facet of history, it’s necessary to clarify what the golden ratio really is. Thus, in plain terms the golden ratio is the number 1.6180339, or in a shortened version, simply 1.62. It's normally called phi (represented by the Φ character).  

For the sake of brevity, I’m not going to explain how this number was calculated by the Pythagoreans, but it’s fair to mention that anything whose length can be divided by 1.62 will be aesthetically appealing to the human eye. Obviously, this concept can be also taken to the terrain of web design.  

For example, suppose that you’re planning to build a web page layout whose total width will be 800px. Now, if you apply the divine proportion to your layout, you should divide 800 by 1.62, which is approximately 493.8271605, or, reduced to its integer representation, simply 493.  

This result is very useful for creating a aesthetically pleasing layout composed of two columns, where the first one will have a width 493px, while the second one will have a value of 800 – 493, that is 307px. Not too difficult to do the math, right?  

There you have it. At this point, you learned how to create a web page layout by applying the divine proportion or the golden ratio, which will be appealing to human eyes. The following image shows the dimensions assigned to each column of the web page, based on the divine proportion. Take a look at it, please:

Now that you have a clearer idea of how the golden ratio can be used for building a truly harmonious web page layout, it’s time to apply this concept in the context of a functional example. Therefore, in the section to come I’ll be defining the structural markup of a simple (X)HTML file whose main columns will be properly styled following the divine proportion.  

Want to see how this example file will be created? Click on the link below and keep reading.