One of the lasting influences of Swiss design on contemporary graphic design is the grid. It’s only been the past year that I’ve really appreciated the use of grid for interactive design projects, and how it really brings a design together cohesively and structurally, just as it does for print.

Here are some excellent resources for the grid that I use regularly that I thought I’d share:

Grid Systems in Graphic Design by Josef Muller-Brockmann.
One of the original books on the typographic grid and a book I think every designer should have.  Although the concepts and approaches were written for print design, they still transfer over to digital.

Basics Design 07: Grids.
A great introduction on the typographic grid by my favourite authors on graphic design. Although it’s an introduction, I review it from time-to-time when I’m on a project to freshen up on ideas liked juxtaposition. The print examples are great as well!

960 Grid.
Now a standard and excellent starting off point for any web design project. This grid for the web is based upon screen resolutions of 1024 pixel widths. Although desktop browser screen resolutions have gotten a lot larger than 1024 px widths, this still serves as a happy medium between A-Grade mobile browsers (Apple iOS, Opera Mobile, Android) and typical desktop browsers.

Ordering Disorder by Khoi Vinh.
This book talks about applying the principles of the typographic grid to the web. What’s really helpful is Chapter Four: Execution where Vinh goes through by example the application of the grid to a during the design process. (As a side note, check out Vinh’s lastest project: Mixel).

Grid Based.
A survey of websites that make good use of the grid. A great way to see different approaches to layout. And what’s also nice there are some really good examples of html5 websites.

Top pic is a detail of Karl Gerster’s ad for Schwitter, 1959.