One of the first things a budding photographer learns is to hold the camera properly.
A few other pointers follow. Some of them are understanding the exposure triangle, playing with perspectives, and the rule of thirds.
But the rule of thirds isn’t just limited to photography. It plays a crucial role in design too.
What is the Rule of Thirds?
Whether in photography, imagery, or design, the rule of thirds is an alternative way of gaining a new perspective on a particular layout.
Think about a famous painting. Did you notice that the focus of the image isn’t centered?
Take, for instance, ‘On the Grass’ by Pierre-August Renoir. At first glance, the painting reveals two women immersed in conversation in the countryside. However, upon further inspection, you will notice the clever use of the rule of thirds.
We’ll take the same painting as the base to illustrate the rule of thirds. In the rule of thirds, an image or design is divided into three sections, by columns and rows, whether square or rectangle-shaped. Then, the image or design is split into three columns vertically and three rows horizontally to create nine individual squares inside of the larger design.
The grids are evenly spaced, creating a harmonious and cohesive balance. The points converge where the viewer’s eyes land first, especially at the top right-and left-hand side and not at the center of the image.
John Thomas Smith, an engraver, first coined the term “Rule of Thirds” in 1797. He emphasized using grids and dividing paintings to catch the beholder’s attention.
The Rule of Thirds Grid
The Rule of Thirds Grid is no accident. It’s an exact science. Imagine that you’ve got zero skills in the arts and crafts arena, but your partner wants you to gift them a handmade card. Naturally, you panic and start sweating profusely. But the rule of thirds can help you out.
Let’s put the grid to practice and use. The first step is knowing the dimensions of the image or the design you’re about to create. Of course, when you’re out in nature, you’ll have to wing it if your camera isn’t already equipped with a grid functionality. The basic idea is to evenly divide your design or image by three and mark ‘X’ spots at the conjunctions on the top, bottom, left, and right sides.
We’ll let the gurus at Interaction Design Foundation describe it for you. “Make two sets of parallel lines at even places over a background. So, going from the top left, measure the width of your background. If you’ve got a width of 36 cm, mark out points at 12 cm and 24 cm. Then, look at the height. So, again going from the top left, measuring down, we get a reading of 24 cm. Therefore, mark out points at 8-cm intervals (8 cm and 16 cm down).”
Voila, you have a grid.
What does this mean for designers? The grids intersect and four points that will be the foundation of your design.
How is the Rule of Thirds Used in Design?
At Pepper Square, we aim to simplify interfaces. And that is why we like to stretch our limits while confirming to time-tested rules and laws. For example, in a few of our other posts, you might have noticed how we extensively talk about the “F-shaped pattern.”
Years of data, research, and eye-tracking software have proven that when we first land on a website, our eyes travel to the top left of the screen. It then scans horizontally over to the right-hand side. Our eyes then travel back to the left, slightly lower towards the middle of the page. The process continues till we reach the bottom of the page. The path our eyes travel on the page makes an F-shape.
What, then, does the F-shape have to do with the rule of thirds?
Surprisingly, quite a lot.
According to the Interaction Design Foundation post, here’s some eye-opening data about where users first look.
Take GV’s website, for instance. A no-frills website with a minimalist color scheme, it hits you precisely where your eyes land first. The GV icon on the top left is the first thing one sees, followed by the team, portfolio, and news.
Almost immediately, our eyes follow the content on the banner and move toward the images of people on the right. Above the fold, it’s already ticked all the right boxes.
Let’s also hop on Nordstrom’s website for a minute to see how they’ve leveraged the rule of thirds. Like, GV, we’re first greeted with the logo on the top left, and right next to it, the clothing giant has placed the search bar right in the middle. One of the biggest mistakes online clothing or E-commerce stores make is not making the search bar accessible. However, Nordstrom hits the nail on the head and goes the extra mile by showcasing all categories under the search bar.
High-quality images with a nostalgic aesthetic appear below the fold on the left. These images are hard to miss and even harder to look away from.
Like the rule of thirds, designers also use the Golden Ratio in creating designs that stick. For example, the logos of Twitter and Pepsi are memorable because they are designed with the Golden Ratio. The easiest way to explain it is by using the Fibonacci sequence.
No, don’t. It’s not as complicated as it sounds and examples of it are abundantly found in nature all around us. Let’s try an experiment, shall we? The next time you spot a snail, could you pick it up and study its shape? You’ll see that snails are brilliant examples of the Golden Ratio.
If you aren’t comfortable touching slimy things. Here’s something else you can observe. Look at some pictures of the Milky Way Galaxy. Does anything look familiar? Fibonacci strikes again. The Milky Way has many spiral arms which follow the Fibonacci sequence.
Here’s something that will surprise you.
Call it the Golden Ratio or the Divine Proportion, researchers at Johns Hopkins found that the human skull followed the Golden Ratio. They deduced this after comparing 100 human skulls to 70 skulls from other animals.
Are we perfect, then? Insert smug grins.
We might not be, but nature intended us to be close to it. It’s a pattern also visible in hurricanes, whirlpools, pinecones, and seashells.
Okay, now back to the rule of thirds.
How to Apply the Rule of Thirds in UI UX Design?
Think of it as a cheat sheet, but not really. With the rule of thirds, designers can quickly implement grids that include aspects of the Phi Grid without being overly complicated. Designers don’t even need a calculator or be insanely good at math. With this simplistic version, designers can incorporate the principles of divine proportion without entirely using it.
Now, think of where and which content should take center space (figuratively speaking) in your web design. As a rule of thumb (we’re covering a lot of rules, aren’t we?), aim to place the most critical content on the top third on any page. Think of the intersections and the sweet spots—where all vital content should appear. But web design isn’t always straightforward, with many pages offering tons more as you scroll down. So, ensure you place it above the fold.
Lastly, think of visual hierarchies. That may be in the form of content, buttons, colors, elements, and the actions you want the user to perform.
Catching a user’s attention doesn’t have to be rocket science. It’s as simple as nine blocks. But, knowing how to use them to your advantage is what will set your design apart. For over two decades, the rule of thirds has helped designers, artists, photographers, and more. It helps communicate crucial messages in both portrait and landscape designs. But, at the end of the day, it’s about knowing the “sweet spots” and using them.