Rule of Thirds - What is the rule of thirds & how can you use it in design? (2024)

What is the rule of thirds?

The rule of thirds is a “rule of thumb” used for composing visual images, such as films, paintings, photographs and graphic designs.

According to the rule of thirds, anyone creating an image should imagine it as being divided by two equally spaced horizontal lines and two equally spaced vertical lines, creating a grid of nine evenly sized sections.

Artists and designers following the rule of thirds will position any important visual elements on these lines or their intersections. Why? Glad you asked!

People who believe in the power of this technique claim it helps to create more balanced, eye-catching images with multiple focal points charged with tension and energy. To give an example, if the main subject of an image is closer to one of the edges (as it is above), the eyes will follow it, creating a sense of movement.

Without following the rule of thirds, the natural tendency is to simply centre all the important elements, leading to static compositions and less interesting images.

Why is the rule of thirds Important in design?

The design space is filled with different kinds of rules. There are rules for typography, balance, composition, negative space, colour theory and just about everything else you can shake a paint brush at.

The rule of thirds is a simple guideline that Graphic Designers, UX Designers and other creatives use to arrange the text and visual components of an image or webpage. This allows designers to create balanced compositions that align with how the viewer’s eye naturally scans the content.

The main benefits of designers using the rule of thirds are:

• It helps to create balanced, orderly images that are easy for the viewer to comprehend.
• The asymmetry of the grid creates dynamic designs with a sense of movement and flow, as opposed to symmetric designs that seem still and rigid.
• It removes the guesswork when designers are deciding where to place the most important elements.

Make no mistake, the rule of thirds isn’t just a passing design trend. It was developed by painter John Thomas Smith in the 18th century and is still being used by designers, filmmakers, photographers and artists the world over.

How to use the rule of thirds with your designs

The enduring popularity of the rule of thirds is a testament to just how effective it is. Honestly, it really does work. But don’t just take our word for it, experiment with it yourself.

• Step 1: Create your grid

First you need to know the dimensions of the image you’ll be working with. Once you know the height and width of the image, divide each evenly by three and place marks at these intervals on the top, bottom, left and right sides of the image.

Next, draw four straight lines where you marked the intervals, two horizontal and two vertical. For instance, if your image is 30cm wide and 15cm tall, you would draw lines from top to bottom at the 10cm and 20cm marks, as well as from left to right at the 5cm and 10cm marks. Hey presto – you have your grid!

• Step 2: Use the grid to structure your design

At the centre of your grid there will be four points where the lines of the grid intersect, often referred to as ‘powerpoints’. You should aim to place the most important visual features of your design on the powerpoints.

If your design entails any strong uses of lines, you should try to position these lines alongside either the vertical or horizontal lines of the grid.

• Step 3: Use the rule of thirds to achieve balance and movement

Following this formula, you might end up with a design that has most of its prominent features in the first third, with the other two thirds left as mostly empty space. Though the design will be partly empty, it will still be evenly divided into thirds. This creates a sense of balance that feels right to the viewer.

Using the rule of thirds also creates a sense of movement in your designs. Designs that include key elements smack-bang in the middle often feel static and boring, because there’s nowhere for the viewer’s eye to wander. Using the rule of thirds, your viewer will spot a key feature off to the side, then take a visual journey through the rest of the image.

The rule of thirds in UX Design

When it comes to UX Design, the rule of thirds is applied with a slightly different objective in mind.

While UX Designers do rely on the rule of thirds to create visual appeal, they also use it to make sure users notice key features, helping them to navigate the interface and carry out important actions. Ultimately, this leads to higher conversion rates.

Usually UX Designers will place important images, links, text, or calls to action near the four powerpoints of the grid. This ensures that users can quickly comprehend what they are looking at and easily proceed with any important tasks.

The benefits of using the rule of thirds in UX Design include:

• It makes it easier for the user to navigate a site and accomplish their goals.
• It reduces any non-essential information that might otherwise clutter the page and confuse the user.
• It creates balanced, visually appealing pages.

Rule of thirds examples

Here are a few examples of some eye-catching designs that have made great use of the rule of thirds:

Nike Air Zoom running shoe advertisem*nt – This image is perfectly balanced, with the two main features distributed across the three mid-sections. The ‘Wow!’ text captures the viewer’s attention, which then moves across the page to scan the running shoe. Notice how the text and all-important Nike Swoosh logo are located between the powerpoints.

Rolling Stone website landing page – Here’s a perfect example of the rule of thirds applied to a web design. The three columns of articles are perfectly aligned with the thirds of the grid, while the advertising banner near the top of the page is aligned with the top horizontal grid line. As a result, despite the page being filled with information, it appears neat, orderly and balanced.

Want to learn more about design theory?

Academy Xi offers a range of courses that will equip you with all theory and practical skills needed to flourish in today’s design industries.

Want to combine business objectives and creativity to craft stunning visual assets that resolve a brand’s biggest challenges?

Change careers with our Graphic Design: Transform course:

• Get to grips with the full suite of Adobe apps and build a stand-out portfolio.
• Join a Career Support Program that helps 97% of graduates land their dream role, with tailored job search, resume and interview advice.

Upskill and develop in-demand skills with our Graphic Design: Elevate(Self-paced) course:

• Learn the theory of Graphic Design and put it into practice with hands-on projects.
• Build a unique portfolio with a range of digital design assets.
• Elevate courses come in two flexible options – part-time, or self-paced.

Want to combine the best of UX and UI to create seamless user experiences that leave a lasting impression on customers?

Change careers with our UX UI Design: Transform course:

• Impact real businesses by completing projects for live clients.
• Join a Career Support Program that helps 97% of graduates land their dream role, with tailored job search, resume and interview advice.

Want to discuss your course options? Speak to a course advisor and take your first steps into the exciting world of design.

• Blog

Contact

Contact

11/10 Carrington St, Sydney NSW 2000

1300 098 165