The Almighty GRID–Resources

CREATING A GRID is typically one of the very first things you do when starting a design. After all, it provides the basic structure on which the rest of your design will lie. They help you create sophisticated layout structures which offer more flexibility and enhance the visual experience of visitors to a website. Users can follow the consistency of the pages easier. Grids also help designers and art directors determine the hierarchy of elements on the page. How much space you give an element on the page corresponds to how much importance it has, and a grid helps with this process. This doesn’t apply solely to websites either, grids should be the basis of all designs. To learn more about designing with a grid and examples visit this article on smashing magazine.com

I came across a number of ways to establish grids using resources and templates found online…

Modular Grid App

THE MODULAR GRID APP works in Chrome, Firefox, Safari and Opera. The Web app enables you to create a grid pattern and download it straight from the browser as a photoshop layer, a png pattern, and a transparency mask. This creates a grid all in one layer, so your guides can be used for other purposes, and the grid can be overlaid in various degrees of opacity so you can make it less distracting as you are designing. You can label the patterns and put them in a folder so you can come back to a grid you made previously.

Guide Guide

GUIDE GUIDE is A photoshop plugin. Instructions for installing it can be found on the GuideGuide Page. Russell Brown from adobe put together a video tutorial you can view by clicking here.

960-Pixel GRIDS TEMPLATES

https://www.thegridsystem.org/

The Grid System.org  links to a number of grid resources like grid templates, tools, books, articles, and inspiration.