I’m really happy that many people enjoyed my article on Web Design Project Planning and Process. That’s why I decided to give you all a nice little gift: a free powerful 960px grid template for Photoshop.

It’ll come in handy every time you have to build a wireframe or a site layout with photoshop.

Wireframe 960px Grid Template

Quick tips for better use

  • The layers inside the folders “3 columns grid” and “4 columns grid” are made with the rectangle tool. Hence, you’ll be able to resize them easily, without having to redraw everything.  If you don’t want to stick to the usual 20px margins between columns, you should use one of this 2 folders.
  • In the folders “3 columns grid” and “4 column grid” you can choose to display only the gap between the columns, only the columns themselves, or both.
  • The grids for 6, 12 and 16 columns are called “quick grids”. They are made of rasterized layers. Therefore you won’t be able to change their size. You should use them if you like to work with frameworks such as 960.gs or blueprint.
  • The other folders, beside the “guide” folder, are empty. They are ready to receive the layers of your own layout.
  • I decided to draw a line showing the fold area. It’s only an indication as the fold area can differ a lot depending on the user browser and screen resolution.

Enjoy!!!

Enough chit-chat. Here is the 960px grid template that I’m giving you! I use it for almost every site I make and I love it. So I hope you’ll love it too.

If you have any idea to make this grid better, please tell me!

Many thanks.