Loading...

How can using the grid system help your design?

With all the options graphic designers have when adding text, such as font faces, sizes, alignments, artistic elements, and textures, it's no wonder that they can sometimes be overwhelmed. The grid system is a way to easily organize your work into visually-pleasing layouts. Designs based around a grid structure add harmony and flow, and can make any layout clearer, cleaner, and approachable.

The basis of the grid system is to create an imaginary grid in a design to act as the foundation for every element you want to include. The slide show below will show you the basic steps in creating a grid system for a design.

Margins

Margins

The first step in creating a grid system is to decide on the margins that will surround your design. The margins will depending mostly on how much room you feel works best between the edge of the design and the edge of the content. Too much room will make the content look constrained, and too little will cause visual tension between the edge of the page and the content.

Columns

Collumns

Just like supporting a building, adding columns to your will create a core structure that holds everything together. Use columns to align text and graphics in your layout, and your work will always maintain cohesion and flow no matter how much you move stuff around.

Gutters

Gutters

The gutters in the grid system are setup to create visual divides between different content items. Gutters are often more important to the layout of text than other elements.  Narrow gutters will make the text jumbled and wide gutters will cause a sense of disconnected content.

Rows

Rows

Just as the columns create a horizontal rhythm, the rows create a vertical rhythm. They follow the same guidelines as columns and use their own separate gutters.

Usage

Usage

Once you have the grid created, you can begin placing content in your design. It's okay to have an element span across several rows and columns, as long as they don't go off the edge or fall into a gutter.

Final Design

Final

Once the grid is removed, the design will have an unified foundation. Although the grid is now gone, its structure has helped the designer create a look that holds together and flows well, clearly communicating the important information about the concert.