Response to The Grid System

The Grid System


Grids act as a tool to help give consistency and order to page elements such as images and texts. 

“It allows you to think less about basic design principles and more about finding a design solution. This allows you to design at a more advanced level, being more able to think about advanced concepts like page rhythm.”


Applying grid and format: 

  1. Define the size of the page
  2. Define where the text will be placed
  3. Choose a font (best to stick to one and play with the typeface) 
  4. Test until you are satisfied with the type
  5. Decide how many units/columns you want your grid to be
  6. Create and apply grid
  7. Redefine the type area – play with certain composition and layout 
  8. Check how easy it is to read, how heavy it looks and how the type is positioned. Check on the gutters and leading.

There is no set rule on the number of grids you can create. However, the less divisions you have the more articulate and minimal your design will seem. The more divisions you create, the more complex the grid becomes to work with in keeping consistency. On the other hand, the more flexible your grid becomes, giving you various choices to play with your composition. There are multiple grid systems in the design world, but they each have their unique personality and uses. The final choice is up to the designer to articulate and choose what fits their design purpose the most.

Column Grid
Column grids are good to use when discontinuous information needs to be presented. It can be dependent or independent from each other, and crossed over by images/graphics, creating a different visual layout. One column might be used for text, another for images, and another for captions or quotes. This gives the page layout flexibility when organising texts onto the page. You can separate blocks of texts by placing them in different columns yet show a flow between them. It should also be able to accommodate legibility, too narrow of a column can make reading difficult.

Examples of a Column Grid System:

A symmetric column grid has all columns the same width. For example, the most common symmetric column grid will be found on printed newspapers to help organise information and stories.

An asymmetric grid has columns proportionally thinner or wider than others.

Other examples:

Modular Grid
Modular grids are like column grids but has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. Between the column, row and the gutter creates a module. It allows you to arrange text in many various ways, thus this is good for complex projects that require more control than a column grid. The beauty of modular grid is that you can replace or add any module without affecting the rest of the system. Giving the whole page a consistent and structured aesthetic.

Examples of a Modular Grid System:

Resources:
http://www.typophile.com/sites/default/files/old-images/How%20you%20make%20a%20grid.pdf
http://www.thegridsystem.org/pdf/grids_are_good.pdf
https://ayapeters.com/emotions-in-grid

4 Types of Grids And When Each Works Best

A Quick Look at Types of Grids for Creating Professional Designs


Pinterest