How the rule of thirds is used at locomote

5 min read

Team member looking towards camera

BY

Jacob Rena

Dramatic Black and White Portrait of a Man

The grid is the invisible skeleton of any strong web design, but rigidly adhering to a standard 12-column layout can leave a creative agency site feeling stiff and corporate. The Locomote template takes a different approach, heavily leaning into the Rule of Thirds to create an editorial, dynamic flow.

Breaking the rigid Grid

Instead of aligning images in perfectly symmetrical rows, Locomote uses the intersecting points of a three by three grid to stagger content. You’ll notice that a featured project might anchor the top left intersection, while the subsequent project sits further down on the right-hand axis.

Why it works for portfolios

It Creates Movement

The eye naturally bounces diagonally between these intersecting points. This creates a subtle sense of motion and momentum perfectly fitting for a template named Locomote.

It Establishes Hierarchy

By placing crucial elements like an arresting project thumbnail or a key "Services" heading along these power lines, the user subconsciously knows what is most important on the screen.

It Adds Editorial Elegance

The staggered, third-based layout mimics high end print design. It allows for massive pockets of whitespace, giving each individual image the breathing room required to be fully appreciated.

The Rule of Thirds at Locomote isn't a restriction; it's a framework for fluid, intentional storytelling.

Create a free website with Framer, the website builder loved by startups, designers and agencies.