One Third to Rule Them All – Applying the Rule of Thirds to Web Design

By Joshua on January 18 2008

Photo by Zack Birkenbuel (license)

If you spend any amount of time in the field of photography, you have probably come across the concept of the rule of thirds. For those not familiar with the rule, it states that compositions will tend to be more interesting if the areas of interest are located along the horizontal or vertical lines which divide the image into thirds, especially at an intersection between two of these lines.

So, how can we use the rule of thirds in web design? First we need to figure out what we want to bring attention to. In most cases that will be things like the main content and headings.

The easiest way to position the content along one of the vertical thirds is to have a sidebar which takes up approximately one third of the layout's width. This technique will work on most sites, especially those with blog-style sidebars.

Taking advantage of a horizontal third is much trickier, given the variability of screen resolutions, whether browsers are maximized or not, and the fact that many (most?) websites content is database driven. For the most part, this means that web designers need to take advantage of other techniques to focus readers eyes on different portions of the vertical third. Using images and conspicuous headlines are two of the most common and effective ways to deal with that.

The rule of thirds and its close cousin, the golden ratio, can also be used to determine the optimal dimensions of images. For instance, whenever possible on this blog, I try to use images whose height and width are related by the golden ratio. This can be width / golden ratio, width / golden ratio^2, or width / golden ratio^3. If you want to avoid the tricky math associated with this, you can either simplify with the rule of thirds (width * 0.666), or you can just type the formulas into Google. It translates the term "golden ratio" into its mathematical equivalent.

What about you, though? Have you found any interesting uses for the rule of thirds or the golden ratio in web design?