Layout design is one of the trickiest parts of visual design. There are constant issues of content and element structure that arise when working on layouts. The difference between a good layout and a bad one is the way its visual elements are organized and positioned in relation to each other.
As reviewed in our article on wireframing fundamentals, a wireframe is essentially a skeleton for your design; one of the easiest ways to control the structure of a wireframe layout and to achieve a consistent and organized wireframe design is to apply a grid system. Grids are an essential component of layout design because they form the backbone of layouts.
What is a grid?
In the most basic terms, a grid is a structure composed of a series of lines that divide a page into columns. Usually, the lines are vertical, but they can also intersect. While the lines of a grid are not necessarily visible (although in some designs, they are), the structure helps designers align content elements as they are laying out the page.
Why use a grid when wireframing?
The wireframe grid system makes it easier to design individual layouts and can introduce the following benefits to your workflow:
Creates clarity and consistency
Proportion, rhythm, and whitespace are all design characteristics that directly affect visual hierarchy. Grids create and enforce consistency in these elements throughout an interface. An effective grid-based design guides the eye, making it easier and more pleasant for users to scan objects on the screen.
Makes layouts responsive
Responsive design is no longer a luxury; it’s a necessity. People experience apps and websites on devices with a broad range of screens, so designers can no longer build for a single device’s screen. They need to think in terms of dynamic grid systems instead of fixed widths. Using a wireframe grid helps you create a consistent experience across multiple devices with multiple screen sizes.
Furthers the lifespan of a design
Unlike print production, digital products are never finished—they’re constantly changing and evolving. Grids provide a solid foundation for future use. When everything conforms to a grid, previous solutions can be easily reused to create a new version of the design. A grid becomes a skeleton for your user interface that can be used to produce completely different looks.
Anatomy of a grid
All grids, whether simple or complex, have some common parts:
Format
The format is the area in which the visual design is placed. On the web, the format is the size of the browser window.
A browser window is an example of format. Image credit Nick Babich.Margins
Margins are the negative space between the edge of the format and the outer edge of the content. The margin size is what gives the content a general shape. (Note: Side margins increase as device width increases.)
Margins for a block of content. Image credit Nick Babich.Columns
Columns are vertical spatial zones that fit fully from the top to the bottom margin. The number of columns varies depending on the medium; designers typically use up to 12 columns on desktop, up to eight columns on tablet design, and up to four columns on mobile. It’s essential to choose a column width that will work for your content. In many cases, the column width is somewhere between 60 and 80 pixels.
Columns are vertical blocks that make up the content width of your design. Image credit Nick Babich.Gutters
Gutters are the spaces between columns and rows. Good visual balance is only possible when gutters are equal between columns. A common gutter size is 20 pixels.
Gutters are the spaces between columns. The same gutter size is used between all the columns. Image credit Nick Babich.Field elements
Field elements are blocks of your design. These containers store content, imagery, and interactive elements. Field elements should sit within the columns and not bleed into the gutters.
Field elements in a grid should not bleed into the gutters, the space between the columns. Image credit Nick Babich.Layout grid types
Columns, field elements, gutters, and margins can be combined in different ways to form distinct types of layout grids. Let’s review four of the standards:
Manuscript grid
A manuscript grid (or a single-column grid, as it’s often called) is the simplest grid structure. It’s essentially a large rectangular area that takes up most of the space inside a format. This type of grid is well-suited for layouts with continuous blocks of text. A Google Doc uses a manuscript grid by default for all documents.
Manuscript grids are traditionally used in books and are a good layout for presenting continuous blocks of text. Image credit Wikisource.Multi-column grid
As the name suggests, a multi-column grid has numerous columns. This type of grid is useful for layouts that contain discontinuous information. They’re particularly popular in paper and digital magazines because they organize content in columns, which is easier to read.
When you use a multi-column grid, it’s possible to create zones for different kinds of content. For example, you can reserve a particular column just for an illustration.
In this multi-column grid example on the left, one column is reserved for images and captions. Image credit Thinking with Type.Modular grid
While a multi-column grid splits a page vertically into a number of columns, a modular grid subdivides a page both vertically and horizontally into modules. Modular grids are good when you want to create a complex wireframe layout and need more control than a column grid can offer. It’s a perfect grid for creating complex hierarchies.
Baseline grid
A baseline grid is an underlying structure that guides the vertical spacing in a design. It’s used primarily for horizontal alignment of content and functional elements. Designing with this type of grid is akin to writing on a ruled piece of paper—the grid ensures that the bottom of each line of text (its baseline) aligns with the vertical spacing. This makes a baseline grid not only an excellent typographic tool but also an extremely helpful one when you’re laying out elements on the page; you can quickly check whether something on the page is missing a row of space.
Best practices for layout grid design
Follow these guidelines for creating an effective layout grid system:
Select the grid you really need
“How many columns?” is the first question designers ask when starting to work with a grid. Many popular frameworks use a grid system of 12 equal-width columns. The 12-column grid is the most easily divisible among reasonably small numbers; it’s possible to have 12, six, four, three, two, or one evenly spaced columns. This gives designers tremendous flexibility over a layout.
But while the 12-column grid is a popular choice among many designers, it’s not a one-size-fits-all solution. Your content should define the wireframe grid type you choose to use, not the other way around. Before deciding on the number of columns, review your content and sketch out all possible layouts (a paper sketch will be fine). The sketches will help you to define the proper number of columns for your content.
Use the golden ratio
The golden ratio is a common mathematical ratio found in nature that can be used to create pleasing, organic-looking compositions. In a golden ratio design, your work respects the 1:1.618 proportion for all design decisions. Following this principle typically leads to the most aesthetically pleasing result.
Consider design constraints
When selecting a grid, consider the constraints of the screens on which your design will be used. For example, when you design for a mobile screen, all your design decisions (including the grid) need to be optimized for the small screen of a mobile device; however, mobile content is typically limited to one or two columns, which means a multi-column layout is an ineffective choice. When designing for mobile, it’s recommended to use a tile layout grid, in which the column and row heights are the same.
This is an example of a tile layout grid for a mobile ecommerce app. Image credit Mr Porter.Pay attention to both horizontal and vertical spacing
Laying out a grid requires attention to both horizontal and vertical rhythms, which are equally important. Unfortunately, all too often designers create excellent horizontal spacing but forget about the vertical spacing. Below is an illustration of this problem:
On the left, the vertical spacing between the blocks varies. On the right, the vertical spacing is consistent. Image credit Nick Babich.In the first example, the grid is consistent with the column width and horizontal spacing, but the varied vertical spacing creates visual noise. In the second example, both the horizontal spacing (the space between content blocks) and the vertical spacing (the space between columns) are consistent, which makes the overall structure cleaner and the content easier to consume visually.
Conclusion
A grid system improves the quality of a wireframe design and the efficiency of the design process. A grid is like invisible glue that holds a design together; even when elements are physically separated from each other, something invisible connects them.