The Rule of Thirds in UX Design: Everything is Better (Simpler) with a Grid

Rehman Deraiya
Bootcamp
Published in
3 min readJul 7, 2022

--

We all know that humans are naturally drawn to the centre of a composition. That’s why you see so many photos, paintings and other artworks with the subject placed in the middle. But what if we were to take away this natural tendency? What if we made it so that our subjects weren’t always smacked in the middle, but instead took up one-third or another part of the picture? This is where the Rule of Thirds comes into play.

What is the Rule of Thirds?

The rule of thirds is a composition guideline that divides an image into a grid of thirds, both horizontally and vertically. The idea is to place the most important elements of the image along these lines and intersections.

It’s been said that this arrangement creates more opportunities for balance and interest in your design by breaking up what would be an otherwise static composition.

The History of the Rule of Thirds

Before we dig into the benefits of the Rule of Thirds, let’s take a look at its history. The rule first appeared in Western art during the Renaissance period. At that time, painters used it to create visually appealing compositions.

The Rule of Thirds is based on the golden ratio which was discovered by the Greek mathematician Euclid around 300 BC. It’s a mathematical formula that states any two numbers can be divided into a larger number (a + b) and a smaller number (a/b). When you divide any line into two segments whose ratio is equal to 1:1.618, the result will always be a golden rectangle!

How to Use the Rule of Thirds in Web Design

The rule of thirds is a guideline, but it’s a good one. If you can create visual balance by following the rule of thirds, then do it!

Use the rule of thirds to create visual balance in your design.

The key to using the rule of thirds is knowing when to break it. Sometimes breaking this guideline will help create an interestingly asymmetrical design (for example, placing an image near two-thirds onto one side).

The Rule of Thirds is used to increase visual balance and helps the design look more natural.

The Rule of Thirds is a compositional rule used in photography and other visual arts. It’s meant to be applied when arranging the elements in your image. If you’ve ever used Photoshop, you may be familiar with the “crop tool” which allows you to crop an image into thirds horizontally and vertically. The Rule of Thirds is similar but it doesn’t involve cropping your images; rather, it involves placing important elements on one or more of the four gridlines created by dividing your image into nine equal sections (three rows and three columns).

Why should you use the Rule of Thirds? Well, it helps balance out an image by creating visual interest that draws attention to certain areas while directing viewers’ eyes around the page without actually directing their gaze at any one thing specifically. This can create interest without distracting from what matters most — whether that means increasing engagement or getting someone excited about something new they’re seeing for the first time! For example: Imagine how boring this would look if everything was centred across both axes:

Conclusion

In conclusion, the Rule of Thirds is a powerful tool in your web design arsenal. It helps you create more visually balanced designs that are more pleasing to the eye and easy on the brain. You can use it as a guide when laying out your website’s elements or just use its principles for inspiration when creating new designs.

--

--