DES 250 / New Media Design II / Articles / Layout Grid Basics

Layout Grid Basics

"A grid consists of a distinct set of alignment-based relationships that act as guides for distributing elements across a format."

Leary

Benefits of working with a grid:

clarity
efficiency
continuity, consistency, coherence
organization for text and images
better legibility (if done right)
can lead to better hierarchy of information

The Column Grid

Content organized/placed in vertical segments of equal widths (or combined/multiple widths)

http://lillianflorsheim.net/gallery/small

Examples on the web:
http://www.studioblue.us
http://lillianflorsheim.net/gallery/small
https://www.radutny.com/index.php/news/view/170919-between-states-exhibition
http://chicagodesignconference.com
http://driehausmuseum.org

The Modular Grid

Content organized/placed in vertical and horizontal segments of equal widths (or combined/multiple widths)

Examples on the web:
https://www.radutny.com/index.php/work
http://lillianflorsheim.net/categories/shapes
http://davisinteriordesign.com/index.php/projects
http://lightswitch.net/portfolio

Hierarchical Grid

Content organized/placed in vertical and horizontal segments of different widths

The Compound Grid

Use of different kinds of grid in the same project, even on the same page.

http://lillianflorsheim.net/categories/shapes

Quotes

"A grid is truly successful only if, after all of the literal problems have been solved, the designer rises above the uniformity implied by its structure and uses it to create a dynamic visual narrative of parts that will sustain interest page after page."

"The greatest danger in using a grid is to succumb to its regularity. It’s important to remember that the grid is an invisible guide that exists on the “bottommost level” of the layout, the content happens on top of it, sometimes constrained and sometimes free to move."

Timothy Samara

Example Website : Frame Optik

The recipe layout above is based on a 12-column grid (you could actually simplify this one into a 4-column grid).

Responsive Grid Demo

Click here to open the coded version of this grid in another browser window. Reduce the width of your browser in order to see how this grid responses to smaller screens.

Responsive Grid Example

http://lightswitch.net/about/our-story

Grid based site examples

Taken from the 960 Grid System website. You can see how things are measured and arranged in the 12-column grids. The 960 Grid System is older and not responsive but it was a popular framework for a while. It's 960px can be easily divided into 12, 6, 4 and 2 columns, for example.