2. What are grids?
Grids are guidelines used in the page layout process to help designers set out their page
The grid can be very simple and contain only 2 or 3 columns or they can be much more
complex and contain a large amount of columns and rows.
2
4. Using grids
Grids should be used to help you place your text,
photos and graphics on your page.
Once you have mastered the use of grids you can
start to experiment with them
Once you understand the rules, you can break
them
4
5. Terminology
Grid: The overall structure which you are working
in. Examples could be a 3 column grid or a 5x3 grid
Grid units: The areas on the grid where text and
images are placed
Alleys: The areas between the grid units which
should remain empty
5
6. Using grids
Each element of text, photography or
graphics should fit neatly into the grid units
you are using.
This will provide a clean, simple look and
keep everything in order and in line.
6
9. Moving on
This 8 column grid
helps the designer
break up the page
You can see how
they have used
multiple columns
for some blocks of
text and only single
ones in some areas.
9
10. Working in squares
The grid system works just as well in a square format as a rectangle format
Picture
Text
Text
10
11. Breaking the rules
Once you can use the grid system to bring order to your page
layouts you can start to use it to organise much more chaotic
layouts by:
Letting pictures or text break the boundaries of the grid boxes,
Combining text and pictures boxes
Adding boxes to your grid which do not conform to the pattern.
11
12. Rules
I have started with a simple
2x2 grid to create this layout
The text is split into separate
grid units and the image
covers two grid units.
Notice now the alleys are still
clear providing a clean,
simple look.
12
13. Rules
I have started with a simple
2x2 grid to create this layout
The text is split into separate
grid units and the image
covers two grid units.
Notice now the alleys are still
clear providing a clean,
simple look.
13
14. Broken Rules
In this example I have still used the
grid system but have let text and
images go over the boundaries of
the grid units and into the alleys.
The picture has been pushed out
of the edges of its unit
The bottom section of text has
been moved upwards towards the
top section and extended into the
bottom picture grid unit.
14
15. Broken rules continued
The layout with the broken rules
looks more creative and like
something you would see in a design
led magazine while the layout that
follows the rules looks more suited to
a magazine with a more traditional
layout.
Both layouts still have a flow through
them and could be used as articles.
This is because they both use the grid
system
15
16. Over to you
Draw yourself a 3x3 grid layout
Use the scrap magazines at the back to cut out
pictures and sections of text
Create a layout using the grid system, stick to the
rules!
Remember: Leave yourself some margins at the
edge of the page
16
17. Experiment
Now, draw another 3x3 grid
Use the grid as your guide but experiment with
breaking the rules
Look carefully at how a much more interesting
your designs can become whilst still having a clear
structure and flow
17
18. Moving on
There are many ways you can subvert the grid to create much more
interesting work
You could try:
Placing a random square in your grid to break the structure slightly
Using a very detailed grid like 12x12 or 20x20
Having a range of alley sizes on the page or none at all
18
19. These layouts have the same
Experiment information on them but have be
created using grids with different
grid units and alleys
Text
19
