How to Use Layout Grids for Better Design

Why are Grids Important to Design?

The importance of good design cannot be understated. A poorly designed city will not serve its population. A poorly designed bridge won’t hold. And a poorly designed website won’t connect with customers.

Many visual works were created using grids, which help keep things organized, proportional, balanced, and uniform. Ancient Egyptians used a grid to keep their hieroglyphics in neat lines and to ensure that the characters would be uniformly sized. When hand-written books fell out of fashion due to technological advances, printing presses used grid system to keep the characters evenly spaced within each page and column. As time and technology progressed, grids played an enormous role in advertising. Cereal boxes, magazine advertisements, and billboards all relied on grids to space out visual elements in a way that was appealing to customers.

Tell your story with captivating presentations

Powerpoint empowers you to develop well-designed content across all your devices

Learn more

In interactive design, grids can provide a consistent user experience on multiple devices and screen sizes. Page elements are aligned based on columns and rows that provide structure for text, images, and other functions in a consistent fashion throughout the whole of the design. In a presentation, a grid can ensure a constant look from page to page, which can be helpful for an audience.

Types of Grids Layout Designs

When creating a presentation or a design project, you may use a layout grid to organize elements within a space. This may seem obvious when presenting data with a Microsoft Excel document, but even Microsoft Word uses grids as well. Consider how margins around each create a border of white space that draws the eye to the printed text.

There are a few different types of layout grids that you can use while creating a document, presentation, or design.

Manuscript Grid

These layout grids are used in text documents, presentations with lots of text, eBooks, and pdfs. In a text document, a manuscript grid will separate the header, footer, and the space alongside the edges of the text. It creates a rectangle within the page that contains the text. If you’re creating a text document with Microsoft Word that has multiple pages, you’ll be able to set up your manuscript grid layout on the first page, which will ensure that margins are consistent throughout your document.

Column Grid

Column grids are typically used to help organize content so that it’s easier for the reader to digest. You frequently see them in magazines, textbooks, newspapers, and websites. In a column grid, text and images are placed within the vertical lines that make up a column, though it is common for an image to be placed across multiple columns for greater visual effect. The spacing between the columns is referred to as a gutter and should remain consistent and proportional throughout the document.

There are two main types of column design grid:

• Symmetric grids have columns that are all the same width. They are typically used in printed newspapers and magazines.
• Asymmetric grids contain some columns that are proportionally thinner or wider than others. Consider a blog with a sidebar that takes up one column and a much larger column that contains the page’s written content.

There’s more flexibility to a column grid than you might initially suspect, and it’s an incredibly way to keep things organized and easy to read.

Baseline Grid

When you’re creating a design that relies heavily on text, a baseline grid is defined by the line in which the text sits. Think about lined notebook paper; every line is a baseline and functions to keep writing evenly spaced out. You have the ability to adjust your baseline grid in Microsoft Word by changing the font, the size of the font, or the spacing between each line and paragraph.

Modular Grid

These grids function like a checkerboard and help to organize information. It’s like a column grid in that it has columns, but it also has rows, which can help organize visual information comfortably. The modules of these grids are equally sized—an empty modular grid resembles graph paper—and allow designers to use spatial zones in different way.

This is a great way to layout forms and charts, and smart phone users may recognize that the apps on their device’s home screen are laid out in a modular grid. You may also notice that a popular photo-sharing app uses a modular grid to display each user’s feed. When you look at a globe, longitude and latitude act as a modular grid, helping people find their way between two points.

Hierarchical Grids

You’ll see this grid used most frequently in web design, as it helps to organize content based on their importance. This style of grid can be set up within the boundaries of a manuscript grid, or with a modular grid to act as a guide for keeping things evenly spaced. In web design, hierarchal grids call attention to specific elements of the page, and designers use this to ensure that important information is seen first.

Using a Grid Layout in Your Graphic Design or Presentation

Choosing the right grid for your project depends a lot on what you’re working on. Text heavy documents will benefit from manuscript grids, which are the norm in Microsoft Word. Should your project include a PowerPoint presentation with a lot of text, you can apply a slide layout that has a designated space for a larger block of text.

If your presentation offers more opportunities for creative design, PowerPoint offers the option to work with gridlines to provide visual design cues, or use a snap-to-grid feature to keep things precisely aligned and organized.

Grids can be used as tools to create narratives, not just to organize a page or block of information. You can use a grid to arrange images to tell a story, show the progression of something, or display a color palette.

You may think of a grid as something that restrains your creativity, but instead it can provide some constraints that may be valuable to the design process. A grid provides guidelines for layout and visual organization but can also open up a range of possibilities. Graphic design for websites and apps is commonly rooted in grids. For instance, if you’re designing an app for smartphones and tablets, and arranging your organization in a 3-column grid, you can expand your design to a wider 12-column grid for desktop viewing.

Remember, a grid acts as a guideline to assist with layout and user experience. It can enhance organization and readability, which translates into better understanding for your audience.