Topic: Personal site redesign using 960 Grid

Working on design and thanks to Nathan on creating the 960 grid to help us non-designers with a template. I have this design that I am working on and I am wondering if I am following the grid correctly with the menu on top:

Site with no grid: … nogrid.png

Site with grid: … e_grid.png

You will notice the menu on the top right side (home, blog, services...) it does not follow the grid structure in regards to alignment for each individual element but it does follow the alignment as an overall element, is that the correct way to do it?

Also if you notice 3 boxes under the main area, the 2 on the left are slightly smaller than the one of the left, that is because I am following the grid. I was wondering if that is acceptable or if I need to choose a different grid to fit a 3 column site.

Any feedback welcome.

//fixed the first link.

Last edited by Helmut Granda (2009-02-21 04:41:33)

"...porque Jehová tu Dios estará contigo en dondequiera que vayas." Joshua 1:9

Re: Personal site redesign using 960 Grid

Certainly you can break a grid down into its parts in order to make unique layouts. The third column being a bit wider than the other two isn't necessarily a bad thing, it just might make your design a little bit heavy on the right side. But that depends on what you put in that column. If you're wanting a three column layout you might try the 12 column template also packaged with the 960, it's easier to break down in that way.

As far as your concerns about keeping the grid for the navigation, try to keep everything out of the spaces between the columns. Each of the columns has a 5 pixel margin on both sides, that's what gives the grid its spacing. On a single column, meaning the smallest element, the text should start on the left side of the column (Personally, I add an extra 5 pixel indention on all text throughout the design) and it shouldn't hang off into the margins if you can help it. (But it can be okay if it's just by a little bit and your design is somewhat loose and open.)

The easiest way to handle a situation like this is to increase the space for each navigational item to two columns. (Meaning, the first column + the 10 pixel margin in between the two columns + the second column.) It should give your elements a little more room to breathe and allow for larger text like "portfolio". If you don't like or can't use the larger columns for some reason, consider making the text smaller or turning it sideways, or something. It's all your choice, really.