by anthony 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:
- Picture of the product
- Name of the product
- Tagline for the product
- Call-to-action button
- 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.
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.
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.