Page Layout

1. Page Layout
The visual arrangement of text and images on a page.

2. The Gutenberg Diagram
In the olden days, only text
could be transferred to a page.
The Gutenberg Diagram
shows how the eye tracks on a
page of text.
We start in the top left and
progress to the bottom right,
and pay less attention to the
information in the fallow areas.

3. F-Layout
A modern-day diagram that
charts how an eye tracks on a
design.
Primarily used on the web.
1 2
3 4
5

4. F-Layout

5. Z-Layout
A variation of the Gutenberg
diagram.
Best with a row of info at the
top and bottom, and a large
image in the middle.
1 2
3
4 5

6. Z-Layout

7. Rule of Thirds
Imagine a grid that splits the
frame into thirds vertically and
horizontally.
Place the subject along those
grid lines. The intersections of
the lines are especially
compelling.
Works regardless of the size
of the frame or the visual
medium you are designing in.

8. The Golden Ratio / Divine Proportion
The ratio of a:b = a+b:a = φ (1.618033…)
First mentioned by the Greek Mathematician, Euclid (300 B.C.E).
Graphic designers use the golden section to create grids and layouts for websites and
books.
The Golden Spiral