GRID SYSTEMS

Working with grids are an inherent part of the craft of designing.

FUNCTIONS OF A GRID •  Achieves unity amongst all of pieces of a design.

•  Introduces systemic order to a space before anything

is placed in it.

•  Helps distinguish specific types of information and

eases a user’s navigation through them.

•  Allows multiple individuals to collaborate on the same project or a series of related projects.

•  Permits designers to lay out massive amounts of

information (such as in a book or series of magazines)

in substantially less amount of time.

GRID ANATOMY

MARGINS

•  The negative spaces between the spatial edge and the content.

•  Help establish the overall tension within the composition

•  Can be used to focus attention

•  A resting place for the eye

•  May act as an area for subordinate information

Flowlines

•  Alignments that break the space into horizontal bands

•  Help guide the eye across the page

•  Can be used to impose additional stopping and starting points for text and/or images.

Columns

•  Vertical alignments of type that create horizontal divisions between the margins.

•  Can be any number of margins

•  Designers may arrange columns at the same width, or set them at different widths, corresponding to specific kinds of information.

Gutters

•  Areas of space between columns. •  A designer can increase or decrease

gutter size, depending on multiple graphic and typographic considerations.

Modules

•  Individual units of space separated by repeating columns and rows.

Spatial Zones

•  Groups of modules that form distinct fields of space

•  Designers can arrange one or multiple spatial zones on a format.

•  Each field can be assigned a specific role for displaying information. For example, one spatial zone can be reserved for images, and another might be reserved for a series of text columns.

•  A well-planned grid creates endless opportunities for exploration

•  Every design problem is different and requires a grid structure that satisfies its challenges and issues.

•  A designer must not be intimidated to employ a grid system, nor must they be afraid to test its limits.

•  There are several basic kinds of grid, in which each is suited to solve certain kinds of problems

GRID TYPES

MANUSCRIPT GRID (a.k.a block grid) •  Developed from the tradition of the written

manuscript that eventually led to book printing.

•  The base structure of a manuscript grid is a

rectangular text area that takes up most of the page.

•  Accommodates extensive continuous text, such as a

book or long essay. •  Considerations to make:

•  Creating visual interest by adjusting proportions

of the margins

•  Size of text type

•  Leading

•  Word spacing

•  Treatment of subordinate elements on page •  Typographic color and emphasis

•  Alignment

COLUMN GRID •  Arrangement of multiple vertical columns

•  Beneficial for information that is discontinuous.

•  Work best for editorial projects or other series-based

material where the content changes often.

•  A very flexible arrangement. Columns can be:

•  Dependent on each other for running text •  Independent for small blocks of text

•  Crossed over to make wider columns

•  Width of columns depend on the size of the running

text type. Larger type in narrow columns can lead to

excessive hyphenation and an indecisive rag.

•  A designer must study the effects of changing type

attributes in order to achieve optimal column width.

MODULAR GRID •  Essentially, this is a column grid with a large number

of horizontal flowines that subdivide columns into

rows, creating a matrix of cells called modules.

•  When modules are grouped together, they form

spatial zones that can be used to define roles for

anything placed within them. •  Most useful choice for extremely complex projects

that require precise control, such as tables and forms.

HIERARCHIAL GRID •  Abnormal grid structures that do not fit into any

category. An almost organic approach to ordering

elements and information.

•  Built to conform to the needs of the information that

they organize.

•  Based on more intuitive arrangements that are customized to the proportions of the design

elements.

•  Column widths tend to vary

•  Commonly used to unify disparate elements on web

pages, the sides of packaging, and posters

•  Designers must pay careful attention to the nuances

of weight change, size change, and position when working within the hierarchial grid.