January 2009

Grid Index

Grid Index is the first com­pre­hen­sive visual lex­i­con of pat­terns and grid systems.

Redesigning Unit Interactive

Unit Inter­ac­tive dis­cusses the redesigned of their web­site which includes a sec­tion of the grid sys­tem used for the site.

Golden Ratio Calculator

Cal­cu­late the golden ratio of a set width on the fly with this online and OS X wid­get based calculator.

Design and the Divine Proportion

A key com­po­nent in the vehi­cle of com­mu­ni­ca­tion is com­po­si­tion, and in design school­ing it is taught as some­thing you should feel rather than create logically.

Simon Hoegsberg Photography

Sim­ple and func­tional grid based site design.

Grid Designer

A CSS tool used for cre­at­ing scal­able grids and cal­cu­lat­ing typo­graphic set­tings and that gen­er­ates CSS and XHTML templates.

Golden Ratio in Modern CSS

Har­mony. A word that sounds so beau­ti­ful, like its own mean­ing. But how is it pos­si­ble to achieve it in every place of our lay­out design? “Golden Ratio” is the answer.

Yahoo! UI Library CSS Grid Builder

A grid build­ing tool as part of the Yahoo! UI Library that allows you to set the amount of columns and rows.

Constructing the Grid

Step by step guide on cre­at­ing the grid used for the cov­ers of the orig­i­nal Pelican Books.

The Complex Grid

Cre­at­ing a com­plex grid sys­tem that allows for a lay­out to be divided into 2, 3, 4, and 6 columns and that’s based on Karl Gerstner’s grid for CAPITAL magazine.

The Vignelli Canon

A 96 page PDF book by the mas­ter Mas­simo Vignelli on bet­ter under­stand­ing typog­ra­phy in graphic design with a nice sec­tion of grids.

InDesign A3 Grid System (12)

Adobe InDe­sign file with a grid sys­tem for an A3 (297x420) page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

InDesign A3 Grid System (6)

Adobe InDe­sign file with a grid sys­tem for an A3 (297x420) page that is divided into 6 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

Type Book/Grid Project

Project involv­ing devel­op­ing a grid sys­tem, and lay­ing out an infor­ma­tional book on the usage of type, with text from various sources.

Feeling Your Way Around Grids

The Golden Sec­tion, Golden Ratio, and the grandiose Divine Pro­por­tion are all names for the same thing; a ratio of 1.618.

Making and Breaking the Grid

A lay­out design work­shop that assumes that to effec­tively break the rules of grid-based design one must first under­stand those rules and see them applied to real-world projects.

Typogridphy

Typogrid­phy is a CSS frame­work con­structed to allow web design­ers and front-end devel­op­ers to quickly code typograhi­cally pleas­ing grid layouts.

Six Creative Column Techniques

Effec­tive ways of get­ting cre­ative with your columns in grid-based Web design.

Re-subscribe to the RSS feed

The feed url has changed so please unsub­scribe to the old feed and re-subscribe to the new one. Thanks.

About

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom.

If you want to say hi or for general inquiries, send an email to: hello@thegridsystem.org

Have an article, tool, template or news you want to submit? Send an email to: submit@thegridsystem.org

Subscribe

Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.

Colophon