Design

The Rule of Thirds

  • 6 July, 2017

Most people will tell you that the beauty of a layout comes from image, typography and color. That's true, but a beautiful layout is also created in the way you arrange the different elements.

The rule of thirds is a technique first-used by artists of the Renaissance period. The technique can still be applied to the images and layouts we see on a website today.

For example, a typical banner ad for a product consists of the following elements:

  • Product name
  • Product description
  • Product image
  • A call-to-action button
  • Background image

Looking at the example banner ad (pictured below), you'll notice that there is a nice balance between all of the elements. No element gets ignored or overlooked because the elements all touch the intersecting lines of the grid.

Rule of Thirds

How to apply the Rule of Thirds

It's easy to apply the rule of thirds. Divide your banner ad into thirds vertically and horizontally. This will create 9 rectangles and 4 intersections. Place 4 dots where the lines intersect. Then place your most important elements on the grid intersections or where the dots are. If you have remaining elements, place them on one of the lines near an intersection. The dots should act like magnets that pull the elements close to it.