Moleskine - 960 Grid System, Divine Proportion, Rules of Thirds



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.

golden_horiz.jpg 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

Looking for feedback. Do you sketch out designs? Do you use any of these concepts in designs? What do you use?