Grid-based Graphic Design

Sam DeMastrie

April 25, 2014

I’m sure we all remember years ago when we were tiny youngsters learning about the different systems of the body. Just for fun, let’s recap: the skeletal structure provides support for the body (I’ll come back to this later); the digestive system processes food and absorbs nutrients; the nervous system allows the brain to communicate with the rest of the body; and the muscular system provides a mechanism for movement. I’m pretty sure there are at least a couple more physiological systems but for the purposes of this metaphor, they aren’t necessary.

I remember being back in college learning about the process of design for the first time. My professor often compared the idea of a grid structure for laying out pages to a skeleton. And if you think about it, it’s a great analogy: a grid-based design, like a skeleton, is there to provide support. It’s the hidden framework and foundation upon which everything else is built. If you see a magazine advertisement or any other piece of design that was built without regard to a consistent grid structure, it’s probably quite obvious: elements are misaligned and jumbled and message hierarchy is often confusing.

In web design, grid structures are an absolute necessity, especially if you’re designing a responsive site to work across multiple devices and browser sizes. For example, if you view jibemedia.com or npr.org on your desktop computer and resize the browser from the corner of the window, you’ll notice the site responds to the shrinking size, steadily optimizing for each device. A well-defined grid structure makes this possible because column C moves beneath column B, and column B moves under column A.

The digital landscape isn’t the only place where design relies on structure. Printed books, magazines, and other periodicals are heavily dependent on a solid grid structure because of the large amount of information they contain. If your favorite newspaper or magazine had no apparent organization between the headlines, body copy, pull-quotes, photography, and advertising, it would be chaotic and unreadable.

But it’s not just websites and magazines with a large amount of information that require structure. Smaller pieces like business cards and even logos often rely on an invisible set of guidelines that determine where elements are placed and how they relate to the other elements and the piece as a whole. On a business card for a corporate brand, for instance, you might see the logo and contact information on the left side, with their left edges lining up. You can imagine a vertical guideline connecting both elements on the left side. Another simple example would be a logo with a centered structure, where the mark or symbol is centered above the type, and a tagline centered below that. A guideline would run vertically through the center locking all the elements in place.

So, like a skeleton (or a tree trunk, car frame, or any other analogy you like), grids and guidelines supply a working structure for the rest of the content of the design piece. They are integral to the design process and help simplify and clarify the content and message.