[Follow me on Twitter]

The Golden Grid

A complete grid system for super fast wireframing and visual design.

Based on the 960 Grid System.

Download the Golden Grid 1.0.zip (3.3mb) what's in the package?

What it is

The Golden Grid adds the horizontal guides to the 960 Grid System. The rectangles formed by the intersection between the lines and the columns are characterized by harmonious dimensions and are the same as those found in nature and in the human body. The layout is magically more balanced, and the positioning of the elements on the page makes for quicker and more precise work.

[]

Inspiration

The Golden Grid takes its inspiration from the concept of harmonious relationships found in the golden section. In the world of printing and typography, the positioning of elements on a page does not come about by chance, but according to a plan that distributes form and maintains the overall balance.

[]

The golden section

The golden section typifies the concept of proportion. In nature, the golden sections’ principles of harmonious relationship is everywhere: pineapples, pinecones, sea urchins, chambered nautilus and in the human body.

Worth noting

The Golden Grid

  • does not correspond to a code
  • currently, it makes sense only on a fixed layout

What's inside the zip

  • templates for Photoshop, Fireworks, OmniGraffle, Illustrator, InDesign, Pixelmator and Flash plus Photoshop actions
  • for those who have already used the 960 Grid System: for ease of use, the set-up of files and folders in the zip file follow that of the 960 Grid System zip

Specification

[]
x12/16/24 col

The Golden Grid is comprised of rectangular forms in which the relationship a/b between the sides is equal in value to φ (phi) of the golden section, overall around 1,6180:

Grid
  12 col 16 col 24 col
a 60px 40px 30px
b 36px 24px 18px
x 20px 20px 10px
y 12px 12px 6px

Use

[]
x12/16/24 col

The Golden Grid is designed with the intention of making template layout more nimble, so as not to hinder creativity. The 'net'-like structure preserves harmony and balance on the page and is a more interesting way of providing new and innovative solutions. Hint: multiple modules preserve the proportions of the golden section.

Beyond the Golden Grid

[]

The Golden Grid works particularly well when used together with some frameworks founded on the baseline grid, such as the one by Teehan+Lax.

If you have any advice or want to let me know how you have used the Golden Grid, just let me know: I might feature you as an example.