The Rule of Thirds is a web design technique that helps designers create visually balanced grid layouts and image placements that are aesthetically appealing to viewers.
The method is straightforward and involves placing a simple grid overlay that divides a design space, image, or page section into thirds – both horizontally and vertically. The resultant line intersections create nine equally shaped boxes.
Why Use the Rule of Thirds?
The Rule of Thirds is used to create pleasing aesthetics and balance in images to make it easy for viewers to interact with them and, by so doing, maintain their interest. Used correctly, placing “items of interest” – or “sweet spots” on the “thirds” of an image attracts user attention in a more impactful, visually appealing way. Web designers often use the Rule to ascertain some of the most essential grid and layout-related design decisions, such as:
- Where to place the most important elements
- What type of grid to use
- What dimensions each grid element should have
- What your image ratios should be
- How much negative space to add around and between elements
Element Placement and the Rule of Thirds
As one can see from the above web design decisions, the first question is where to place the most critical elements (i.e., site logo, calls to action, etc.). The answer is generally to place them where the viewer will look first. Using the Rule of Thirds helps designers know where that is – on the intersections. The reason is that the viewer’s eye path travels a predictable route.
It begins at the upper left of an image (or site), moves down to the bottom left, moves onto the upper right, and ends at the bottom right. These are the exact “sweet spots” of the lines in the Rule of Thirds grid. So, if you place your most important element on or near the upper-left grid point, you’ll be more likely to make sure your viewer sees it first.
