Key question
How does a layout guide the eye through a message?
Layout arranges image, type, and colour on the surface. A good composition guides the eye in the desired order, groups related elements together, and leaves room to breathe. This ensures that a message is quickly understood.
Learning objective: You are able to plan the visual hierarchy of a layout, use white space and grids purposefully, and choose between calm balance and dynamic tension.
Layout is planned order.
6.1 / Guiding the gaze
The eye is drawn to contrast.
Four elements guide the eye through a layout:
01
Eye-catcher
The most prominent element, usually an image or title, serves as the entry point.
02
Reading path
We read from top left to bottom right; a layout can take advantage of this.
03
Grouping
Elements placed close to each other are perceived as belonging together.
04
Contrast
Differences in size, colour, or shape attract attention.
You will already be familiar with the perceptual principles behind this, such as the Gestalt laws, from the Design Psychology course. In layout design, you apply them to direct the viewer's gaze: entry point, path, and focal point.
Plan your entry, route and destination.
6.2 / White space and grid
Empty space is active space.
White space is any unmarked area, regardless of its colour. It separates, groups, and gives weight to important elements. Generous white space creates a calm, high-end feel, whereas little white space feels dense and loud.
A grid divides the surface into columns, rows and margins. It creates order, shared edges and consistency across many formats. Josef Müller-Brockmann shaped the grid-based thinking of Swiss graphic design.
01
White space
Open space draws the eye to what matters.
02
Grid
Columns and margins create structure across all formats.
03
Alignment
Shared edges connect elements and create a sense of calm.
White space is design, not an afterthought.
6.3 / Balance and Tension
Tranquillity or dynamism is a choice.
Symmetrical layouts appear calm, stable, and solemn. Asymmetrical layouts create tension and movement, but need a counterweight so that they do not topple over. A large image can be balanced by a small, bold block of text.
The right effect depends on the message: an evening concert can handle dynamism, while a memorial service calls for calm. Decide consciously and then stay consistent.
Tension needs a counterbalance.
Exercise
One piece of content, three layouts
Task: Design the cinema poster in three layouts with identical content.
STEP 1
Create a grid with margins and at least four columns.
STEP 2
Design a symmetrical, an asymmetrical, and a variant with plenty of white space.
STEP 3
Draw the intended visual path on each printout.
STEP 4
Have two people say what they see first and what they see last.
Evaluation: Does the observed visual path match your planning? Which variant best suits the message?