This lesson will discuss the history of the layout grid and how to identify and define its component parts. Specifically, this lesson will cover:
Grid is an underlying structure upon which a layout can be built, typically comprised of rows, columns, and the gaps between them.
Below is an image of a grid.
As the definition said, it's an underlying structure. You can build on top of that. A grid is made up of components, namely modules and rows.
Within an average spread you have the gutter, which is the white space between pages. There are also the alleys, which are the white spaces between the columns. Finally, there are margins, the space surrounding the page, separating the text from the edges of the page, and then columns. However, if you use a bit of X-ray vision, you can see a grid that was used as an underlying structure for the design.
The red line divides our two pages and then the gutter, again, is the space between the pages. You can see the column is the component that spans the page vertically. More can be used or added, and it will begin to look like the columns of text.
Between the columns, there is empty space, which is the alley. Then the empty space separating content from the edge of the page is the margin.
The row is a component of a layout grid which spans the page horizontally, and just like the columns, more can be added and it can create a different layout.
The module is the name for the basic component of the layout grid which overlays a matrix of columns and rows.
Josef Muller-Brockmann was a Swiss graphic designer, teacher, and key proponent of the International Style movement.
Muller-Brockmann pioneered the use of grid systems in graphic design. The International Style movement, also known as Swiss Style, is characterized by the use of asymmetrical-balanced rigid typographic grids and the use of sans serif typefaces.
You can see in the image above that the bottom of the piece is a lot heavier. You can see the use of sans serif typeface, and quite different use of type. The words "der" and "film" overlap. In the image below, you start to see similar characteristics again, the use of sans serif typefaces and that asymmetrical balance again.
There's more going on in the right portion of this design and the type is a lot larger compared to the small text on the left. So again, it's creating this asymmetry. There's more visual weight on one side than the other.
There is another style called de Stiji, which means the style, a Dutch art movement focused on use of simple geometric form and primary colors.
The painter Mondrian was part of this movement. In the image below, you can see that grid quality and structure.
Below is an example of type used in this style.
You can sort of see how things are starting to get laid out and a bit more experimental almost.
Massimo Vignelli is also a designer who has done work in a vast range of areas, from package design, houseware, furniture, and more. Some important work relating to the use of grid was his work for the National Park Service, when he designed the Unigrid System below.
It allowed the National Park Service to then create brochures in many basic formats while keeping a consistent look across all its work.
Well, that ends the lesson for today on the grid. This lesson covered the basics of the grid, and introduced the space layout terms module and row. The lesson also covered the history of the grid, looking at Josef Muller-Brockmann and international style, de Stijl, and Massimo Vignelli.
Keep up the learning and have a great day!
Source: SOURCE: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ
This style, also known as "Swiss Style", is characterized by the use of asymmetrical balance, rigid typographic grids and the use of sans-serif typefaces.
Means "The Style"; Dutch art movement focused on use of simple geometric form and primary colors. The painter Mondrian was part of this movement.
Swiss graphic designer, teacher and key proponent of the International Style movement. Müller-Brockmann pioneered the use of grid systems in graphic design.
A component of a layout grid which spans the page horizontally.
Name for the basic component of a layout grid which overlays a matrix of columns and rows.
An underlying structure upon which a layout can be built, typically comprised of rows, columns and the gaps between them.