Grid-Based Web Design, Simplified. Applying Divine Proportion To Your Web Designs - Smashing Magazine. Advertisement Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous1 posts2. However, how can you achieve a clear and intuitive design solution? Well, there are a number of options — for instance, you can use grids, you can prefer the simplest solutions or you can focus on usability. However, in each of these cases you need to make sure your visitors have some natural sense of order, harmony, balance and comfort. And this is exactly where the so-called Divine proportion becomes important. This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs.
Divine Proportion Consider the example above. First, calculate the width of your #content-block. This is the whole idea behind the “Golden” proportion. The Rule of Thirds So how do you split a layout into 9 equal parts? Summary. The Grid System. Gridding the 960. You might recall a certain dialogue on this site about optimal layout width for 1024px. And perhaps your astuteness leads you to recollect the ensuing dialogue about fluid vs. fixed width. Shift gears for a moment and see if you recall Khoi Vinh’s discourse regarding the use of a background image grid for Subtraction.com (or for TheOnion.com redesign). Cross that with Greg Storey’s px ruler background image and Christian Watson’s similar image, and the culmination of these recollections might be the following: Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package. Consider the possibilities: …and so on.
Not keen about constructing your own grid? In related news, this was one of the items covered in yesterday’s Web Design World workshop, which appears to have gone over well based on audience feedback. Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry. CSS Grid Calculator. 960 Grid System.