Do you use a grid system when you design websites? If so what resources have you used to learn the technique? Any good books that explain it?
I've never used grids when designing (well, not in the sense that I've read about so far) so I'm interested in learning more about the system. When I start designing something I have it preplanned in my head more or less, than use the smart guides (I think that's what they are called) in Photoshop to keep things in an organized fashion with spacing and line and such.

9 Comments
davidhayes
Written Nov. 16, 2007 / Report /
I've actually never built one, but I would recommend Khoi Vinh's Subtraction.com which is both a nice example and has number of guides. This is a good introduction, and this is a more detailed look at his process.
xirclebox
Written Nov. 16, 2007 / Report /
I use a 10px by 10px grid in photoshop/flash when designing. Helps keep thing balanced. Been doing this since photoshop 2 :)
JPhill
Written Nov. 16, 2007 / Report /
I use grids sometimes. I just found this grid bookmarklet that I want to use on my next project.
JoeLencioni
Written Nov. 16, 2007 / Report /
In addition to what others have mentioned, here are some good resources for learning about grid design:
You may also want to think about using something like Blueprint CSS.
lalindsey
Written Nov. 16, 2007 / Report /
Thanks guys, my eyes are too busy to do any reading tonight, but I'm definitely going to bookmark these sites and start learning more about it. I think it would help streamline my process and make the design process a bit easier.
angrysteve
Written Dec. 2, 2007 / Report /
Hey, looks like this was posted up a couple of weeks ago but just wanted to point you at Smashing Magazine's 'Designing With Grid-Based Approach' here.
There's an excellent WPDFD browser grid graphic which I recommend to all designers (link). Usually I stick it in the back of my PSD files and work a wireframe over the top.
Grids are fundamental to any design whether it be web or print based. Check out Josef Muller-Brockmann's 'Grid Systems in Graphic Design'. Written in 1961, these principles are still very relevant today.
Hope this helps ;-)
Scrivs
Written Dec. 3, 2007 / Report /
Grid Systems in Graphic Design is the bible for this. A must-have for any designer really and offers a deeper explanation and purpose for grids beyond they just work well. Angrysteve mentioned it above, but I figured I would throw out a link.
maestroe
Written Dec. 7, 2007 / Report /
i use a panel based grid sustem.. erally easy to implement
ex.
<div id="container">
<div id="Panel1"></div>
<div id="Panel2"></div>
<div id="Panel3"></div>
</div>
if you look at each panel as a horizontal grid you can use that as subsectionContainers then build within container...
i can elaborate more if you'd like
armen
Written Dec. 7, 2007 / Report /
Thanks for the link, Scrivs. I just designed my first grid based design, and I could do with learning more about it.
I wouldn't mind some feedback on it either, if anyone is willing.