Designing With Grids

Using a grid during the design process is always good practice. Grids are used in different areas of design, including magazines, books, and the web; but are not common knowledge for many design students who are in the beginning stages of their education. If you fit this description, this article will get you started with info about grids and some good resources.

So lets talk about grids.

“Simply stated, grids are a series of intersecting axes that create horizontal and vertical divisions of space on the page.” – Kristin Gullen in her book Layout Workbook.

“They create ordered hierarchies, proportional relationships, and clear visual paths for the eye to travel.” – smashingmagazine.com

Grids are especially useful in design that incorporates textual and visual elements. They allow designers to place objects and text with consistency,  achieving a visual and structural balance in the page layout.  This allows readers to easily follow the content of a webpage, or other design medium. It highly improves the readability of a composition, and as we all know, the better the readability – the longer a person’s attention span and interest last.

There are those who choose to avoid grids based on a false belief that a grid would dictate their design and its outcome. In reality, grids can be very flexible, and it is the designer who’s in charge of the design and the grid. Grids may easily be adapted or broken for variety and effect. In fact, grids should be broken if there is a need to accommodate one or more of the visual elements in a design.

There are several anatomy terms associated with a gird: margins, columns, grid modules, flowlines, and gutters. Margins are the spaces dividing the edge of the medium from the active area of the design. It is the space where a footer or a folio may live. Columns are the vertical divisions. Grid modules are the areas containing the textual or visual elements. Flowlines are the horizontal intervals in the grid, and gutters are the inactive spaces in between columns.

The most common type of grids used, depends on the medium.

In web design, columns are mostly used, since the focus is mostly on the horizontal layout.  A good source for web design grids is the website http://960.gs. There you can learn about and download grids based on a design width of 960 pixels. The number of columns used within that width varies, but the grids provided are based on 12, 16, and 24 colums.

In print medium – magazines, books, newspapers, etc. – the most common or basic grids are single-column girds, multiple-column grids, modular grids, and alternative grids. Single column grids can most often be seen in books (like novels). They are exactly what they sound like: a single column for the textual and visual elements of the layout. Multiple-column grids have more than one grid, and may include a header across the top. A most common example for this type of grid would be a newspaper. Modular grids are multiple column grids with the addition of flowlines. This, in turn, creates grid modules. And finally, alternative grids rely heavily on the designer’s intuition when placing visual elements. These grids are more loose in structure and may even include diagonal lines. Here are some examples from Kristin Gullen’s Layout Workbook:

My resources for this article are:

960.gs
“Layout Workbook” by Kristen Gullen
http://grid-based.com/
http://www.designbygrid.com/
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

These are a good place to start, and Kristin Gullen’s book is a must have!

Advertisements

About Elena Nikolaeva

I explore, I design, I make things. Let's cuban motion together.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: