The Grid in Design

The Grid in Design

Using the grid to make design flow and consistent

What is a Grid

A grid is an arrangement of horizontal and vertical lines that are utilized to subdivide a page vertically and evenly into margins, segment (columns), inter-column spaces, type lines and spaces between blocks of type & images. 

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. 

Format

The format is the area in which the design sits. In a book or magazine, the format is the page. On a website, the format is the browser window.

Margins

Margins are the negative space between the edge of the format and the outer edge of the content. 

Flowlines

Flowlines are horizontal lines that break the space into horizontal bands.

When elements are aligned to the top of a flowline, it’s called a hangline, as the elements appear to hang from the line.

Modules

Modules are individual units of space that are separated by regular intervals. Modules are the basic building blocks of grids. When repeated they create columns and rows.

Spatial Zones

Spatial zones are fields of adjacent modules. Each field can be assigned a specific function within the design.

Columns and Rows

Columns are vertical bands of modules.

• The optimal text for any column is between 45 and 75 characters

• Over 75 characters is hard to read

Rows are the horizontal bands of modules.

Gutters

Gutters are the spaces separating modules either vertically or horizontally.

Folio

Folios are created when page numbers are placed consistently in the margin, usually above or below the composition.

Running Header or Footer

A running header is a guide at the top to indicate your position in a manuscript. 

Markers

Markers are placement indicators for subordinate or consistently appearing information. Markers can be used to denote the location of folios, page numbers, etc.

Multiple Choice

They are placement indicators for subordinate or consistently appearing information. They can be used to denote the location of folios, page numbers, etc.

• Modules

• Folio

• Marker

• Gutter

Multiple Choice

A guide at the bottom to indicate your position in a manuscript.

• Running Footer

• Running Header

• Marker

• Folio

Multiple Choice

A guide at the top to indicate your position in a manuscript.

• Running Footer

• Running Header

• Marker

• Folio

Multiple Choice

They are created when page numbers are placed consistently in the margin, usually above or below the composition.

• Running Footer

• Folios

• Marker

• Gutter

Multiple Choice

The spaces separating modules either vertically or horizontally.

• Markers

• Gutters

• Margins

• Folio

Multiple Choice

Horizontal bands of modules

• Rows

• Columns

• Gutter

• Marker

Multiple Choice

Vertical bands of modules.

• Flowlines

• Gutter

• Row

• Column

Multiple Choice

Fields of adjacent modules.

• Spatial Zones

• Rows

• Columns

• Running Footer

Multiple Choice

Individual units of space that are separated by regular intervals.

• Spatial Zones

• Gutter

• Modules

• Marker

Multiple Choice

The negative space between the edge of the format and the outer edge of the content.

• Columns

• Gutter

• Flowlines

• Margins

Multiple Choice

Horizontal lines that break the space into horizontal bands.

• Flowlines

• Folio

• Columns

• Running Header

Multiple Choice

Grids act as

• an aid to focus the reader.

• an area to make a graph.

• guides for the placement of elements in a design.

• a focal point.

Multiple Choice

It is the area in which the design sits.

• Folio

• Format

• Spatial Zone

• Module

Multiple Choice

It is the area in which the design sits.

• Folio

• Format

• Spatial Zone

• Module

Multiple Choice

When elements are aligned to the top of a flowline it’s called a _________________________

• Hangline

• Baseline

• mainline

• Footer

4 Main Types of Grids

Manuscript grid

Sometimes called a block grid or single column grid, the manuscript grid is the simplest grid structure. It’s mainly a large rectangular area taking up most of the space inside a format.

Margins in Manuscript Grids

• Wider margins — lead to narrower text blocks, which helps focus the eye on the text and creates a sense of calm and stability. 

• Narrower margins — force the text block to the edge of the format creating tension as the two near each other.

Column Grids

Column grids are good when discontinuous information needs to be presented.

Columns can be dependent on each other, independent from each other, and crossed over by design elements.

Modular Grids

Modular grids are like column grids with the addition of horizontal divisions marked by rows. The columns and rows and the gutters between each create a matrix of cells or modules.

Hierarchical Grids

Hierarchical grids are commonly found on the web. They’re based more on an intuitive placement of elements, which still conforms to the needs of the information.

Multiple Choice

This image is an example of what type of grid layout

• Column Grid

• Manuscript Grid

• Modular Grid

• Hierarchical Grid

Multiple Choice

They are commonly found on the web. They’re based more

on an intuitive placement of elements.

• Modular Grids

• Hierarchical Grids

• Column Grids

• Manuscript Grids

Multiple Choice

This image is an example of what type of grid layout

• Column Grid

• Manuscript Grid

• Modular Grid

• Hierarchical Grid

Multiple Choice

They are good when discontinuous information needs to be

presented. They can be dependent on each other, independent from each other, and crossed over by design elements.

• Column Grids

• Manuscript Grids

• Modular Grids

• Block Grids

Multiple Choice

This image is an example of what type of grid layout

• Column Grid

• Manuscript Grid

• Modular Grid

• Hierarchical Grid

Multiple Choice

This image is an example of what type of grid layout

• Column Grid

• Manuscript Grid

• Modular Grid

• Hierarchical Grid

Multiple Choice

They are good when discontinuous information needs to be

presented. They can be dependent on each other, independent from each other, and crossed over by design elements.

• Column Grids

• Manuscript Grids

• Modular Grids

• Block Grids

Open Ended

What was the most interesting idea you learned about grids as used in designing?

Poll

Do you think using grids will help you when designing your upcoming magazine spread?

• Yes

• No

• I don't know