How to Use the Rule of Thirds in Web Design [Quick Tip]

0
11
How to Use the Rule of Thirds in Web Design [Quick Tip]

To understand that “Rule of thirds” Let’s start with an example when it comes to web design.

Consider this picture of a bull in a field:

Not too interesting, is it? As the center of the picture, the bull picture feels a bit boring and predictable. I’m ready to bet if you saw this picture on a website you wouldn’t dwell on it for too long.

Now consider what changes if we use the rule of thirds to place the Taurus away from the center:

Taurus to the right of the field, asymmetrical and an example of the rule of thirds

A little more interesting, isn’t it?

The rule of thirds can help make your designs feel less predictable and more intriguing. And ultimately, it can keep the viewer’s attention longer – which is crucial when you’re trying to attract new audiences and convert those audiences into leads for your brand.

Of course, there are exceptions to every rule. Perhaps you decide your designs are more compelling when they are symmetrical. However, you cannot make the deliberate decision to have your own website until you have considered your options.

Here’s how to use the rule of thirds in design and UI design to take your images to the next level.

Click here to download our full collection of free templates for designing stunning visual content including infographics and more.

Use of the rule of thirds in design

Put simply, the rule of thirds assumes that designs are more interesting and visually appealing when you place the main objects of your design on one of the four intersections of a rule of thirds grid or in one of the thirds sections.

It’s no secret that art is more than just guesswork. Geometry dates from Roman times and has always had a place in major works of art.

Let’s look at an example to understand the rule of thirds.

The rule of thirds draws two lines perpendicular to one side and two lines horizontally to one side to create one Grid of nine boxes.

This will divide your page into three-thirds, whether you cut the image horizontally or vertically:

Example of a third grid

To use the rule of thirds in design, you simply need to off-center your objects by inserting them into one of the thirds sections:

the left and right third section in a third grid

… Or at one of the intersections:

the intersections on a third grid

In the example shown above, the main focus – the mountain top – is in the first third of the photo to the left of the center of the image.

Fortunately, using the rule of thirds in your own images with a design tool like Photoshop that has a grid feature is easy enough so you can make sure that you are using the rule of thirds accurately to create a more harmonious, interesting design.

Next, let’s explore in four quick steps how to create the rule of thirds grid in Photoshop.

Create a rule of thirds in Photoshop

1. To use Photoshop’s Rule of Thirds tool, just open a blank page in Photoshop and click “view” → “show” → “Grid”::

Create a rule of thirds in Photoshop.  First go to show> grid.” src =”https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png?width=624&name=how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png” Style =”Left margin: 0.00px;” Title =””    Width =”624″ Loading =”lazy” srcset =”https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png?width=312&name=how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 312w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the % 20rule% 20of% 20thirds% 20in% 20design-1.png?  Width = 624 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 624w, https: // blog.  hubspot.  com / hs-fs / hubfs / Google% 20Drive% 20Integration / like% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png?  width = 936 & name = like% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 936w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration / how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png?  Width = 1248 & name = like% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1248w, https://blog.hubspot.com/ hs-fs / hubfs / Google% 20Drive% 20Integration / like% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png?  Width = 1560 & name = how% 20to% 2 0use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1560w, https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive% 20Integration / how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png?  Width = 1872 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1872w” Sizes =”(maximum width: 624 pixels) 100 VW, 624 pixels”/></p>
<p><strong>2. Next go to “Settings” → “Guides, Grid & Slices”::</strong></p>
<p><img alt= Guides, Grids and Slices.” src =”https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-Apr-16-2021-06-59-02-03- PM.png” Style =”Left margin: car; Right margin: car; Screen lock;” Title =”” Loading =”lazy”/>

3. Next, choose the color of the grid lines along with the solid line. Then change “Gridline Every” to “100 percent”, with subdivisions of “3”. When you’re done, click “OK”.

Guides, grids, slices in Photoshop to use the third copy rule4. And there you have it! You now have a rule of thirds. To add your image, just drag and drop it onto the existing layer grid, expand it to fill the grid, and then move your focus object until it’s either in one of the thirds or at one of the four intersections .

A full rule of the third grid in Photoshop with an image transposed over it.

Examples of rules of thirds in UI design

To see the power of the rule of thirds in user interface design, let’s take a look at some website examples, with a particular focus on which websites use the rule of thirds.

1. Soulful Vibes Co.

The homepage of Soulful Vibes Co., an example of the rule of thirds in web design

Here the designer puts the main focus – on the crystal rocks and the pearl bracelet with an elephant – on the left and right third sections to ensure that the visitor’s focus is on the middle text itself: “It’s not just a movement, it’s a lifestyle.”

The designer uses the rule of thirds to create a peaceful, harmonious, casual aesthetic that looks more open and inviting than if both objects were in the front and center on the side, which would likely feel more crowded and hectic.

2. HubSpot

The HubSpot homepage, an example of the rule of thirds in web design

HubSpot uses the rule of thirds to immediately draw attention to its slogan and “Get HubSpot for Free” CTA on the homepage as most visitors’ attention starts on the left side of your website. Then the cartoon images are placed in the right third area to level out the side. This helps create a user flow – from left to right – that would be more difficult to achieve with a symmetrical design.

3. Frans Hals Museum

The homepage of the Frans Hal Museum, an example of the rule of thirds in web design

This Dutch museum website uses the rule of thirds to draw attention to the photo of the woman in the left third. The page is unique, engaging, and cohesive, and uses counter images to balance out the asymmetrical structure of the page. For example, while the larger picture of the woman is on the left of the screen, there is text and additional images on the right to compensate for it.

When to break the rules (by thirds)

It is important to note that in design and art, there are no strict rules to follow, and there are exceptions to every design rule or trend.

Once you understand the rule of thirds and how it can affect the user experience, if you see fit, you can break this rule.

For example, it may be more imperative to keep your pictures in the center of your screen, as shown on the Tone Dermatology homepage:

The Tone Dermatology homepage is an example of when you might not want to use a rule of thirds (in which case, it looks better if it's symmetrical).

Here the focus on the woman in the center is compelling and bold, especially since she is looking to the left of the screen. So it is still an asymmetrical picture (you only see her eyes and nose on the left and you only see her hair on the screen on the right).

This design layout works well for grabbing the visitor’s attention – and probably wouldn’t have been as effective if the designer had used the rule of thirds to place the woman on the left or right side of the screen.

Ultimately, you want to choose design elements that best fit the needs of your own brand. When in doubt, experiment with both more symmetrical designs and third-party design rules, and consider A / B testing to see which ones will work best for your audience.

New call to action