+
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

Video Transcription

Download PDF

Hi, everyone. My name is Mario. And I'd like to welcome you to today's lesson on the grid. So today's lesson, we'll learn about the history of the layout grid and how to identify and define its component parts. So as always, throughout the lesson feel free to pause, fast-forward, and rewind at your own pace. And when you're ready to go, let's get started.

All right. So let's get started by introducing grid, with its definition. And grid is an underlying structure upon which a layout can be built, typically comprised of rows, columns, and the gaps between them. So here's what that looks like. And as the definition said, it's an underlying structure. And then you can build on top of that.

And a grid is made up of components, namely modules and rows. So if we take a look at our spread, you may remember we had our gutter, which was the white space between pages. We had our alleys, which is the white space between our columns. We had our margins, the space surrounding the page, separating the text from the edges of the page.

And then we had our columns. I'm not sure why I chose to show columns last. But anyways, if we use a bit of X-ray vision here, we can see our grid that was used as an underlying structure for our design. And the red line divides our two pages. And then our gutter, again, is the space between the pages.

The column is that component that spans the page vertically. And more can be used or added and it'll began to look like our columns of text. Between the columns, we have our empty space there, which is the alley. And then the empty space separating our content from the edge of the page is our margin.

So the new key term introduced this lesson is a row, which is a component of a layout grid which spans the page horizontally. And just like our columns, you can start to add more and it can create a different layout. They could all be new lines of text. And then another key term, module. And module's the name for the basic component of the layout grid which overlays a matrix of columns and rows. So these are the blocks that can make up a row or a column.

So let's move away from this kind of Tetris-y example. And let's look at a brief history of the development and use of the grid in graphic design. So 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. And quite a nice photo of him there, interesting things going on with his ghost hands. I'm not sure what that's about.

And we'll also briefly touch on the work of Massimo Vignelli. And he's a designer who has done work in a vast range of areas, from package design, houseware, furniture, and more. But some important work relating to the use of grid was his work for the National Park Service. And he designed this Unigrid System which looks like this. And it allowed the National Park Service to then create brochures in many basic formats while keeping a consistent look across all its work.

So notice that the Unigrid keeps that black bar up top. And you can look at some of the nice work produced here. And if we kind of go back to that X-ray, you can see that the Unigrid helps keep that nice consistent look across the board, all again thanks to that underlying Unigrid.

So I mentioned Josef Muller was a key proponent of the International Style movement. And this style, also known as Swiss Style, is characterized by the use of asymmetrical-balanced rigid typographic grids and the use of sans serif typefaces. So you can see here in this first example the bottom of the piece is a lot heavier if we were to split the design in half top and bottom. And you can see the use of sans serif typeface, and quite different use of type. The words der and film overlap, not something that we're accustomed to seeing.

In this second example, 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.

We also have another style called de Stiji, which means the style, a Dutch art movement focused on use of simple geometric form and primary colors. And the painter Mondrian was part of this movement. And you can see a piece of his here below. And note again that grid quality and structure.

And here's an example of type used in this style. So again, you can sort of see how things are starting to get laid out and a bit more experimental almost.

Well, everyone, that ends our lesson for today. We'll conclude with our key terms, grid, module, row, Josef Muller-Brockmann, de Stijl, and International Style. Hope you've enjoyed this lesson with me today. My name is Mario. And I will see you next lesson.

Notes on "The Grid"


Citations

Image of Grid Layout, Public Domain

http://en.wikipedia.org/wiki/File:Grid1aib.svg

Image of Grid Layout with Type, Public Domain

http://en.wikipedia.org/wiki/File:Grid2aib.svg

Image of Magazine Spread, Creative Commons

http://www.flickr.com/photos/emoore/525272482/

Image if Josef Muller, Creative Commons

http://www.flickr.com/photos/peromaneste/373622828...

Image of Massimo Vignelli, Public Domain


Image of Unigrid System, Public Domain

http://www.aisleone.net/2010/design/massimo-vignel...

Image of NPS Brochures, Public Domain

http://www.nps.gov/history/history/online_books/br...

Image of Der Film Poster, Creative Commons

http://www.flickr.com/photos/80magazine/3814968284...

Image of Der Sterne Poster, Creative Commons

http://www.flickr.com/photos/80magazine/3837098663...

Image of Mondrian RYB, Public Domain


Image of Destijl Type, Public Domain



TERMS TO KNOW
  • Grid

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

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

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

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

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