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

moleskine

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

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

Share the Love:

Related Posts

Stefan Vervoort
That's pretty cool! In my latest logo, I used drafts all the time, but in webdesign in general, I can't really express what I want to create. Same goes with Photoshop. I came up with a general idea and layout colors/graphics, but the actual organizing the design comes with the HTML. I usually shuffle everything to get the best look and feel! Thanks for the article.

luna
I love this 'Divine Proportion' idea. Creates some really nice eye-candy. Thanks for the references!

Chris Avore
Hey John,
Greetings from a fellow Terp still living around the beltway--definitely jealous of your location on a cold, cloudy day here.

I regularly sketch out design patterns or chunks of functionality, especially in requirements-gathering meetings or when listening to what a client describes as a need.

I certainly don't go the route of measuring how far the submit button is away from an input box, or if the right column should be 15cm (or em) from the left column, but I can easily understand and communicate the proportions of one design element to another based on the drawing.

But a quick drawing can assure a client we're on the same page and we both understand fundamental interactivity.

Similarly, I also regularly use paper prototyping using either different sizes of paper or notecards to communicate state or changes in the UI based on an interaction--also useful stuff and even more customizable when you have a pen or pencil in hand to write directly on the paper mockups.

I look forward to reading more of your work in the future--
Chris

John Wang
Hi Chris,

Great to hear from a fellow Terp. I like paper prototyping as well. The problem is, I always end up losing the papers, or they get jumbled up with some other stuff that they shouldn't. Or like one of my current pieces of paper, coffee stained. I also found the notebook to be a good way to keep everything together and also a little bit portable for meetings.

Jason O'Brien
Bringing two of my favorite things together, nice!

I recently covered some more general tips and tricks for designing with 960 in the hopes that we can open up frameworks for the less developer-savvy designers out there: http://blog.centresource.com/2009/06/15/6-tips-...

Keep up the good work.

John Wang