Published on | Prototyping: From UX to Front End — Medium Meghan Lazier

Both budding and expert designers know how important a layout is to design. It’s the most basic and fundamental element of every project. Grids help ensure a consistent framework to organize graphic elements, like type and images, into a hierarchy. If you want to use a grid, or break it altogether, you have to first understand the basics of a grid system.

A grid is an approach to laying out a design. A grid is made of up of horizontal and vertical elements and modules that create a structure for your work. Because grids create a system, they can help a designer ensure that a layout is balanced and has a good sense of proportion. In your final design, a grid will help with readability and clarity, even though the grid will be invisible to the untrained eye.

History and Popularity
The grid system was popularized by the Swiss style of graphic design, which debuted in the 1940s and 1950s. The Swiss style is recognizable by its use of sans-serif type, primary colors and grid layouts.

The Swiss style has had a recent renaissance because of its emphasis on “simplicity, legibility and objectivity,” makes it incredibly relevant to digital design.

Terms
When working with designers, you’ll want to understand the terms that comprise a grid system. Here are a few foundational terms to start:

Format: A format defines the area of a design. It’s the size and space of the canvas you’re working on, whether it’s an A4 poster or a browser window.
Element: An element is a single component of a layout. An image and a sub-heading are two separate elements.
Module: A module is the building block of a grid that ties together multiple elements. Modules form columns and rows.
Gutter: A gutter is a space that separates modules. Gutters can be horizontal or vertical.

These terms just skim the basics. If you’re interested in learning more, we recommend Making and Breaking the Grid by Timothy Samara or Layout Essentials: 100 Design Principles for Using Grids by Beth Tondreau for a deeper dive.

Breaking the Grid
Once you know how a grid system works, you can start to play within it. While a grid may seem overly strict or formulaic, it will give your design structure and clarity. Like all good rules, breaking a grid is more fun if you know the impact you’ll make!

Originally published at trydesignlab.com.

The Power of the Grid was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Power of the Grid

Cool stuff, every week

More Articles