How to Use Grid Systems in Your Layout

Consistency is always an element of good design. Establishing a template is not a way to cut corners or limit your creativity. Rather, it creates flow from page to page, which ties the project together. Today, we are going to look at grid systems and how to use them. The basic purpose of a grid system is to organize the elements of your design so that the viewer understands the concept and can navigate through the content on a page.

The basics

Page grids are made up of repeating squares, rectangles, or triangles. This creates a pattern for you to use as a blue print that will help when placing content. The design principle at work is alignment. Think about what is most important on each page. What needs to grab the readers attention? What deserves to be set apart in the design? By using columns, images, sidebars and margins, you can create a page grid that is consistent and meets design standards.

These standards (contrast, repetition, alignment, and proximity) should dictate how the grid is used. To start, create a new document in Adobe InDesign CS4, a software program used by page designers. The document setup window will give you options about columns, margins, and bleed space. You can always change these setting later, but lets pretend that our project is a 16 page tabloid. Each page is 10 x 12 inches, so a four column spread would be flexible enough for large images and feature stories. If some content must meet a certain size, such as an advertisement, break down the two colunm page into a four or five column page. The number of columns isn’t important as long as the section is consistent.

Parts of the Layout

With a consistent column number per page, we can introduce other parts of the layout. Images, sidebars, and margins all have roles to play in the page design. Sometimes the content or information of the page has already decided how each of these parts will be used. Formal reports and hard news stories follow traditional design choices. Headlines, subheads, and body copy are displayed in easy to read typefaces like Times New Roman or Helvetica. Portfolios and feature content can be untraditional or “artsy.” Using a script font (a typeface that immitates handwriting) is acceptable for headlines and subheads, but body copy should be in a standard serif or sans serif font.

Typefaces

The newspaper industry has studied the use of typefaces (fonts) for decades. Many newspapers have developed their own fonts that look like Times New Roman to the average reader, but have been designed to look bigger, take up less space, and help the reader’s eyes move from line to line.

Align all text to the baseline grid, which is a grid of horizontal lines spaced evenly down the length of the page. The baseline grid corresponds with the size of the body copy and it’s leading. Click the view dropdown menu to see the baseline grid in Adobe InDesign (it is invisible by default).

Using the baseline grid is essential when designing  for a newspaper. Text makes up the visual facade of the newspaper, everything else should be complimentary to the text. Photography and art (graphics) enhance the pages text content.

Images (photos & art)

Working as if we were producing a magazine, the photos and art we choose will be more impressive (larger) in the layout. Visually, we can use more colorful elements to define spaces and have illustrations and photography that is interpretive of content. This is not a format used for hard news reporting. Using grid will help integrate images and text in the layout. Remember that we are using a two column grid for each page in our magazine. Images can span one column or both, but not somewhere inbetween (unless that width is repeated throughout the section). By clicking on and pulling the ruler that spans the top and left side of the document in Adobe InDesign, we can bring guides into our layout. These guides work in a similar fashion as the baseline grid. They can be placed next to a headline or body column when a column guide is not present. Make sure to keep all elements of the page at least one pica (six pica make up one inch) apart.

Placement & Hierarchy

Every layout will place emphasis on one photo, headline, or graphic to get the reader’s attention. At this point in the process we need to establish the most important peice of the content. Is it a photo? Or possibly a pull quote? Which element do you want the reader to see first? This will establish hierarchy on your page. Your grid reflect what you think needs to be seen first. Setting this element apart can be done by defining the space around it with a contrasting color or making it span several column widths.