Understanding the Rule of Thirds in Web Design

The page explains the rule of thirds as a 3 by 3 grid that can be placed over images and web layouts to see where attention naturally falls. It says the strongest points are the grid intersections and that this idea applies to composition, cropping, and element placement on a site.

Reading notes

#

• The rule of thirds is described as a 3 by 3 grid with equal parts that can be applied to an image or a webpage.
• The concept has been used for centuries and was named by John Thomas Smith in 1797.
• The page says the rule remains present even when it is not planned for, so designers can use it to their advantage.
• The intersections of the grid are presented as the most eye-catching points.
• The top-left intersection is said to draw attention first, followed by the one below it, then the top-right and bottom-right intersections.
• Perfect two-part symmetry is presented as less appealing than a composition shaped by thirds.
• In photography, placing subjects in third regions is linked with balance and harmony.
• An object placed in one third can suggest motion.
• For landscapes, the horizon should be placed in the top third.
• For portraits, the eyes should be aligned with interesting grid lines.
• Cropping should remove dead space and bring the main subject closer to a primary grid line.
• In web design, banners, navigation, content blocks, and ads can be placed with the thirds grid in mind.
• On homepages, the page recommends using thirds to position banners, social icons, ads, and key content.
• On content pages, thirds can help place images and guide readers’ focus.
• The page says websites with sidebars on both sides often leave the center third for main content.
• The rule of thirds is presented as a guideline for final adjustments rather than a requirement for planning an entire site.
• It can also be used with only vertical thirds, only horizontal thirds, or a chosen third used as a repeated focus.