When your website means business.

«Return to Blog List Free 4-column Grid Photoshop Templates for Better Web Design

Update 11/10/2017: Please note the date of this post. The post does not refer to the relatively new, not widely implemented (yet) Grid Layout.

Update 6/15/2015: In this age of responsive web design, you should be starting your templates with Zurb Foundation or Bootstrap. At this point there is little or no reason to design websites on static-width templates, and therefore:

The templates originally available for this post are no longer available for download.

Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).

In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.

Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.

Tags: , , ,

Comments are closed.