Advertisement

In the last article we talked about Working With Grid Systems and how they can benefit our design structure. Grid-Based layouts are usually much more balanced and aesthetically pleasing to the user as opposed to create on a blank canvas. This is not to say that it’s mandatory but for the right projects a grid and the proper use of gutters (margins) can make all the difference in creating a solid long-lasting impression on the web.

When it comes to creating on the grid, as I mentioned in the last article 960 Grid System has become the standard in Grid Systems because it’s user friendly and caters to designers as well as programmers. This tool is pretty limited to web design and we’ve seen plenty of tools that create CSS grids, but what about other Grid System tools for graphic designers?

Here are some great tools and resources to help you get started creating Grids in any format, ranging from intricate fixed width iOS Photoshop Grid System Templates, down to good old Printable Graph Paper:

Blueprint CSS
Grid-Systems7.png

Blueprint CSS is a popular CSS Framework that is useful in cutting down development time and included in the package is a Fixed Width PSD including a sample site.

Here are a few extra designer resources from Konigi to use with Blueprint CSS:

Konigi Photoshop Template for Blueprint CSS Comps

Grid-Systems5.png

Konigi Photoshop Template for Blueprint CSS comps is a template for use with Blueprint CSS that features a 24 column grid of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided.

Konigi Illustrator Photoshop Template for Blueprint CSS Comps
Grid-Systems3.png

Konigi Illustrator Template for Blueprint CSS comps is a template for Blueprint CSS that features a 24 column grid for use with Blueprint CSS for the illustrator based web/graphic designer.

InDesign Grid Calculator Pro
Grid-Systems9.png

Designers Bookshop has created Grid Calculator Pro a Plug-In for Adobe InDesign CS3 – CS5.5 for creating a Grid System. A Swedish Graphic Design student created it when he realized that there were no available options for creating Grid System in InDesign. CS6 Version is not yet available but you can pre-order it now for $99 for the late June Release.

The Golden Grid Template
Grid-Systems6.png

The Golden Grid Template is a PSD template based on the CSS framework by Vladimir Carrer.

PSD Grid Layout Generator
Grid-Systems10.png

The PSD Grid Layout Generator presented by Dan Lien is a script and action file for Photoshop that can generate a grid layout based on the PSD file found in 960.gs grid system. (last tested on CS3)

iPad, iPhone and Desktop Photoshop Templates
Grid-Systems.png

Designer Rob Flaherty has created a useful collection of grid system template PSD’s for various screen sizes. Currently includes templates for: iPad, iPhone, and Desktop screens.

WPDFD Browser Grid
Grid-Systems4.png

The WPDFD Browser Grid is a site that represents maximum safe sizes for the three main monitor sizes from 640×480 to 1024×768. This is an older site (from 2001) but the downloadable graphic is useful for smaller site designs and besides, it’s pretty to look at if you ask me!

3×4 Grid Builder
Grid-Systems8.png

3×4 Grid Builder is not really a design tool but I thought it was worth noting due to its super simple interface. Grid Builder let’s you build an html grid in a drag and drop interface.

975px Grid System
Grid-Systems1.png

960 pixels not good enough? The Grid System features a PSD file with a grid system for a 975px wide page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 16px base­line grid. Additionally, you can change the base­line grid to 4px to gain more leading options.

Grid Based
Grid-Systems2.png

Grid Based is not a tool, but a site that features designs that were built on a grid system. It’s important to see what other people are doing to inspire your own work. Unfortunately the site is currently not in operation due to spammers but it will soon be up on a new server.

Konigi Printable Graph Paper
Grid-Systems11.png

Last but not least, why not get off the computer and start wireframing on Graph Paper? Konigi has created a classic printable 8.5 x 11 inch graph paper for visual designers, interaction designers, and information architects. Also included are bonus styles for wireframing user interfaces, and story boarding interaction.