Moleskine - 960 Grid System, Divine Proportion, Rules of Thirds
- John Wang
People are always talking about the importance of sketching as part of a process in web, logo, or graphic design. For example: A List Apart, David Airey, and PSDTuts all have an article putting some sort of emphasis on it. Jason Beiard also touches on it as part of his layout chapter in his book The Principles of Beautiful Web Design. And even the Twitterverse of Web Designers gave an overwhelming response when asked about sketching.
I can understand why people will bypass the sketching process in favor of jumping straight into Fireworks, Photoshop, or Illustrator as it does add a step and slow you down a bit. Even more so if you have access to a graphic tablet such as the Wacom Intuos or Cintiq.
Personally, I don't mind the slow down and find it more helpful to do the sketching. I use a Moleskine Large Squared Notebook. It's a small grid notebook (13 x 21 cm) with 240 pages. Recently, I have been trying to incorporate the concepts of The Divine Proportion, Rule of Thirds, and 960 Grid System into some designs. But first, I needed to find a way to incorporate them into the Moleskine for sketching. Unfortunately for me, a few Google searches came back with empty results and I was left to do them myself.
The Divine Proportion
The magical irrational number 1.61803 (phi) that makes all things proportioned to it, aesthetically pleasing. I mostly just use this to separate content in website design. Divinely proportioning the Moleskine should be easy as it's dimensions of 13 x 21cm are within 0.2% of said Golden Ratio. Anyways, the math comes out like this:
Horizontal format: 20/1.618 = 12.97 cm ~ 13cm (25 boxes.) That leaves us with 8cm (15 boxes) on the other side.
Vertical format: 13/1.618 = 8 cm (16 boxes) by 5 cm (10 boxes.)
The Rule of Thirds
A simplified version of the Divine Proportion. And much easier to do without doing math. This was also the easiest to implement with the Squared Moleskine. The dimensions of the notebook I gave you previously (13 x 21 cm) does not really lend itself to making this easy. But, having painfully counted the number of actual squares and measuring them I found the notebook is also 25 x 41 boxes. So, I gave myself a rectangle with 1 box border on the right, 2 box border on the top, 3 box border on the bottom and half a box on the left. Making an internal box dimension of 36 x 24, which is easily divisible by 3.
Vertical format: 6 x 4
The 960 Grid System
The 960 Grid System provides downloadable templates for PDF grid paper, Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML. That's pretty wonderful considering it's all free. The problem for me was, the PDF is not in my Moleskine and not the size of a Moleskine page. So it was back to doing more math. The 960 Grid System uses a 12 column or 16 column format. This was a bit more complicated. Probably the most complicated of all. Anyways, Nathan Smith does a great job at explaining everything on the website. Of particular interest to me was the Dimensions section where I found the needed numbers to incorporate the columns into the notebook. Unfortunately, it was too difficult to incorporate it in a vertical format. At least for now. I may revisit it later. Below are the results.
12 Column - 0.5 box margins, 2.5 box column width
16 Column - 0.5 box margins, 1.5 box column width
Further Reading
- Cameron Moll - Gridding the 960
- Prototyping With The Grid 960 CSS Framework - NETTUTS
- Applying Divine Proportion To Your Web Designs | How-To | Smashing Magazine
- The Principles of Beautiful Web Design [Design Principles] - Grid Theory
- The Monster Collection of Moleskine Tips, Tricks and Hacks - FreelanceSwitch - The Freelance Blog
- moleskinerie: The Divine Moleskine
- The Golden Ratio in Web Design - NETTUTS
- Golden Ratio in modern CSS
- 960 CSS Framework - Learn the Basics » DivitoDesign
- Tricks to Solve 960 CSS Framework Problems » DivitoDesign
- A Detailed Look at the 960 CSS Framework - NETTUTS