Using the Rule Of Thirds for Web Page Layout - Understanding the Rule of Thirds principle
(Page 2 of 4 )
As I expressed at the beginning, it’s possible to build harmonious web page layouts by applying another popular design principle called “The Rule OF Thirds.” But what is it, exactly? This principle is actually a simplified version of the “Golden Ratio.” It consists of dividing a composition (a web page in this specific case) into thirds, vertically and horizontally, in this manner creating a simple grid.
This makes sensed, since when the “Golden Ratio” is applied to a segment, the result is two segments where one is approximately twice the size of the other. So making this process simpler by dividing the original segment into thirds would produce similar results.
However, the best way to understand how “The Rule Of Thirds” works is by means of a graphic example. The diagram below shows how a web document whose whole width is 900px can be segmented into thirds of 300px each, which produces the grid that I mentioned before. Here it is:
As you can see from the above image, it’s extremely simple to create a background grid based on the “Rule OF Thirds” to build appealing web page layouts. Moreover, graphic editing software packages like Adobe Photoshop and Illustrator, among others, permit you to create grids like the one shown here in a snap, and export them directly as a background image on a web document. But actually, I’m getting ahead of myself, since this process will be discussed more deeply in upcoming articles of this series.
In the meantime, now that you have a clearer idea of what “The Rule OF Thirds” means, it’s time to learn how to apply it in the terrain of web design. With this idea in mind, in the next section I’m going to demonstrate how to build a three-column web page layout by using this rule.
To see how this will be done, click on the link below and keep reading.
Next: Implementing the Rule of Thirds >>
More Style Sheets Articles
More By Alejandro Gervasio
