Design Composition: Layout, Balance, and Visual Flow

Composition is the arrangement of visual elements within a design, and it determines whether a viewer understands your design immediately or has to work to make sense of it. A composition that works is usually invisible: the viewer doesn't notice it, they just find the design easy to navigate. A composition that doesn't work is immediately felt, even when it can't be named. This guide covers the principles that make composition work, the practical tools designers use to structure layouts, and how to apply them in Linearity Curve.

What composition actually controls

Every composition makes decisions about three things, whether the designer makes them consciously or not:

What the viewer sees first. The element with the most visual weight — the largest, most contrasted, most isolated — is where the eye lands first. If that element isn't the most important thing in the design, the composition is working against the message.

What the viewer sees next. After the first element, the eye follows a path through the design. Good composition designs that path deliberately. Poor composition leaves the viewer's eye to wander, often settling on the wrong thing.

How the viewer feels about the whole. Balance, tension, density, and space all contribute to an emotional response before any content is read. A crowded composition feels anxious. A spacious one feels confident. A symmetrical one feels formal. These aren't accidents — they're the result of compositional choices.

Understanding composition means understanding that every element placement is a decision about visual attention — and that attention is the scarcest resource in any design.

Composition is the difference between a layout that communicates and one that just contains elements.

Visual hierarchy and focal points

Every composition needs a clear entry point — a focal element that the eye is drawn to first. Without one, the viewer's attention scatters across the design and nothing is read with the right weight.

Focal points are created through:

• Size — larger elements attract attention before smaller ones
• Contrast — high-contrast elements (dark on light, vivid on muted) draw the eye first
• Isolation — an element surrounded by space has more visual weight than one surrounded by other elements
• Colour — a single vivid colour in a muted composition becomes an immediate focal point
• Position — elements at the top-left and centre of a composition naturally attract attention in Western reading contexts

Once the primary focal point is established, secondary and tertiary elements support it — they provide additional information without competing for the same level of attention. This layering of attention is visual hierarchy: the system that tells the viewer what matters most, second most, and least.

Visual weight is the perceived heaviness of an element. Large, dark, isolated, and saturated elements have high visual weight. Small, light, surrounded, and muted elements have low visual weight. Balance in composition is the distribution of visual weight across the layout — not symmetry, but equilibrium.

Visual hierarchy creates an attention sequence, the viewer reads the composition in the order the designer intended

Balance: symmetrical, asymmetrical, and radial

Balance is the distribution of visual weight across a composition. It doesn't require symmetry — it requires that the design feels stable and intentional rather than accidentally lopsided.

Symmetrical balance

Elements are mirrored across a central axis — horizontally, vertically, or both. Symmetrical compositions feel formal, stable, authoritative, and calm. They're common in logos, editorial title pages, architectural photography, and contexts where precision and order need to be communicated.

The limitation of symmetry is that it's static. The eye reaches the centre and stops — there's nowhere to travel. For designs that need to feel dynamic, engaging, or modern, symmetry often isn't the right choice.

Asymmetrical balance

Different elements of different sizes, colours, and weights are positioned so the overall composition feels stable — even though nothing is matched or mirrored. Asymmetric balance is more dynamic than symmetric balance and requires more deliberate judgement to achieve.

The principle is visual weight, not size. A small, vivid, isolated element can balance a large, muted, busy element on the opposite side of a composition. Much of modern web design, editorial layout, and brand design uses asymmetric balance because it carries more energy while still feeling considered.

Radial balance

Elements are arranged around a central point, radiating outward. Less common in standard layouts, but powerful in logo design, decorative illustration, and brand marks. Mandalas, circular logos, and radial icon sets use this structure.

Three types of balance: symmetrical (formal, stable), asymmetrical (dynamic, modern), radial (centred, decorative). Each communicates a different tone before any content is read.

Grid systems and alignment

Grids are the invisible structure that makes composition consistent and scalable. They define where elements can be placed, how they relate to each other, and how a layout adapts across different sizes.

Column grids

The most common grid in editorial and web design. Content is divided into equal-width columns with consistent gutter spacing between them. Most web layouts use 12 columns — a number divisible by 2, 3, 4, and 6, giving maximum layout flexibility. Print editorial typically uses 6 or 8 columns.

Elements span multiple columns. A full-width hero image might span all 12. A sidebar might span 3. Body text might span 7. The column grid creates the underlying logic that makes all of these feel related to each other.

Baseline grids

A horizontal grid that text sits on — like lined paper. Baseline grids ensure that text from different columns and different sizes aligns horizontally, creating a sense of vertical rhythm throughout a layout. Important in long-form typographic design; less critical in short-form or highly visual work.

Modular grids

A grid of both columns and rows, creating a matrix of equal cells. Modular grids are the basis of design systems, icon sets, and grid-based illustration. Every cell follows the same logic, making systematic work significantly faster.

Alignment is what makes a grid feel like a grid rather than a suggestion. Elements that align to the same grid lines feel intentionally related. Elements that don't feel accidentally placed — even when the misalignment is small. The eye detects misalignment before the brain names it.

The most common alignment error is near-alignment: two elements that are almost — but not quite — on the same line. This reads as a mistake. Either align precisely or create deliberate, obvious offset.

Visual flow and the Z and F patterns

Viewers don't look at a composition randomly — they follow predictable patterns based on how they've learned to read. Understanding these patterns lets designers align composition with natural eye movement.

The Z pattern

In compositions with low information density — advertising, hero sections, posters — the eye tends to follow a Z-shaped path: starting at the top left, moving to the top right, dropping diagonally to the bottom left, then moving to the bottom right.

This is why many advertising layouts place the logo or headline at the top left, a supporting image in the middle, and the CTA at the bottom right. The Z pattern delivers the viewer to the call to action as the natural conclusion of reading the composition.

The F pattern

In text-heavy, high-information-density contexts — articles, email, dashboards, search results — the eye follows an F-shaped pattern: reading horizontally across the top, then dropping down and reading a shorter horizontal sweep, then scanning vertically down the left edge.

The F pattern has significant implications for content hierarchy: the most important information should be in the top horizontal band and the left vertical column, because those are the areas that receive the most attention before the reader drops off.

The Z pattern guides the eye through advertising and hero compositions. The F pattern describes how readers scan text-heavy layouts, both have direct implications for where to place key content

Gestalt principles in composition

Gestalt psychology describes how the human brain organises visual information into meaningful patterns. Several Gestalt principles have direct practical applications in composition.

Proximity. Elements close to each other are perceived as related. Elements far from each other are perceived as separate. This is the compositional logic behind grouping — placing related items together and separating them from unrelated items with white space creates structure without any explicit lines or borders.

Similarity. Elements that share visual characteristics — same colour, shape, or size — are perceived as belonging to the same group. This is how icon sets, navigation items, and repeating components feel coherent even when they depict different things.

Continuation. The eye follows lines, curves, and implied paths, even when they're not explicitly drawn. A row of elements creates an implied line the eye will follow. A curved arrangement implies a path. Designers use continuation to guide the eye through a composition without the viewer being aware of it.

Figure-ground. The eye distinguishes between foreground elements (figures) and background (ground). Strong figure-ground contrast makes focal elements immediately clear. Weak figure-ground relationships make compositions feel muddy and hard to read.

Closure. The brain completes incomplete shapes. The FedEx arrow, the WWF panda, and the IBM striped letters all exploit closure — the viewer's brain perceives a complete form even where one isn't fully drawn. This is the principle behind negative space logos and clever compositional illusions.

Composition in Linearity Curve

Linearity Curve has several tools that directly support compositional work.

Grid and snapping

Enable the grid in Settings > Canvas. Curve supports both a square perpendicular grid and an isometric grid. Set the grid spacing to match your layout's column width or baseline unit — snapping will then lock every element to the grid automatically, making precise alignment fast without manual adjustment.

Alignment tools

Select multiple elements and use Curve's alignment tools to align them to each other or to the artboard. Options include align left, centre, right, top, middle, bottom, and distribute evenly — both horizontally and vertically. Even distribution is particularly useful for spacing repeating elements (navigation items, icon sets, card grids) consistently without manual measurement.

Artboard setup

Set your artboard to the exact dimensions of your output — social media format, screen resolution, print size. Working at the correct dimensions from the start means compositional decisions are made in the actual context of the final output, not approximated and adjusted later.

Grouping for compositional control

Use groups (Cmd+G) to treat related elements as a single compositional unit. A card with an image, headline, and body text becomes one moveable element once grouped — you can reposition it within the layout without disrupting the internal relationship of its components. Nested groups let you move sections while preserving sub-group structure.

Visual weight check

Curve's canvas view — zoomed out to see the full artboard — is the fastest way to evaluate overall compositional balance. The eye reads the composition very differently at full view than at working zoom. Make a habit of zooming out after placing major elements to check visual weight distribution before adding detail.

Zooming out to full artboard view in Linearity Curve is the fastest way to evaluate overall compositional balance, detail work at close zoom hides weight distribution problems.

Common composition mistakes

This article is a part of the design principles guide — covering colour, typography, composition, and white space in professional design work.