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.
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
Looking for feedback. Do you sketch out designs? Do you use any of these concepts in designs? What do you use?
Related Posts
Subscribe by 
Follow me on 
Moleskine – 960 Grid System, Divine Proportion, Rules of Thirds…
Applying the 960 Grid System, Divine Proportion, and Rule of Thirds to a Moleskine notebook….
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.
I love this 'Divine Proportion' idea. Creates some really nice eye-candy. Thanks for the references!
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
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.
[...] Moleskine – 960 Grid System, Divine Proportion, Rules of Thirds | John Wang (tags: 01 2009 moleskine productivity inspiration) [...]
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.
Web design
If you have decided that you need a good website for your business,the next step is to decide who should create it.This decision is one that needs a lot of attention because if on the one hand, a well-organized and attractive web design can help you tremendously in making more money; on the other hand,a poorly designed website can cost you money, drive away customers, and can hurt your company reputation.
Designer Handbags
Louis Vuitton replica handbags
Replica Handbags
Replica Rolex
Replica watches
Rolex Replica
Rolex shop
Rolex
Gucci bag
Gucci handbags
Gucci
Louis Vuitton
LV Bags
Replica Watches
Replica Rolex
steel shelving
storage rack
racking
conveyor chain
wow gold
maplestory mesos
tattoo equipment
tattoo machine
Replica Watches
Replica Watches shop
Cartier shop
Omega shop
Patek shop
Longines shop
casio shop
Patek Philippe shop
aion gold
buy aion gold
aion power leveling
wow gold sellers
buy darkfall
buy darkfall gold
darkfall online gold
psu meseta
buy psu meseta
phantasy star universe meseta
Fed up with getting low numbers of useless visitors to your website? Well i want to share with you a brand new underground tactic which makes myself $900 on a daily basis on 100% AUTOPILOT. I could truthfully be here all day and going into detail but why dont you simply check their site out? There is a great video that explains everything. So if your serious about making hassle-free cash this is the site for you. Auto Traffic Avalanche