The Golden Grid
A complete grid system for super fast wireframing and visual design.
via The Golden Grid – A complete grid system for super fast wireframing and visual design..
Based on the 960 Grid System.
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
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
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.