Embed Size (px)
DESCRIPTION
Â
Citation preview
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
