Organizing Designs With Grids

When designing a layout, using a grid can help organize and anchor the elements.

grids1
This edition of the “New York Times” was designed using a six-column grid. In the image below, red bars highlight the column grid used to design the page. You’ll notice that the Table of Contents at the bottom of the page uses a grid with five columns instead. This is a subtle cue to let readers know that this content is different than the news content above it.

grids2

Grids help with alignment and proportional relationships among the elements in a layout. They allow for a sense of familiarity and uniformity. They also help provide a sense of rhythm to the structure of your layout.

A Few Useful Definitions

layout_termsHeader-Top section of a page
Row-Horizontal division of a page
Column-Vertical division of a page
Gutter-Empty space between gutters
Footer-Bottom section of a page
Folio-Page number
Margin-Outer edges of a page
Marker-Graphic mark to accompany the folio
Module-Areas of various sizes created by the intersections of consecutive columns and rows.

The Baseline Grid

The baseline is the line upon which text in a publication sits. The space between baselines within a document is called the leading. It is best to align all of your text to a common baseline grid. It gives a more consistent and organized look. Adjacent columns of text that aren’t aligned to the same grid can confuse a reader.

without_baseline_alignment

with_baseline_alignment

Types of Grids

Column grid

grid_columnThe column grid is the most-used type of grid. It works well when the information being presented is discontinuous—meaning it breaks and jumps to other pages inside the publication.

grid_column_example
The front page of the Washington Post, designed using a six-column grid.
Modular grid

grid_modularThe modular grid is more flexible than the column grid. It allows for more unconventional designs while still maintaining a sense of order and continuity.

grid_modular_example
An example of a design that uses a modular grid.
Hierarchical grid

grid_hierarchicalThese grids can be designed somewhat organically. They tend to be created by Placing elements on a page and just seeing what fits together in the most effective way. They don’t necessarily adhere to an underlying structure and may not have columns that are evenly spaced or sized.

grid_hierarchical_example
An example of a design that uses a hierarchical grid.

The Twelve-Column Grid

A 12-column grid is commonly used when designing layouts for web pages and applications. It can be divided into a variety of different combinations (see the image below) to help group or separate content into sections and subsections. Even if we aren’t designing for the web, a 12-column grid can be useful.

grid_12_column_grid
A 12-column grid can be divided evenly in different ways to create a variety of organized and consistent layouts.
An example of a 12-column grid. The page/screen is divided into 12 individual columns (in pink) and the content is placed in sections that conform to the width of groups of columns. The white space between the columns—called the gutter—functions as a visual “border” between sections. See how the IMA logo fits within three columns and the main image fits into nine columns, equaling 12 across. The information about museum hours, directions, and events fit neatly within the three columns under the logo. The museum’s Twitter feed fits neatly within the next three columns to the right. The “100 Acres” section is particularly effective at organizing a few different types of content in an easy-to-consume way. Starting at six columns wide, the “100 Acres” image functions as both a section header and a link to the individual story. Then the other secondary stories are each three columns wide as you move down within that section. Then each of the three items in the “Recent Videos” section takes up two columns. The strength of the 12-column grid is how it can be divided evenly like this to visually organize content so it can be effortlessly understood and consumed by the user/viewer/reader.

 

Next: Sketching and Iteration