Grid design:
  • A grid is a two dimensional structure made up of a series of intersecting straight like vertical, horizontal (or) curved guide lines used to structure content.
  • It makes easier for designers to work and collaborate on the design as they provide a plan for where to place the elements.
  • The grid is made up of several parts. Not every part is present in every grid, it depends on the sort of grid.
  • The most important parts of a grid are:
     - Format:
  • The format is the full area where the final design will be laid out.
  • In print design, the format is the page and in web design the is the browser window.
      - Margin:
  • Margins are the empty spaces between the edges of the format and content.
  • The size of the margins is what gives the content a general shape, usually a rectangle.
      - Flow lines:
  • Flow lines are horizontal lines that separate the different sections of a grid into parallel bands.
  • They help the reader follow the content of the layout.
  • Some flow lines are called hang lines and others called base lines.
      - Modules:
  • Modules are the building blocks of any grid.
  • They are the spaces between the flow lines and vertical lines.
  • Vertical groups of module together create columns and Horizontal groups create rows. 
     - Spatial zones (or) Regions:
  • Groups of adjacent modules in vertical and horizontal areas create spatial zones (or) regions.
  • A vertical region can hold a block of text, a horizontal region can hold a video.
     - Columns:
  • Columns are vertical spatial zones (or) regions that fit fully from the top to the bottom margin.
     - Rows:
  • Rows are horizontal spatial zones that fit fully from left to right margin.
     - Gutters:
  • The spaces between rows and columns are Gutters.
  • These should always be equal between columns (or) rows, in order to maintain a visual balance.
     - Markers:
  • Markers are areas inside the running header (or) footer that mark the exact place where repeating information from page to page.
  • Example:

    
     Types of Grids:
     There are five types of Grids 
     1. Manuscript Grid  
  • It is used in documents, ebooks, pdfs and presentations with lots of text.
  • Manuscript grids in a text document separate the header, the footer and the space on the edges (margins). The manuscript layout creates a rectangle inside the page (format), like a bounding box for text.
     2. Column Grid:
  • It is used for magazines to organize content in columns so it is easier to read.
  • Magazines use column grids to place the text in easy-to-read sections. 
  • Column grids are used inside websites as well, like in online newspapers or blogs.

3. Baseline Grids:
  • These are a bit more technical and are defined by the line in which the text sits. This grid creates a good reading rhythm for any design with lots of text.
  • It will give the headings and subheadings a proportional space in relation to the body text, making them more pleasing to the reader.

     4. Modular grid:
  • These are like a checkerboard that can display many things for easy access.
  • Newspapers use column and modular grids to organize the stories comfortably and easy to read.

     5. Hierarchical grids:
  • These are mostly used on websites, organizing content according to their importance.
  • The purpose of a hierarchical grid design is to organize elements in order of importance.