Rule of thirds

Draw two evenly spaced lines across a frame and two down it, and you have nine cells and four intersections. The rule of thirds says to put the things that matter on those lines: the horizon on one of the horizontal ones, the subject on one of the four intersections, a building’s edge along a vertical. It comes from painting and photography, it is the first composition rule anybody is taught, and it survives into interface work for the same reason it survived in photography, which is that it is a fast, memorable way to avoid the dead centre.

What it is really a rule against is symmetry by accident. A subject placed exactly in the middle divides the frame into equal halves in both directions, which gives the eye nowhere to travel and leaves no room for the thing the subject is looking at or moving toward. Off centre placement creates that room, and the thirds are simply an easy off centre that anyone can find without measuring. The related claim, that the intersections are where the eye naturally falls, has never held up well under eye tracking studies. The rule is useful as a default, not as a law of perception, and plenty of good compositions are dead centre on purpose.

Its more careful cousin is the golden ratio, which places the same lines at roughly 38 and 62 percent instead of 33 and 67. The two are close enough that at normal sizes the difference is a few pixels, which is a good argument for using whichever one you can apply without thinking. In an interface the rule of thirds gets used for the things that are pictures first: a hero image and its crop, a card’s cover art, a video poster frame, where the focal point should be placed. That is different work from the grids that carry a layout, the layout grid and the modular grid, which divide a page into columns and fields for content to occupy rather than marking where one focal point should sit.

The practical version in product work is not the overlay, it is the crop. When an image is going to be cropped to several aspect ratios, the safest thing is to know where the focal point is and keep it near a third, since that survives a square crop, a wide crop and a tall one, while a dead centre subject drifts to the edge in exactly one of them. Naming the focal point and stating which third it belongs on is what turns a compositional rule into something an automatic crop, a designer and a photographer can all follow. This is close to what visual hierarchy does with ranking rather than placement: thirds decide where the most important thing goes, hierarchy decides what that thing is.