I recall an episode in my life as a web designer where I’d continuously struggle (and most of the time fail) in doing layouts. This all changed when I learned about grids.
Design and Mathematics
I used to think that being able to apply proportion and rhythm in design is based on one’s innate ability (and/or experience). However true for some people1, it turns out that you can be scientific/mathematical towards this problem and still attain a visually pleasing result2.
Let’s take a look at the Golden Ratio.
The Golden Ratio
It basically consists of two numerical values. One which is wider than the other but in a way that is proportionate to its sum with its smaller other. We can describe this simply in an equation.
(a + b) / a = a + b
In web design, you can get the next proportionate element by either multiplying or dividing its width value by 1.61803399. So for example, if you have 960px container, an ideal container for your content would be 593px since:
container = 960 content = container / 1.61803399 content = 593.31...
and for the sidebar the value would be 366px since:
content = 593 sidebar = content / 1.61803399 sidebar = 366.49....
We still end up with the original container width if add it up:
sidebar + content = container 593.31 + 366.49 = 959.8
Whipping out a calculator everytime you’re prototyping a layout sounds tiresome, boring and certainly not fun. So what I did was to create a guide in Adobe Illustrator:
If we take a look at the grid, You’ll see that it’s a series of squares repeating over in a spiral direction. In Mathematics, this is popularly known as the Fibonacci Sequence. This creates a predictable pattern that the natural world is fond of. which explains, I think, the reason why humans are psychologically attracted to things that are proportionate.
From here, I’m able to quickly visualize and mock-up the placement of the elements. Here’s a fast comp I came up with for this example:
I think it looks decent enough. Let’s see what it looks like without the guide:
Not necesarrily an award winning layout but it works.
A grid system is extremely helpful in rapid design to html/css prototyping. By specifying the total columns, the column width, and the gutter width, it makes it easier for the front-end developer to scaffold everything in place. This is also a design requirement in Responsive Web Design.
I suggest trying out css frameworks like Blueprint which has a low learning curve and something that I’ve personally used. A friend of mine suggested that the Foundation framework’s interesting to look into.
I wish I could discuss more about this, but the topic is so eclectic to elaborate.
I personally think that Using grids can sometimes feel a bit restricting. Especially when trying to be different from standard layouts. But then it also trains the designer to become disciplined in terms of his workflow and creates a middleground framework that teams can use to convey their ideas collaboratively.