Making and Breaking the Grid

1. Grids: Order from Chaos

Using a grid permits a designer to more rapidly lay out enormous amounts of information because many design considerations are addressed in building the grid’s structure at the outset of a project.

Systematic Order. Grids introduce a systematic order to layouts, distinguishing different types of information and ensuring cohesion among visual elements. They harmonize elements through spatial proportions and positioning logic. This systematic approach allows designers to rapidly lay out information, addressing many design considerations upfront.

Clarity, Efficiency, and Continuity. The benefits of working with a grid are simple: clarity, efficiency, and continuity. A grid provides a framework for organizing visual elements, making it easier for viewers to navigate and understand the information presented. It also allows multiple individuals to collaborate on the same project without compromising visual consistency.

Problem Solving. All design work involves problem-solving on both visual and organizational levels. A grid is one approach to bringing pictures, symbols, text, headlines, and tabular data together to communicate as a totality. It is a tool that helps designers create thoughtful, useful, and meaningful experiences for their audiences.

2. Grid History: A Reflection of Societal Shifts

Structural thinking, even before its latest codification through European and American Modernism, has been a hallmark of cultures struggling toward civilization.

Technological and Social Changes. The grid's development over the past 150 years coincides with dramatic technological and social changes in Western civilization. The Industrial Revolution, the rise of mass production, and the increasing demand for information all influenced the evolution of the grid in graphic design.

Arts and Crafts Movement. The English Arts and Crafts movement, led by William Morris, reacted against the decline in aesthetic quality caused by mass production. Morris advocated for fitness of purpose, inspiring form and emphasizing the finished quality of work, even when mass-produced. This movement laid the groundwork for Modernism.

Bauhaus and Constructivism. The Bauhaus and Constructivism movements further developed the grid as a tool for creating order and unity in design. Designers like El Lissitzky and Laszlo Moholy-Nagy experimented with geometric composition and sans-serif typefaces, pushing the boundaries of grid-based design. These movements sought to create a new visual language that reflected the spirit of the age.

3. Grid Anatomy: Understanding the Building Blocks

Every grid contains the same basic parts, no matter how complex the grid becomes.

Format and Margins. The format is the overall size and shape of the page or screen, while margins are the negative spaces between the format edges and the content. Margins define the live area where type and images will be arranged.

Columns and Gutters. Columns are vertical alignments of type that create horizontal divisions between the outside margins. Each column is separated from its neighbors by a channel of space called a column gutter.

Flowlines and Rows. Flowlines are alignments that break the space into horizontal bands, guiding the eye across the format. Rows result from numerous flowlines set at regular intervals, intersecting the vertical columns and further subdividing space.

4. Breaking the Grid: A Historical Imperative

Society needs to understand how to deal with the subtlety, complexity, and contradiction in contemporary life.

Reaction to Rationalism. As the International Style became entrenched, some designers began to question its rigid adherence to grid-based structures. They sought to break free from the constraints of rationalism and explore more expressive and intuitive approaches to design.

Influence of Dada and Surrealism. Movements like Dada and Surrealism, which explored the subconscious and the absurd, influenced designers to experiment with non-structural design tendencies. These movements challenged established ways of thinking and embraced chance and spontaneity.

The Rise of Deconstruction. The term "deconstruction" was coined to describe the process of breaking apart preconceived structures and using them as a starting point for new avenues of discovery. Designers like Wolfgang Weingart and April Greiman began to deconstruct the grid, creating dynamic and unconventional layouts.

5. Beyond Orthogonal: Alternative Structures Emerge

It is possible and necessary to have both complexity and intelligibility in graphic design.

Geometric and Organic Structures. Beyond the orthogonal logic of grids, designers can explore alternative structures that derive from nature, mathematics, or formal relationships. These structures may be geometric, like crystals and molecules, or organic, like branches of trees and spirals of galaxies.

Symmetry and Asymmetry. Symmetry, with its balanced and harmonious arrangements, can convey a sense of classicism and authority. Asymmetry, on the other hand, can impart a modern and casual quality.

Fractal Structure. The design for a science center's donor wall focuses on fractal structure, a natural phenomenon and mathematical set consisting of complex, infinite patterns exhibiting self-similarity at all scales.

6. Intuition and Chance: Embracing the Unplanned

The grid system is an aid, not a guarantee.

Spontaneous Composition. As an antidote to structure, designers may determine that spontaneous approaches are more relevant for the task at hand. Working by the seat of their pants and allowing purely formal instincts to supercede the rational.

Chance Operations. Equally liberating are strategies that depend on chance for their results, as are those that source their visual arrangements in the metaphorical aspects of visual storytelling.

Visual Relationships. This approach starts fast and loose: The designer works with the material much like a painter does, making quick decisions as the material is put together and the relationships are first seen. As the different optical qualities of the elements begin to interact, the designer can determine which qualities are affected by those initial decisions and make adjustments to enhance or negate the qualities in whatever way is most appropriate for the communication.

7. Practicality in the Impractical: Balancing Innovation

The grid is like a lion in a cage, and the designer is the lion tamer.

Addressing Challenges. Often, the factor that dissuades a working designer from pursuing an unconventional layout approach is the challenge it's perceived as posing for viewers, whether one of aesthetic discomfort or one that is more utilitarian, such as being too difficult to navigate.

Maintaining Visual Continuity. By the late 1970s, formatting corporate communications in a grid was an expected approach to achieving visual continuity. Corporate identity firms like Anspach Grossman Portugal in New York City typified this approach with its 1976 identity program for Citibank and similar corporate clients.

The Internet. The Internet has proven to be a medium that can benefit from grid-based thinking as a way of simplifying the vertiginous act of navigating through interactive information; indeed, in the time since this book was first published, grid use has become pervasive within UX design.

8. Visual Storytelling: Structure as a Message

It is possible and necessary to have both complexity and intelligibility in graphic design.

Structure as Communication. Structure itself can be a message—designers will want to consider how various layout conventions may be interpreted on cultural, historical, and associational levels by their audiences.

Narrative Allusion. Sometimes, a grid of particular proportions or shaping refers to some other experience in a nearly pictorial way; at others, its influence may be more subtle, imparting a certain compositional emphasis that may be appreciated subconsciously, rather than intellectually.

Hierarchic Grids. These grids conform to the needs of the information they organize, but they are based more on an intuitive placement of alignments customized to the various proportions of the elements, rather than on regular repeated intervals.

9. Systems Thinking: Variation within a Framework

The typographic grid is an organizing principle in graphic design whose influence is simultaneously ingrained in current practice and fought over in design education, revered and reviled for the absolutes inherent in its conception.

Balancing Conformity and Freedom. The typographic grid is a proportional guideline for text, tables, pictures, etc. It is a formal program, a priori for ‘x’ unknown contents. The problem: to find the balance between a maximum of conformity with a maximum of freedom.

The Corporate Grid. Grid use began to dominate European and American design during and after the 1960s. It was an especially effective way to orchestrate communications programs for large organizations, events, or corporations.

The Internet. The Internet has proven to be a medium that can benefit from grid-based thinking as a way of simplifying the vertiginous act of navigating through interactive information; indeed, in the time since this book was first published, grid use has become pervasive within UX design.

Last updated: February 26, 2025