designing websites using grids

I read a lot about grids and how they make the websites look good (needless to say I agree)

though I have not been able to work with them. Have not been able to “feel” the advantage whilst using the grid system (I’m always talking about the photoshop stage).

So I was wondering if there were some resources on how to take advantage of the grid system. Preferably, I’m looking for tutorials (better still video tutorials) where the author says “this is how I use this everyday” NOT “this is what you can do”. Basically, I know how to use the grid system. but I am looking for good practices, Something (for example) I would get by looking over the shoulder of an expert.

Hope you can help, thanks



A benefit from using grids helps you apply even spacing of elements in your composition. When you’re working with information and text elements, like a web page, it’s highly important that one places elements onto the layout with a structured, visual hierarchy. Information of course, is the backbone of the web so creating structure of this information is just as important as any other informational design project.

One of the many things I learned from graphic design school was that visual elements need room to breathe and white space is just as important as visual elements on the layout. Try to experiment with your layout. Make one composition with arbitrary padding and then make another following the guidelines of the grid. I can guarantee you that the layout that is more regulated, in terms of placement of information, will look more professional. Somewhat bizarre if you think about that you’re using the same exact elements and the only difference is the spacing between them!

As stated in the previous posts, you can use 960grid system to help you with the web/photoshop stuff. You can also check out this grid system book at the library (yes, a library) to gain more knowledge about it. Other resouces: The Grid System, Grid System Wiki

Good luck!

Source : Link , Question Author : aurel , Answer Author : Mike

Leave a Comment