Applying the Rule of Thirds in Design

Applying the Rule of Thirds in Design from UIGarage
Nikka Estefani

Updated on April 8, 2021

Applying the Rule of Thirds in Design from UIGarage

Symmetry is one of the basic and important aspects of design. In fact, this is so because our mind is programmed to look for patterns such as symmetry. The more harmonious the design is, the more it would appeals to us.

To that regard, many designers apply different principles to apply symmetry and harmony in their work. However, some of them could be complex or it takes some time and learning before you can apply it in your design. But do you know that there is one simple rule that you can apply into your design that can greatly improve its symmetry and harmony? Yes, there is one, and that is called the “rule of thirds”!

What Is The Rule of Thirds?

The rule of thirds is basically a 3×3 grid which will guide you by showing you where your design’s focal point is. The focal point is basically the area where all the lines intersect each another.

Depending on your canvas, the grid could be either shaped as square or rectangular. The most important point here is that, the sections should all be equally sized both horizontally and vertically. This is to ensure that your design’s elements and objects won’t be placed in a disproportional way.

How to Apply the Rule of Thirds in Design

Applying the Rule of Thirds in Design from UIGarage

As mentioned earlier, the rule of thirds is a 3×3 grid which gives you a guide by showing your design’s focal point in your given canvas. The focal point or “sweet spot” will tell you which elements, objects or parts of your design would stand out – the nearer or closer the elements are to the focal point, the more they will stand out. On the contrary, the farther the elements are to the focal point, the less that they will stand out.

Once you have identified which elements do you want to place emphasis on, you can simply place them on, near or around the focal point. This does not necessarily mean that you need to place your object or element of emphasis on the focal point, though. In fact, there are cases where you can work around asymmetric design and still create a sense of balance and harmony on it.

How to Use the Rule of Thirds in Asymmetric Design

In general, our design would tend to be symmetrical. This is simply because, as mentioned above, our brains are geared to look for patterns. However, there are instances where we need to work on asymmetrical design – think of discount or sales promo for example.

In instances like these, we cannot simply place a center object because, mostly, there’s no center object or element to begin with. However, what we can do is to figure out where the weight of the design is and work around there to promote balance even in an asymmetric design – the center of the weight is simply where the rule of thirds’ focal point is.

When you know where your design’s weight is on the canvas, you can place the elements in such a way that they won’t be thrown off on the edges even if they are not necessarily near or close the focal point. For example, just think of discount or sale promo design: there’s typically the discount promo on the left and a photo of the product or a happy customer on the right. While there’s no center element on this design, we can still place the said elements around the focal point in such a way that they are balanced. Thus, none of them is left out and the whole image or design itself is balanced, making it visually appealing to the brain.

Three Elements to Consider When Working on the Rule of Thirds

Applying the Rule of Thirds in Design from UIGarage

There are three elements that you need to consider when working or apply the rule of thirds on your design: structure, balance and hierarchy


Regardless of why you use grids – whether it’s for the rule of thirds or something else – all grids basically bring structure to your design.

That being said, starting or working on a grid is not necessarily a need. Also, there’s no strict rule as to how you’ll use your grid other than its basic purposes. But it’s still good to consider your design’s structure relative to what you are trying to achieve using the rule of thirds.


While symmetry is often used in design, you won’t necessarily apply it all the time. In fact, symmetry can be boring if used repeatedly and extensively. For instance, there are instances where placing your center object in the center (focal point) is not a good idea. But, by using the rule of thirds, you can place a specific part of that object on the focal point, putting the rest of the object off-centered, and still achieve a balanced feel even if the whole design itself became asymmetrical.


Finally, we have hierarchy. Hierarchy is simply how the objects and elements are placed together in an orderly manner. This is to let your viewers know where to focus their eyes on and where to go from there.

Using the rule of thirds is very helpful in hierarchy since it already shows which part of the canvas an object will stand out. At the same time, it allows you to work around the focal point so that the remaining elements will not be displaced or thrown out of balance.

Final Thoughts

The rule of thirds is a simple but effective way to help you achieve symmetry or balance in your design. In fact, the rule of thirds is very easy to understand. The real challenge here is on how you’ll apply the rule of thirds into your design – to that, you’ll just need to do it again and again until applying the rule of thirds became second nature to you. In other words, once you understand the rule of thirds, it’s basically practice and application until you eventually master it.