The Grid System–Communicating with Structure

“The power of the grid is to lift the designer outside of the protective capriciousness of the "self" by providing an existing set of possibilities, a set of rules.” Ellen Lupton 

The grid. In my opinion the greatest visual design innovation. Without it your communication pieces can be a lost mangled hope of boxes, text and graphics, with no hierarchy and visual weight. With it, it is an amazing solid structure that is universally understood. For communication designers, the grid is a staple to our concepts. Whether we choose to ignore it or keep it hidden, the system is still a very important and prevalent part of visual communication. While many UX firms have the assistance of a communication designer, many do not. Thus, endless forms, reports, task lists, system maps and wireframes are not as effective in their presentation as they could be. UX prides itself on great user experiences, and this experience must be carried throughout the project to the final artifact. This post will discuss the basics of the Grid System and how it can help your communication process.

The grid system is broken in to two main categories (classical and modern.) For this post I will discuss variations of the modern grid style because it is the most flexible and adaptable structure for our business deliverables. The Classical style grid is mainly used in texts such as in paperback books or other manuscripts.

Classical Style Grid
 
(the blue indicates the area in which text or image may be placed)

Orientation and the Modern Grid

The very first thing you should decide on before grid set-up is the format of the media. Are you designing for a digital presentation, letter-size document or presentation boards? What is going to be the orientation of the document? Changing from Vertical to Horizontal affects positioning of elements and even the type-size to be  used. If you are not sure of how the data will be presented, it is still important for you to plan for the various options. Possibly, create a template for both orientations. Once format and orientation is decided, a choice of the type of grid can be made. The modern grid is most commonly made of columns and rows set across a page. The purpose of setting guidelines is to assist with aligning objects and setting hierarchical structure. They also help with creating consistency of positioning across multiple pages.

1. Decide on format
2. Select Orientation (Vertical/Horizontal)

“Order is the actual key of life.” 
Le Corbusier 

 

Margins

It is important to set the margin space before setting any rows or columns. The margin space is important especially if the printing is done in-house. Inkjet and digital printers have different  abilities when printing to the edge of the paper. A conservative measure is to keep .5” margins all around your document.

3. Select margin size

Grid Set-up

The number of guidelines that you place across your document both columns and rows really depends on the type of document you are presenting and the outcomes of that communication. Many grids are between 3-6 vertical columns. Between each column there should be a small space. This space is called a gutter and it helps the positioning of multiple columns of text. There is no set-fast rule on the number of columns per document. Normally though, the more lines the more flexible (positioning of elements) the document is, which also makes the design more complex. The opposite is true for a lower amount of columns and rows: it produces a less flexible document though simpler and cleaner in its design. To start, all of the column and row widths should be even. Keep the structure simple. You may have to experiment a little with the number of columns in relation to the type of content you need to communicate.

How it is used

It is good to note that the Grid system is a guide only and should be treated as such. Once the guides are set, you should only position an object whether text or graphic to fit  between one column line to another. In a 6 column grid, the element may span across from one to six columns, though it should not be placed on a gutter space without touching either adjacent column lines.

Type and Hierarchy

In order to use the grids to their potential a sense of some design principles is very important. The first suggested rule is that every element (including headers, footers, captions, etc.) have an order of importance on the document. When a user looks at your document they should be able to immediately know which areas are more important than others. As publishers of this document it is your responsibility that you assist this level of communication by guiding the viewer step-by-step.

After ordering elements of the document you can emphasize the hierarchy by using a few key stylization methods.

• Proper size for headings, sub-headings and body text
• Spacing
• Contrast

Choosing the proper type size is crucial to the document’s layout. Too large and it will seem crowded. Too small and the readability will be low causing ‘squinty-eye’ syndrome. Type size for body text is always in correlation to the width of the column. You should be able to fit approximately 40 characters per line. Ideally, the size of the body text should be between 9-11 pts. Any larger and you may risk the hierarchical balance of the page. For those type nerds, you may know that the size of type to be used is also based on the construction and selection of the typeface. Different typefaces are constructed differently and thus a 9pt type font may look bigger than another font also in 9pt.

After selecting the body text size choose the heading sizes (usually between 15-18pt to start) and sub-headings (12-14pt). Instead of changing the size for sub-headings, you may also like to try and bold that section of text. Just remember a great communicative artifact has flow and order.

For spacing, create ‘packages’ of information. For example, heading x must go with its corresponding  body text paragraph. This means there should be more space above a heading than below it to help communicate to the viewer textual relationships. Also, the more empty space (usually areas of colour) around an element (text or image) will create contrast and help draw the viewer’s eye towards that area. Thus, if you need the viewer to look immediately at a certain area, one way to do so is to create a lot of space around that element.

In the end always remember that the grid system is a guide for your communication artifacts and not a rule. That said, it does help create a hierarchical order within some deliverables, synthesizing  and clarifying information to help form a clearer communicative artifact. Next post, icon design.

Resources:
http://www.thinkingwithtype.com/contents/grid/

http://www.thegridsystem.org/