Thoughts about how grids have been used throughout time to create consistency in visual design
For thousands of years, Tibetan Buddhists have maintained consistency in their religious iconography through the use of geometric grids. These grids have been developed over the years and provide a structural framework which helps to maintain consistency as various artists create these sacred images. The traditional artist would first create the grid, then begin the drawing, working within the constraints of the grid.
Grid consisting of golden section rectangle is drawn based on geometric principles and defines the proportions of the Buddha face.
The face in drawn according to the grid.
The final face of the Buddha – drawn by me. This was a first attempt, which was surprising how consistency and design can be so effective by implementing a creative grid.
This principle can be applied to contemporary design (including web design). The general concept of using a grid has been written about quite extensively, but most grid implementations are quite simple. Most are based on only horizontal divisions, or simple proportions of columns based on the golden section.
The design bloggers have commented on grids in these articles:
- Mark Boulton’s Five Simple Steps to Designing Grid Systems
- Khoi Vinh’s Grid Computing… and Design
- Cameron Moll’s Gridding the 960
- A List Apart’s Outside the Grid -Andy Rutledge’s Quiet Structure
There’s also plenty of classic and contemporary literature on designing with Grids — take a look at the following:
- Elements of Typographic Style by Robert Bringhurst
- Grid Systems by Joseph Muller-Brockman
- Consistent Correlation Between Book Page and Type Area by Jan Tschichold
- Grid Systems–Principles Organizing Design by Kimberly Elam
While the Buddhist grids are much more complex, and designed to consistently generate similar imagery, it seems to me that there would be some way to generate a successful grid system for web design projects that isn’t limited to simply defining the widths of columns.