Effective Use of the Rule of Thirds in Design

In this article, we take an in-depth look at the rule of thirds in design; asking precisely what it is and how it can can help us improve our work as designers.

The Value of the Rule of Thirds

Assuming art lessons weren’t just an excuse for you to get some shut-eye at the back of class, you’ve probably already heard of design principles such as the golden ratio, the rule off odds, and the rule of thirds. While all three of these have their merits, the rule of thirds is undoubtedly the most useful. A fact made clear by its widespread use across all areas of art and design; from painting and architecture to photography, cinema, logo-design, typography, and pretty much any other genre of visual art you can think of.

In fact, you’ll find that most examples of good design will pay at least a degree of attention to the rule of thirds. Meaning that if we want to become better designers, sooner or later we’ll need to learn how to use the rule of thirds ourselves.

But just what is the rule of thirds?

What Is the Rule of Thirds?

The rule of thirds is an aid to aesthetic composition. A principal that we can follow in order to produce more beautiful designs—time and time again.

When we make an aesthetic judgment about something, there’s much more going on than merely subjective opinion. Societal and cultural influences of course play a major role in this - but that’s a topic beyond the scope of this article. Instead here we’ll be looking at the way in which geometry can touch the human psyche. And how, as a result of this, designs that fit with a certain kind of symmetry are more pleasing to the eye than those that do not.

Not only that, but by reading this article we hope that you will become better at doing what you do; applying these rules to your own design projects. First consciously, then automatically and unconsciously.

Understanding the Rule of Thirds

The first thing to understand about the ‘rule’ of thirds is that it’s actually more of a guideline or a recommendation than a rule. It’s a technique that can help improve graphic composition by suggesting where we might want to place key elements within a design layout.

It is not a strict regulation that you must blindly follow with every design project you do. Use the rule of thirds when it works; ignore it when it only leads you to design solutions that are predictable or mundane.

That’s all very well, but what is the rule of thirds in practice, and how can it be applied in a design context?

The Rule of Thirds Explained

The rule of thirds states that elements within a composition will potentially appear more harmonious, balanced, and aesthetically pleasing if they coincide with a number of geometrically determined points. For example, points within a camera viewfinder or on the canvas of design software such as InDesign, Sketch, Framer, and so on.

When dealing with a 2D design object—such as a photograph or a page layout—these points are determined by dividing the canvas into nine equal-sized units; three rows and three columns. In practice this means placing two horizontal and two vertical lines across the page at equal distance, so that you end up with a grid of nine identical boxes (either rectangular or square). You then use this grid to determine where to position the main elements of the design.

Three Is the Magic Number

If the page is divided into a grid with nine sections, why is it called the rule of thirds and not the rule of ninths? Simple; because no matter where you place an object on the grid, it will always be positioned either one third or two thirds into the page from the left, right, bottom and top - simultaneously. Yes, you get nine pieces, but that’s because the grid divides the page into thirds both vertically and horizontally.

OK, but why is the grid made out of three rows of three boxes, and not, say, four rows of four? Well, four is an even number, and even numbers mean exact symmetry; rarely the most interesting design solution.

Instead the rule of thirds almost guarantees an asymmetrical composition. And asymmetry will usually hold a viewer’s attention for much longer than perfect symmetry. If you are just starting out as a designer, one of the main benefits of using the rule of thirds is that it will force you to move away from banal and predictable compositions.

Using the Rule of Thirds Grid

To make use of the rule of thirds, you effectively need to place the grid over the design you are working on. You can do this quite literally; for example, if working with the rule of thirds in software like Photoshop or InDesign, there’s an overlay you can select which automatically displays the rule of thirds grid. Alternatively, you can simply visualize an imaginary grid in your head as you develop your project.

Once you have your rule of thirds grid—real or imagined—there are two ways in which you can use this to help determine where to place important elements of your design. One is to fill the thirds sections with the larger elements; the other is to place the main subject and other important smaller elements on the intersections between the grid lines.

Often a successful piece of design will make use of both techniques side by side Let’s take a closer look at these techniques in turn by examining some practical examples.

Rule of Thirds Examples

Everybody knows how to take a photograph, so to illustrate these two methods we’ll use photography composition as our example.

When using the rule of thirds to help with the framing of a landscape photograph, a photographer will look through the viewfinder and choose where to position the camera according to the nine-section grid.

Let’s imagine that the subject is a simple landscape; fields, mountains, and sky. Here the photographer can easily make a pleasing composition by positioning the fields within the frame so that they roughly fill the bottom third of the grid; the mountains so that they lie across the middle of the image; with the sky occupying the top third.

This will likely already make for a well-composed photo. But now imagine that there’s also a lone tree in this pastoral scene, adding an extra degree of interest to the shot. Where should the photographer position the tree? Bang in the middle of the frame?

No; this would only take us back to perfect symmetry again. Instead the ideal scenario would be to position the tree exactly where the grid lines cross. I.e. the photographer might place the tree where the thirds intersect at either the bottom left or bottom right of the frame. This asymmetrical composition will help to break up the three predictable stripes created by fields, mountains, and sky, adding greater interest to the scene.

When to Bend the Rules

Getting the most important parts of an image to correspond with the thirds grid in some way will usually result in an aesthetically pleasing composition. However, in order for a rule of thirds composition to work, not every single element needs to line-up exactly with the grid.

As case in point, if our landscape also included a road cutting through the fields towards the horizon, this might act as a leading line; drawing the viewer’s attention to the tree. However, clearly a meandering country road is unlikely to exactly align with the thirds. That’s not a problem, just as long as the converging parallels help to reinforce the composition in some way: for example, by meeting at the intersection of the thirds.

How to Use the Rule of Thirds in Graphic Design

We’ve seen how the rule of thirds can be applied in photography. But how is it used in design disciplines such as typography, logo design, web design, and various forms of print design?

Structure

Grids form the basis of almost everything we do as graphic designers. And while the rule of thirds isn’t the only grid we use in design, it’s certainly one of the most important.

The grid is a roadmap showing how individual elements should be positioned within a page layout. This serves to anchor and hold together disparate content as a unified whole. A grid also creates rhythm; and 3/3 is a particularly good meter.

Although starting from a grid isn’t obligatory in graphic design, it helps to give a layout structure, keeping all the diverse elements that make up the page fully aligned and well ordered. This will often make a design more effective in conveying information; ultimately the main purpose of any design project.

Headers, columns, rows, paragraphs, illustrations, photos, borders, negative space; all can benefit from being positioned on the canvas following the rule of thirds. And rule of thirds grids can be used for all kinds of design projects, from print and web, to typography and logo design.

Enjoying this content?

Sign up to our email list to get the best of the Framer content sent directly to your inbox.

Hierarchy

The concept of hierarchy is extremely important in graphic design, as it lets the viewer know where they should first focus their eyes before moving on to digest the next piece of information. By using a grid system that follows the rule of thirds, not only will you give your designs a strong starting framework, but also provide the support on which to build a design hierarchy. And without a hierarchy, all information on the canvas will clamor for the viewer’s attention at an equal volume - leading to chaos and confusion.

Viewers won’t just look at your design and try to take in the information it contains all at once. Rather they will look at different elements in turn. And there’s a clear order in which their eyes will examine each part of the page; with most people starting from the intersection of the thirds at the top left, moving down to the bottom left, then up to the top right, and finally the bottom right. Knowing this can help you prioritize the positioning of important information within your hierarchy.

Balance

In the same way that our example landscape photo above was improved by the inclusion of a lone tree, anything from a page layout to a logo design can be made more striking by adding a unique point of interest. And just as with the tree, this point of interest will usually be most effective if it is placed on an intersection of the thirds.

As already mentioned, total symmetry can have some instant appeal, yet it quickly risks becoming boring and predictable. Instead, for a more complex design solution that will stand repeated viewing, asymmetry is usually the way to go. Using the rule of thirds to create your grid system can be helpful in this area too.

For example, when working on a page layout, you may have strategically placed a hierarchically important piece of information at the intersection of the thirds on the top left of the spread. But in order to balance the design, you may want to add some other important - yet secondary - content down at the bottom right. A rule of thirds grid will tell you exactly where you should put this.

Understand it, then Forget it

All Clear? Great! Now it’s time to forget everything that you’ve just learned. In order to be truly useful in design, compositional aids such as the rule of thirds need to be learned and practiced so many times that they becomes second nature. And then promptly forgotten.

Understanding the rule of thirds isn’t difficult, but getting to the point where you apply it intuitively and unconsciously in your work as a designer can be a lot more challenging. The best to achieve this is to start out by consciously using the rule of thirds as often as you can, until you get to a level where you are no longer even aware that this is what you are doing. At this point the rule of thirds becomes part of your professional intuition as a designer.

Get started
with Framer.