Mar
20
I've come across the "Golden Section" (in its various forms) for web-development quite a bit recently -- okay, well twice...but I need to use it for work now and in the coming weeks. For those of you unfamiliar with the Golden Section, you have a few places for reading. There's a brief introduction to Fibonacci and the Golden Section/Rule/Mean/Ratio, the PhiCalculator to determine proper pixels, the power of the rule of thirds, and pretty much all of Mark Boulton's site, but potentially his articles on grid systems for the web. So...I want a piece of paper that is something like graphing paper, but not only am I too cheap and lazy to go out and get some, there's plenty of regular paper here, and the tools I need to create graphing (or quadrille) paper here at work (and at home).
I more or less want a page split by the rule of thirds. Going from the recent Web Typography Sucks slideshow from SXSW 2007, I decided to create my own little grid based on their example in the slides. I think I did just that using (quick and dirty) HTML and a little CSS. It's a good thing I didn't end up going with the Photoshop idea! What a mess that would have been! (I would have also figured there would have been downloadable PSDs to use...figures, couldn't find any.)
So, although I plan to tweak this up a bit (to instead mimic Jason Beaird's grid using the rule of thirds in his new book, The Principles of Beautiful Web Design (for non-designers), the current iteration of this code can be found below:
Please Take Note: You will want to print this in LANDSCAPE in either Firefox or Opera web-browsers on Windows (XP). I have not tested this in any other browsers. However, if it does not fit in a different browser (or under the settings on your computer/printer combo) you can simply alter the font-size: 1.39em; line in the above code.
So, although I plan to tweak this up a bit (to instead mimic Jason Beaird's grid using the rule of thirds in his new book, The Principles of Beautiful Web Design (for non-designers), the current iteration of this code can be found below:
Please Take Note: You will want to print this in LANDSCAPE in either Firefox or Opera web-browsers on Windows (XP). I have not tested this in any other browsers. However, if it does not fit in a different browser (or under the settings on your computer/printer combo) you can simply alter the font-size: 1.39em; line in the above code.
0 Trackbacks