+
The Grid

The Grid

Description:

In this lesson you will learn about the history of the layout grid and how to identify and define its component parts.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

What's Covered

This lesson will discuss the history of the layout grid and how to identify and define its component parts. Specifically, this lesson will cover:

  1. Grid
  2. Josef Muller-Brockmann
  3. de Stiji
  4. Massimo Vignelli

1. GRID

Grid is an underlying structure upon which a layout can be built, typically comprised of rows, columns, and the gaps between them.

Term to Know

    • Grid
    • 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.

Terms to Know

    • Module
    • Name for the basic component of a layout grid which overlays a matrix of columns and rows.
    • Row
    • A component of a layout grid which spans the page horizontally.

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.


2. JOSEF MULLER-BROCKMANN

Josef Muller-Brockmann was a Swiss graphic designer, teacher, and key proponent of the International Style movement.

Terms to Know

    • Josef Müller-Brockmann
    • Swiss graphic designer, teacher and key proponent of the International Style movement. Müller-Brockmann pioneered the use of grid systems in graphic design.
    • International Style
    • 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.

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.


3. DE STIJL

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.

Term to Know

    • de Stijl
    • Means "The Style"; Dutch art movement focused on use of simple geometric form and primary colors. The painter Mondrian was part of this movement.

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.



5. MASSIMO VIGNELLI

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.


Summary

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

TERMS TO KNOW
  • International Style

    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.

  • de Stijl

    Means "The Style"; Dutch art movement focused on use of simple geometric form and primary colors. The painter Mondrian was part of this movement.

  • Josef Müller-Brockmann

    Swiss graphic designer, teacher and key proponent of the International Style movement. Müller-Brockmann pioneered the use of grid systems in graphic design.

  • Row

    A component of a layout grid which spans the page horizontally.

  • Module

    Name for the basic component of a layout grid which overlays a matrix of columns and rows.

  • Grid

    An underlying structure upon which a layout can be built, typically comprised of rows, columns and the gaps between them.