grids & 3rds

Breaking out of the Grid!(using grid systems in design)

What’s a grid?

What’s a grid?• A grid is an invisible structure used to guide the

placement of elements on your page.

What’s a grid?• A grid is an invisible structure used to guide the

placement of elements on your page

• It assists designers in achieving cohesion throughout adocument or range of work

What’s a grid?• A grid is an invisible structure used to guide the

placement of elements on your page

• It assists designers in achieving cohesion throughout adocument or range of work

• Adds a visual integrity to the work

Alleys and gutters!?

…Not those, these:

Grid Systems• An imposition?

Fig. 1 Fig. 2

Grid Systems• An imposition?

• Ways to break it down?

Fig. 1 Fig. 2

Grids and the Ratio• Square align and order!

Grids and the Ratio• Square align and order!

• The grid is a key tool for graphic and web designersalso (Mondrian)

Thumbnail Experiments

Thumbnail Experiments

Dominant Elements• Don’t make everything the same size

Dominant Elements• Don’t make everything the same size

• Decide which elements are the mostimportant

Dominant Elements• Don’t make everything the same size

• Decide which elements are the mostimportant

Consider giving things an order ofimportance:

1. Primary importance

2. Secondary importance

Grid ExercisesExperiments within the Grid

1. Using a found brochure measure the grid patter andanalyse the use – or not of the rule of thirds or thegolden ratio

2. Copy the grid as you see it onto a separate piece ofpaper

3. Using cut outs from magazines and newspapersreproduce the leaflet with your design

Grid ExercisesExperiments within the Grid

1. Using a magazine of your choice – or a given, analyseand measure the grid pattern (use tracing paper ifneed be)

2. Using your sketch book and a fine liner – mark out acopy of the same grid (this is an experiment you donot need to make it too exact!)

3. Using cuttings from magazines and newspapersdesign at least one new layout based on the same gridpattern

4. Complete 2 more for homework