What the Rule of Thirds Can Do for Product Images

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

If your website sells products, it’s important that your product images appeal to users. Beauty of an image doesn’t just come from typography and color. It also comes from the way you arrange elements in space. 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.

The  rule of thirds is an old technique that was first used on paintings during the Renaissance times. But you can apply it to product images on your website. A typical product image has the following elements:

  1. Product picture
  2. Product name
  3. Tagline or headline
  4. Call-to-action button
  5. Background graphic

The Right Way

Applying the rule of thirds to your product images would arrange these elements in a way that gives users the best view of your product. Notice that Blackberry’s product image has a spatial 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 in a way that makes it easy for users to capture the beauty of the product in a single focal view.

rule-of-thirds-good

The Wrong Way

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

rule-of-thirds-bad

How 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 closer to the dots the better.

The rule of thirds is an effective technique that can make your images more aesthetically pleasing. Not only that, but it makes users move their eyes less when they view your image. An image that uses the rule of thirds isn’t only more compelling to users, but it can also help you sell more products.


Light Resume Light Freelancer Wireframe Papers Wireframe Patterns

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 for Product 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