The rule of thirds is a powerful tool in web UI/UX design, enabling designers to capture user attention and create a visually pleasing and intuitive design by strategically placing key elements and following a structured grid system.

Websites with stuffed pictures, texts, and misaligned elements are eyesores. They rarely capture users’ interest and reduce the returning visitor rate. The rule of thirds is a time-tested design and composition rule used in photography, painting, and other artworks. The goal of the rule is to create a layout that is attractive and has good composition, through strategic placement of elements in the design area. In this article, we will discuss the rule of thirds and how to use it in UI UX designs

History of the rule of thirds

The widely used rule of thirds compositional technique can be traced back to the 18th Century. It was initially proposed by John Thomas Smith- an English Painter, engraver, and antiquarian. He documented the rule of thirds in his book titled “ Remarks on Rural Scenery”, published in 1797. His notion was that with grids, an image can be divided to catch the beholder’s attention. 

The technique was predominantly applied in paintings and photographs to make the visual composition pleasing to the eyes. It was done by making the compositional elements conform to an imaginary set of lines that divides the frame into equal thirds, vertically and horizontally. Little was known then that this simple technique will find immense application in UI UX design. 

What is the rule of thirds in UI UX design?

The rule of thirds is a design technique that breaks up an image or design into different sections with equally spaced horizontal and vertical lines. The columns and rows obtained through these lines form a grid as shown below. 

image showcasing how design area is divided into sections according to the rule of thirds

In this image, we can see that there are nine boxes or grids. There are four points of intersection of the vertical and horizontal lines called focal points or sweet points. When the main elements are prioritized and placed on these sweet points, the user's attention is naturally drawn to them.

Here’s why. 

An asymmetry is created when the design elements are placed in these four crucial focal points or sweet points. A UI UX design layout with asymmetry can naturally draw the users' attention to wherever designers want. Asymmetry makes the design dynamic and interactive, thus making it more pleasing. It guides the user’s gaze to the pronounced details that designers want to convey to them. 

This does not mean that symmetrical images or designs are not visually appealing. They are, too.  Positioning the design element centrally is quite beautiful. But it appears to be static and dead and such designs don’t communicate innately with the users. 

Why is the rule of thirds important in UI UX design?

The rule of thirds enhances the visual balance by bringing out a harmonious and cohesive design. 

The rule of thirds is applied in UI UX design to create visual interest by placing important elements in the four focal points. This ensures that the user’s gaze is focused on what matters the most without being distracted. It increases engagement and improves the chances of users taking action. For instance, in ecommerce UX design, to encourage users to click on the Buy Now button, it’s a good practice to place it strategically in one of the four focal points. 

In short, imperfectly placed elements give depth, layering, and uniqueness to the design. It visually communicates with the user which is the core aim of UI UX designs.  Don Norman in his famous book, “The Design of Everyday Things”  has explained that “ Good design requires good communication, especially from machine to person, indicating what actions are possible, what is happening, and what is about to happen.”

So, the rule of thirds can be called a magic guideline that enables designers to place key elements in the popular paths where the eyes of users will travel. By applying the rule, designers can effortlessly make the user perform a specific action. 

Look at the image below. The image conveys to the observer that it is a moving car taking off to be on track. The picture uses the rule of thirds to intuitively convey the story and this is what all UI UX designs aim at. 

In a nutshell, we can say that the rule of thirds gives the UI UX design: 

  • Visual consistency 
  • Visual hierarchy 
  • A rhythm of repeatable patterns 

How is the rule of thirds used in web UI UX design?

The rule of thirds keeps the guesswork out of the composition. It is a powerful tool in the designer's arsenal to make the design intuitive and visually appealing. To use the rule of thirds in your web design, follow these steps. 

Step 1: Apply grids to the design 

Creating grids is the first step to applying the rule of thirds to a design. Firstly, know the dimensions of the design space. Then draw three evenly spaced vertical and horizontal lines. This will give three columns and rows as in the image shown earlier. When the grid is ready, the four intersecting points called the focal points or sweet points can be identified. 

Step 2: Create a visual hierarchy by choosing the focal point 

The next step is to select the focal points to place the most important element of the design to the next. The focal points give a natural spacing between the elements. Therefore, a visual hierarchy can be created to guide the users through the prioritized design elements seamlessly. The image below explains this further. 

Initially, viewers are drawn to the focal point at the top left, then the bottom left, then the top right, then the bottom right. The pattern naturally guides the eyes through the design elements.  Thus the design lets the users take in the information in well-defined order within seconds. 

Step 3: Prioritize the main element

Even though every element of the design requires the user’s attention, it is important to choose the top priority one and align it with the grid.  This is a decision-making step where the main element has to be prioritized based on the focus of the design. If the site logo is to be highlighted in the design, it must be placed in the top left focal point of the grid. 

Step 4: Structure the design elements with visual divider lines

The rule of thirds grids and the visual divider do the same thing- organize design elements visually. However, visual dividers help the designers to anchor the content according to the grid pattern. It separates the pieces of content into clear groups or sections. This makes it easier for users to define the relations of the content. Dividers play a major role in usability by creating visual containers that look clickable. 

Step 5: Create visual contrast

Visual contrast can be applied to the grid to add interesting diversity to the composition. For instance, different colors and sizes of the design elements make them stand out in the design space. The uniqueness directs the attention of the user to the most important information. 

Summary

It is interesting to learn that catching the user’s attention is as simple as nine blocks. However, knowing to use the rule of thirds in UI UX design makes the design stand out. The rule of thirds is not new in the field of design. It is a tried and tested psychological approach that has helped designers communicate crucial information to users. Taking advantage of the sweet spots gives a pleasant user experience. The key elements of the design can be targeted by:

  • Dividing the design space with three horizontal and vertical lines to form a grid. 
  • Identifying the ideal focal point to place the design elements 
  • Positioning the design elements on the four focal points strategically. 
  • Structuring the design with a visual divider 
  • Creating visual contrast to capture the attention of the user. 

FAQ

  1. 1. How does the rule of thirds help visual focus?

In the rule of thirds, the image/ design element is divided into 9 boxes with 3 horizontal and 3 vertical lines. There will be 4 points of intersection of these lines called focal points. When the main elements of the design are placed at these focal points, it creates a visual hierarchy. This means it naturally guides the viewer’s focus first to the top left, then the bottom left, then to the top right, and to the bottom right. 

  1. 2. Which UX design principles do the rule of thirds support?

The rule of thirds in design supports principles such as color balance, visual contrast, visual consistency and visual hierarchy. 

  1. 3. Should you always use the rule of thirds?

Not always. The rule of thirds is a guiding principle rather than a hard rule that must be followed. If a design has to be made interactive, it is better to follow the rule of thirds. However, if a design looks great without the rule of thirds, then it is good to go without the rule. 

  1. 4. Which disciplines use the rule of thirds?

This compositional rule has found applications in design, painting, illustration, cinematography, and photography.

Aparna K S

Aparna is a content creator who is passionate about UX design. Her works are informed by her deep knowledge and understanding of the field. She blends creativity and her unique perspective of the field to create engaging and informative articles. Aparna seeks to inspire and educate readers by providing valuable insights into the world of UX design. Connect with Aparna via www.linkedin.com/in/aparna-k-s-7aaa2576

Table of Contents

Ready to elevate your product design to the next level?

Hire us to create cutting-edge UX/UI designs that captivate, engage, and convert.

Contact us