Grid layout

1

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

Examples

hjh

3

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

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

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

Example 3 column

Text

7

Text Picture

Example 3x3

Text

8

SideBar

Text

Picture

Picture

Picture

Text

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

Working in squares

The grid system works just as well in a square format as a rectangle format

10

TextText

Picture

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

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

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

Broken Rules

14

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.

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

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

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

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

Experiment

Text

19

These layouts have the same information on them but have be created using grids with different grid units and alleys