Introduction to Grid Theory

"Grids are like the invisible glue that holds a design together, so whether you work in print or on the web you need to understand grid theory…While some designers actively eschew grids in favor of a more intuitive, free-form layout, the most successful do so having worked with grids for years - they understand the rules before they break them.

01. Grids establish a meter and rhythm
The foremost purpose of a grid, in graphic design at least, is to establish a set of guidelines for how elements should be positioned within a layout. Not only does an effective grid provide the rhythm for a design, but it also defines the meter.

The rhythm and meter of a layout is an important part of making the content accessible, helping the viewer to understand where to find the next piece of information within the layout. It sets expectations and defines the rules, timbre and - in some cases - voice of the design. Think of a grid as providing the road-map along which your viewers travel.

02. Grids define and reflect proportion
A key aspect of the grid is its ability to help determine and define proportion. In print, proportions most commonly echo the size of the media; the shape and orientation of the paper are often reflected in the size and shape of images included within a layout, for example. This feels comfortable because the reader subliminally understands the context of the layout as a result of the physical shape and size of the delivery mechanism (in this case, a piece of paper!).  [The “art words” to use here would be visual hierarchy and understanding the read of the page at its most basic is where the weight of the page is per script of the language. Visual hierarchy is what is read first, then second, then third, etc. The read of the page for English script (the Latin alphabet used to write the English language) is top left to bottom right. 

03. Grids, the rule of thirds, and the golden ratio
The golden ratio (also known as the golden mean) determines the most pleasing set of proportions for an element, and is simplified to the 'rule of thirds'. When used in combination with a grid, these simple rules for size, position and proportion can help ensure a layout feels both coherent within itself, but also appealing aesthetically. Why would you want to appeal in these terms? Because by doing so, you're making the content more accessible to the reader. Remember that a grid is the invisible glue behind content - in most cases it should be transparent to the viewer.

• Above is a screen shot from last week's post about the Rule of Thirds.
• Golden Ratio (also called Golden Mean or Fibonacci's Sequence) shown below. 

04. Grids provide a foundation and balance
As we've seen, grids exist primarily to help determine the position and balance for a layout. This can be used to help ensure that content is presented in an easy-to-understand order, but conversely by providing a firm foundation a grid can also be used to highlight specific areas of content simply by breaking elements outside the grid. The viewer will naturally identify these break-outs and be drawn towards them, giving the designer the opportunity to play with the hierarchy of a layout and tweak the semantic meaning of a piece of work. -from http://www.creativebloq.com/web-design/grid-theory-41411345. 

---

• Something to take away from grids no matter what is TO LINE THINGS UP. Use your guides, at least. Don’t just “eyeball” your layouts and things look sorta close. Really line things up.
• The next level to take away from grids is how to organize information so that it is pleasing to the reader while being dynamic and engaging. 

---

​Here are examples of basic vertical layout grids.

1 column vertical grid

2 column vertical grid

3 column vertical grid

---

Here are examples of basic landscape (horizontal) layout grids.

1 column horizontal grid

2 column horizontal grid

3 column horizontal grid

4 column horizontal grid

All images above from ​http://www.designersinsights.com/designer-resources/using-layout-grids-effectively

Students: There are no samples required this week.

​ART-2413 Typography students will have projects that specifically cover the grid. All other students should be aware of Grid Theory.

​Please research more or ask me for information if you need it.