Rule of Thirds for interesting web design

If you like photography, you´ve probably heard the phrase: “rule of thirds”. In this post, we will explain this fascinating subject that isn´t always the center of attention. We will share some examples and show how you can apply this rule to your own website.

This rule will not be helpful for everyone, because often it is better to stick with a regiment that expedites the process. However, “rule of thirds” is basic concepts and you need to know how it works and how it applies to website layouts.

What is the “rule of thirds” and why fractions?

Those that never heard for the phrase: “rule of thirds” wondering from where does this rule come from.

The rule of thirds comes from traditional art, especially photography, which divides it into 9 equal squares in grid consisting of two vertical and two horizontal lines. The rule of thirds means that eye-catching elements should line up near the intersections of these lines or on some of these lines.

The ideal way is to capture something in a unique way that draws attention into some part of the photography. On the picture below, you can see that horizon in the right photograph lines up with lower segment, while the rock formation is on the left side, creating an interesting parallel to the sky.

Right photo is more interesting than symmetrical photo on the left. Our brain understands symmetry and brushes it aside. Asymmetry is challenging for our brain – something new and exciting.

Applying “rule of thirds” on your website

The Rule of thirds on your website applies in the same way as in the photography. You can get people focused on important parts of a website as you do that on photos.

Understanding The Grid

With this technique the website is divided on 9 squares with 4 crucial intersecting points. Most of the users browsing the website according to F or Z pattern. That means that eye follow the pattern of the letter F or Z from top to bottom. One of the first areas to grab attention is the top-left corner of a website.

This also means the top-left intersecting point should fall near or on an important part of the page. This point doesn´t need to be on top of a photo or a link (although it could be), but it should be more like a marker to distinguish an important part of the layout. For example, the page heading might align somewhere near the first horizontal line and after that line you can have a photo slideshow.

For the hubhub surrounding different fads within design, a few elements are crucial: keep your key aspects above the fold, don´t overcrowd the page and try to stick to the divine proportion.

For news sites and blogs, keeping to the 1.6 golden ratio is relatively easy. The main part of your content is on the left, while on the right side is only one-third of the size of the content space. Rule of thirds works great on blogs and news sites.

The same is if you have a product to sell. You want to make your page for this product aesthetically pleasing to as many eyes as possible. We will take one example that uses this rule, but shying away from the typical two-column structure.

Our example is site uCast´s. In the first tree rectangles is the usual navigation goodies with clean logo, so we know where we are. The slogan of this firm lines up nicely with the upper third, just like the horizon line on the first picture of this article. Our eye then falls down the left side, but when we get to the bottom, the numbered steps lead us to the right. On one page we get clear understanding of the site and its product.

Where the lines intersect is area of special interest. These are all ways that many could make use of the rule of thirds, uCast has used the lines as a nice bookend for its slogan.

Let your website be visually connected

The rule of thirds isn´t supposed to be a grid structure for building your impeccable designs. You can use it as a tool for testing or tweaking an existing design. Don´t worry about thas so much: viewer wouldn´t know immediately that a designer used the golden ratio.

Many designers have discovered that this rule works great, so it´s worth testing in your own workflow. The rule of thirds is a sample tool which will keep your design under control. It isn´t all-encompassing, but it is a good start if you feel like your design isn´t quite fitting together visually.

Make your own draft and make a test on existing website with the rule of thirds. See where particular elements fall and where they intersect the page. After a while you will start to notice this tips on other websites and it will help you to apply some elements in your own designs.

Use it properly and the 3 x 3 grid will be great tool for aesthetically pleasing design.

Adobe training

Cross browser support

Modern web technologies