Conversation with Axi Please note that this conversation will be recorded for internal quality purposes. Thank you!
Powered by AI
Artists and designers have been using the rule of thirds to create eye-catching images for hundreds of years. Find out how the rule of thirds works and how you can use it to add some serious shine to your designs.
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.
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:
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.
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.
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!
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.
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.
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:
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 advertisement – 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.
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:
Upskill and develop in-demand skills with our Graphic Design: Elevate (Self-paced) course:
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: