What the Rule of Thirds Can Do to Your Images

by on 09/29/10 at 7:54 pm

If your website sells products, it’s important that your product images look beautiful. Most people believe that the beauty of an image comes from typography and color. The beauty of an image, however, can also come from the way you arrange and place different elements. It’s much like decorating your house, where you don’t just think about what objects you need to make your house look beautiful, but you also think about how to arrange and where to place those objects to make your house look beautiful.

The rule of thirds is an old technique that was first used on paintings during the Renaissance times. This is an old technique, but it can still be applied to the product images we see on the web today. A typical product image commonly consists of the following elements:

  1. Picture of the product
  2. Name of the product
  3. Tagline for the product
  4. Call-to-action button
  5. Background graphic

Applying the rule of thirds to your product images would proportionally align these elements together into a beautiful image that your users will love. Looking at the product image for the Blackberry Playbook, you notice that there is a nice balance between the elements. No element gets ignored or overlooked because the elements all touch the intersecting lines of the grid. The elements are all arranged and positioned in a way that makes it easy for users to capture the beauty of the product in a full single view.

What the Rule of Thirds Can Do to Your Images

On the other hand, a bad product image would not be proportionally aligned with the rule of thirds. It would make it difficult for users to look at, and force them to move their eyes around the page to view each element. In HP’s product image, the only element that touches a grid intersection is the picture of the product. All the other elements are floating to the edge, making the product image less cohesive.

What the Rule of Thirds Can Do to Your ImagesHow to apply the rule of thirds

Applying the rule of thirds is easy. Simply divide your composition into thirds horizontally and vertically. This will create 9 rectangles and 4 intersections. Place 4 dots where the lines intersect. Then place your most important elements on the grid intersections or where the dots are. If you have remaining elements, place them on one of the lines near an intersection. The dots should act like magnets that pull the elements close to it. When you apply the rule of thirds, the result is this a beautiful and proportional product image.

The only time you would not want to use the rule of thirds is when the main element is so dominant that centering it is the only way to balance the composition. In this situation, the rule of thirds is not needed.

The rule of thirds is an effective technique that is easy to apply. Applying it to your product images will keep all the elements of image balanced, proportional and aligned, making it aesthetically pleasing for users to look at. Hopefully, as a result, you will not only make your website beautiful, but you will sell more products too.


What the Rule of Thirds Can Do to Your Images What the Rule of Thirds Can Do to Your Images

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

8 Responses to “What the Rule of Thirds Can Do to Your Images”

  1. Rafael Lages

    Sep 30th, 2010

    Please post about golden ratio in webdesign too

    thanks

  2. Adam

    Oct 4th, 2010

    THANK YOU! I’ve been making these 950×500 title cards, and haven’t been able to make them look right. This really helps.

  3. Simon

    Oct 14th, 2010

    Good post!

    Indeed, please do one about Golden Ratio also.

  4. Steve

    Nov 20th, 2010

    If you’re using the rule of thirds in conjunction with web design are there any other rules you can use to further encourage action?

    For example, I’m designing a page for a product that I want people to sign up for. For whatever reason, I feel compelled to put the “Free Trial” button on the top-right dot (or at least very close to it). I’m guessing this is just a typical design pattern…

    If you have any suggestions or know of any good resources for this, I’d love to know!

    Great website btw!

    • anthony

      Nov 20th, 2010

      Thanks, Steve. The placement of the button is important, but what will encourage users to act and click the button is the main headline that supports the button. The article, “Headlines and Images Communicate Value Instantly” talks about the importance of a good headline. Headlines are what users will focus on when they enter your website, so your headline has to be extremely well-written. It has to communicate the single most important benefit or value proposition you offer in a simple and direct manner. For me, a good headline is by far much harder to write than designing a button.

  5. Will Quick

    Nov 22nd, 2010

    Hi Anthony,

    Great article, but I’ve got one question:

    Do you think this would apply to the above-the-fold area of a website?
    How does this law of thirds tie in with the F-scanning reading pattern?

    - Will

    • anthony

      Nov 22nd, 2010

      Thanks, Will. I think the rule of thirds could be applied to the above-the-fold area if that area is a single piece. The rule of thirds is mainly used to arrange the micro elements of a composition in a balanced and symmetrical way that allows us to capture the gestalt. The rule of thirds focuses on the gestalt of design for aesthetic purposes, while the F-pattern focuses on the placement of individual elements for practical purposes.

  6. Hans

    Mar 29th, 2011

    Thank you for touching this very interesting topic!

    Reintroducing the knowledge of those Renaissance masters into web design makes a website “beautiful” in a natural way.

    Most users won’t understand why they are experiencing a website more beautiful than others. But they’ll feel it.

    Same thing is happening when we are watching those Renaissance (and older) master pieces. They are “beautiful”. Because they are using proportions found in nature (and in mathematics ;)

    Google for the proportions of the ancient Temple of Acropolis in Greece. These folks knew what they were doing (many modern web designers don’t ;)

    I’m betting that a “natural” website has a lower bounce rate, than a page which ignores The Golden Proportions.

    A “beautiful” website is inviting users to explore. Users feel better in contact with good (=natural) design. Good design builds trust on the unconscious level.

    Ask Apple.

    Old masters knowledge + modern usability guidelines = more success.

    Enjoy!
    Hans

    .

Leave a Comment