Grids

712 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
712
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Grids

  1. 1. Grid layout 1
  2. 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
  3. 3. Examples hjh 3
  4. 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. 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. 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
  7. 7. Example 3 column Text Text Picture 7
  8. 8. Example 3x3 Text Picture Text Text Picture Side Bar Picture 8
  9. 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. 10. Working in squares The grid system works just as well in a square format as a rectangle format Picture Text Text 10
  11. 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. 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. 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. 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. 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. 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. 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. 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. 19. These layouts have the sameExperiment information on them but have be created using grids with different grid units and alleys Text 19

×