MSPTC_Logo_large.jpg

Grid Systems


Definition

The most flexible foundation to support the designer working in two and three dimensions is that of the grid. The grid divides a two-dimensional or three-dimensional space into smaller compartments. The fields or compartments may be the same or different in size. (See grid designs below.)
gridSample.jpg

Within these fields, text and graphical elements are arranged systematically and the priorities stand out more clearly. Grid based organization is inviting to readers and helps strengthen the authority of text. (See text arranged on grid layout below.)

gridLayout.jpg

History of the Grid

Biblical Beginnings

The use of the grid as an ordering system dates back as early as 4500-3500 B.C., long before printing was invented. The influence of the grid can be seen in the layout of early villages as well as in writing, the wheel, and the decimal numeric system. Early Egyptian artists used a grid system to control the proportions of figures in two-dimensional relief sculptures.

Birth of the Modern Grid

Influenced by the modernist ideas of Jan Tschichold, graphic designers Max Bill, Emil Ruder, and Josef Muller-Brockmann began to question the relevance of conventional grid systems. As a result, they developed a more flexible system which allowed designers to achieve greater balance and coherence in print media, and thus the modern grid system was born.

This system was used in Switzerland after World War II. The first examples of printed media designed with the aid of a grid appeared during the mid-to-late 1940s.

JosefMullerBrockmann2.jpg
A piece by Josef Muller-Brockmann that makes excellent use of the modern grid system


A Break from Convention

During the 1980s, many designers began to break away from the convention of traditional grid based design and started to experiment.

Example in Print Media

Graphic designer and teacher David Carson, dubbed the "father of grunge," became renowned for his unconventional use of type and images. (See sample of David Carson's work below.)

davidcarson05thumbnail.jpg

Example in Online Media

With the advent of the web, more designers appear to be reviving the use of the modern grid system. Use of the grid can be seen reflected in sites such as Crate and Barrel , Tiffanys and Facebook .


Grid-1.jpg






The Grid Structure

Using the grid structure is a matter of organizing information into the space allocated for it. The most important principle in using any grid system is that it can be used to establish consistency, unity, and order. The following represent a few basic rules for using a grid system:

  • Use grid elements to help define the problem and establish design constraints
  • Establish a hierarchy between elements, title, subheads, text, graphic elements, and other devices
  • Place text as a unit to avoid interrupting text with graphic elements



Animation of Grid Use

The video below serves as a general example of how grids are essential in the overall layout of a document for graphic designers.



The following link provides another good video related to the importance of and types of grids.
http://www.youtube.com/watch?v=7YcVzUY-A78

External Links

Articles

"Five simple steps to designing grid systems", Mark Boulton
"The Funniest Grid You Ever Saw", Khoi Vinh
"Thinking Outside the Grid", Molly Holzschlag
"Grid-Based Design: Six Creative Column Techniques", Sean Hodge, Smashing Magazine

Books

Grid Systems in Graphic Design, Josef Muller-Brockmann
Making and Breaking the Grid: A Graphic Design Layout Workshop, Timothy Samara

Sources

Grid Systems in Graphic Design, Josef Muller-Brockmann
The Grid: A Modular System for the Design and Production of Newpapers, Magazines, and Books
Culture of Egypt
Type on the Grid