GridStarter is a Photoshop template used to make the initial layout of a new website easier and more efficient.

Through a series of grid overlays, it is possible to very quickly and easily line up page elements and make view them the way they will be seen in a browser. I personally use this on any original design I do and can not remember the time before I used it. It truly transformed the way I approach web design, sped up my design time, and improved my designs in ways that I did not predict.

Download GridStarter (.zip)

GridStarter ScreenCasts

THE BASIC CONCEPT:

The idea is to base everything on a 960px wide layout which is considered the safe maximum width in order to be visible on the majority of screens. Sure there are widescreens 1920px wide, but most people will not be viewing your site on that big of a screen.

The 960px layouts uses a 10×10 grid and 60×60 grid. The reason for using 60px, rather than 50px or 100px, is that 60px divides evenly into 960px in a number of ways making evenly laid out 2, 4, 6, 8, and 16 column layout possible.

But there are also some 1000px layout options with 50×50 and 100×100 grids.

HOW THIS CAME ABOUT:

I found several posts about using a grid based system for designing sites. Some used 1000px layouts, others 960px. Some have better ways of displaying the information and switching the overlays on and off. Some were justified to the left of the screen and others were centered.

After experimenting with them all, I found myself liking certain aspects of each and thinking that some would be more appropriate in certain situations but that none would fit every situation. Combining several ideas and modifying them to fit the way I work, I now use this ‘StarterGrid.psd’, which has both 960px options and 1000px options. Each set of grids are centered in a widescreen layout allowing us to see both small screens and big screens at once.

I also added some height to the grids I had found and tried to combine the best they each had to offer.

SOURCES / CREDITS:

This is by no means an original concept of mine and I want to give credit where it is do, to the best of my knowledge.

960 grid: Cameron Moll “Gridding the 960″
As far as I can tell, this where the original 960 grid .psd file came from. At the very least, this is where I found it.

Widescreen Approach: www.designified.com
This is where I found the idea of adding the width so we can see it centered on a widescreen monitor. They also added some nice layovers to see the grid over the design in several column options.

Further Reading:

Resources: Great list of grid turorials and resources

Great Grid Tutorial: Turning your grid design into CSS

USAGE:

Since I found my sources offered for free, I am passing it on for free as well. Please continue to share itand improve as as you see fit.

If you come up with any great improvements – please send it back my way!

For tech support or questions, please go to: My GetSatisfaction Page.

Download GridStarter

GridStarter ScreenCasts

GridStarter is now part of the WpJumpStart System

Find Out More