Design Format Properties

Create a grid of 2 equally spaced vertical and 2 equally spaced horizontal lines — dividing a rectangle into 9 equal parts — and you’ll have an example of the rule of thirds.^[1] According to this rule, people tend to concentrate their attention along these lines and particularly at their intersections — the active zones of a composition. 

Photographers are taught the rule of thirds early on in their studies, as it’s one of the easiest ways to create a visually appealing, balanced composition. Designers should pay careful attention to these intersections when placing important page elements.

The rule of thirds determines where the focal points of your composition should be. Elements that fall outside of those areas receive less attention. These passive zones are perfect for secondary elements that don’t require immediate attention from users.

For example, you can place headers in the passive top zone. They’re easy to find when users need them, but don’t distract from the rest of the page.

Dynamic formats create the illusion of internal dynamics and movement, despite being made up of static elements.^[2] This is done by placing elements in such a way that forces users’ eyes to move. Placing elements at an angle, leaving negative space before or after an element, and positioning on the page can all give the impression of movement.

If you’re trying to create a calm and balanced composition, look to the static format. It doesn’t force movement of users’ eyes, allowing more natural eye tracking movement.

Static compositions use shapes that are balanced (often symmetrically) and don’t give the impression of movement.^[3] Consider them more like a resting state compared to the active state of a dynamic composition.

From Greek sculptors to the first typographers, humanity has always searched for perfect proportions. Their search led them to what we now know as the Golden Ratio (1:1.618), which is based on the Fibonacci sequence.^[4]

The Golden Ratio brings harmony and structure to your designs. It gives them a certain sense of artistry. They’re also more appealing to the human eye — in fact, we may be biologically hardwired to prefer structures that follow this rule.^[5]

The Golden ratio, also known as the golden section, divine proportion, Fibonacci spiral, or Phi (not to be mistaken for Pi), has been used in art and design since ancient times. Many examples exist in nature — including hurricanes, sunflower seed heads, certain seashells, and pinecones, among many other examples.^[6]

Using the golden ratio in your designs can pull users’ attention to the most important elements, like a CTA button. It can also give your design a sense of balance and harmony that’s immediately appealing to users.

When setting up grid proportions, using the Golden Ratio will create a more visually appealing grid than other methods. To make calculating that grid easier, you can use Fibonacci numbers — a never-ending sequence where every subsequent number is the sum of two previous ones (3, 5, 8, 13, 21, and so on). According to this method, the most pleasing aspects are 3:5, 5:8, 8:13, etc.

Placing important design elements at points where the golden ratio grid intersects can also have a profound impact on how much they stand out to users. This is the perfect place to put important links or CTAs.

Placing elements according to the rule of thirds tells your users where to look first. Elements in active zones immediately draw our attention. Elements in passive zones are only noticed after, making them feel less important.

Place things like header text, hero images, or CTA buttons in the active zones. Less important elements, like menus or secondary links, can be placed in passive zones where they don't stand out to users as much but are still readily available.

Elements that don’t need immediate attention — menus, secondary links, search functions, etc. — should be placed in passive zones. Placing more important elements there makes them less likely to be noticed — users would rather see them aligned along a rule of thirds grid. Avoid passive zones for elements that should immediately engage users and motivate them to take action, like the title, hero image, or CTA button.

Vertical layouts naturally lend themselves to movement and dynamic formats — our eyes start at the top and work their way down the page. Placing elements in a way that forces eye movement (such as vertical text in two columns) also adds to the sense of movement.

For calm, relaxing interfaces, static formats are best. Horizontal layouts can more naturally lend themselves to static formats, as they don’t force users’ eye movement. By balancing elements on both sides of the vertical axis, a stable composition is created.

Applying the golden ratio to your layouts can result in an exquisite design. If you draw an invisible spiral line from the bottom left corner through the entire example interface, you’ll see the larger focus on the left part, narrowing down to the box on the lower right. Subconsciously, naturally balanced designs like this are immediately appealing to users.