grids & 3rds
DESCRIPTION
ÂTRANSCRIPT
![Page 1: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/1.jpg)
Breaking out of the Grid!(using grid systems in design)
![Page 2: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/2.jpg)
What’s a grid?
![Page 3: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/3.jpg)
What’s a grid?• A grid is an invisible structure used to guide the
placement of elements on your page.
![Page 4: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/4.jpg)
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
![Page 5: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/5.jpg)
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
![Page 6: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/6.jpg)
Alleys and gutters!?
![Page 7: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/7.jpg)
…Not those, these:
![Page 8: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/8.jpg)
Grid Systems• An imposition?
Fig. 1 Fig. 2
![Page 9: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/9.jpg)
Grid Systems• An imposition?
• Ways to break it down?
Fig. 1 Fig. 2
![Page 10: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/10.jpg)
Grids and the Ratio• Square align and order!
![Page 11: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/11.jpg)
Grids and the Ratio• Square align and order!
• The grid is a key tool for graphic and web designersalso (Mondrian)
![Page 12: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/12.jpg)
Thumbnail Experiments
![Page 13: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/13.jpg)
Thumbnail Experiments
![Page 14: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/14.jpg)
Dominant Elements• Don’t make everything the same size
![Page 15: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/15.jpg)
Dominant Elements• Don’t make everything the same size
• Decide which elements are the mostimportant
![Page 16: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/16.jpg)
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
![Page 17: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/17.jpg)
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
![Page 18: Grids & 3rds](https://reader030.vdocuments.us/reader030/viewer/2022020200/568c330e1a28ab02358b7a27/html5/thumbnails/18.jpg)
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