I love grids. I’ve been designing with grids for some time now and I’m not sure what I would do without a well designed grid system. I’ve read how people accuse grids of “limiting” the design, but I disagree with that. Those people don’t understand grids or how they should be used. A grid should not drive a design, the opposite is actually true. A grid system should be created based on the overall objectives of the design. I’ve heard people say that grids force a design to be “too structured” and not organic enough. If used correctly, a well designed grid system can be as “organic” as you want it to be. You can use circles in your entire design and the grid would still work. It’s extremely flexible. Grids give purpose to the positioning of the content on the page. There is a reason why that copy block is 10 pixels below the image. It all has purpose.

I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up. The beauty of creating a grid for Flash is that you can create a fixed grid and don’t have to be concerned with the user changing type sizes and screwing up the entire grid of the site. The only time you have to be concerned with a fixed grid is if you build a Flash site where the contents of the site repositions based on the size of the browser window, in which case you would have to figure out a fluid grid which is something I haven’t done yet but plan to do in the future.

Canvas Dimensions
The first step in the process is to figure out which screen resolution you want to design your site for, which in turn will help you decide on the dimensions of the grid. The standard dimensions I used is 946×610. It might seem like an arbitrary size but it has a purpose. 946×610 gives you a nice size canvas that won’t get cut off on a 1024×768 screen and it divides up well, both vertically and horizontally, into thirds and forths. On a side note, I really wish people would use higher screen resolutions cause designing for such a small screen is getting old. It’s like having to design with web safe colors. Let’s go folks! Crank those screens up!

The Grid
Ok let’s start making this grid. Now that I have a 946×610 canvas I can start dividing it up into columns and rows. I first start with the columns and divide the space horizontally using the rule of thirds, which is based around The Golden Section. When you divide the canvas into thirds with a 10 pixel border all around and 10 pixel gutters, you end up with 3 columns that are 302 pixel wide as shown in the image below.

Next I divide each of those 3 columns in half. I now have 6 columns that are 146 pixels wide.

Then I divide these 6 columns in half using a lighter colored 10 pixel gutter which creates 12 columns that are 68 pixels wide. At this point I have a grid that can be divided horizontally into thirds and fourths which gives me a great deal of flexibility. Also, the width of 3 columns (224px) is ideal for copy blocks. Based on typography standards, you want to have about 8-10 words in a line for optimal legibility which this width allows at certain type sizes.

Thirds

Forths

From here I divide the grid vertically into 12 rows that are 40 pixels in height which also can be divided into thirds and fourths. Khoi Vinh has mentioned on his site that he doesn’t divide the canvas vertically but since this is for Flash and the canvas is fixed, I think dividing vertically is important because not only do I have a horizontal structure but now I also have a vertical one as well. So now I have a flexible grid that gives me a lot of options both vertically and horizontally.

Baselines
The final step I take in making my grid is a something most people don’t do, which is adding baselines for type. I learned this from my Swedish pals Jens Karlsson and James Widegren while working at The Big Spaceship. The reason why I use baselines is to give myself some sort of structure for the copy on the page. The baselines are 1 pixel and are spaced out 10 pixels apart from each other which includes the baseline itself. So if you measure from the bottom of one baseline to the bottom of the next baseline you’ll get a spacing of 10 pixels, which works with the overall gutter sizing of the grid. When laying out the copy, I lineup the bottom of the text right on the baseline and not above it.

100% crop

The baselines give me some guidance with leading, as long as the leading size is based on the multiples of 5. So if I set my leading to 10 points, each line will fall on a baseline. If I set my leading to 15 points, every other line will fall on a baseline. You can see an example in the image below. Baselines allow all the text on the entire page to work together, giving you an underlining copy structure.

10 point leading

15 point leading

Conclusion
I now have a complete grid system that is extremely flexible. Click here to see a full size version of the final grid. Once I have my grid all set I can start laying out my design. Here is a quick design I created using the grid:

Design with grid overlay
Design only

Well that’s it. I hope this little tutorial was helpful. Grid systems are very easy to make, if you first think it out, and are an important part of any design. Keep in mind that this grid can also be used for non-Flash sites as well. And since I’m such a nice guy, here is the layerd PSD file to explore and mess around with. Feel free to leave comments.

Creating a keyboard shortcut with Photoshop Actions
One thing I like to do to speed up productivity is to create keyboard shortcuts using Actions to hide/show the Grid layer instead of having to go to the layers palette each time. I’m a shortcut freak so this works well for me. You need to create two separate Actions, each with it’s own key command. The first Action you need to create is the one that turns the Grid layer on. I set the function key for the first Action to COMMAND + F12 but you can set it to whatever works for you. The second Actions turns the Grid Layer off and I set the function key to COMMAND + SHIFT + F12. I try to keep it as close as possible to the first action shortcut so I can easily switch between the two. Now when you press Command + F12, the action will show the Grid layer and when you press COMMAND + SHIFT + F12 the action will hide it. You can download the Action file and load it into Photoshop. Enjoy.

References
Here are some great articles and books about creating and using grid systems.

Five Simple Steps To Designing Grid Systems

The Golden Section

Why Use A Grid?

The Funniest Grid You Ever Saw

Grid Computing… and Design

Setting Type on the Web to a Baseline Grid

Grid Systems in Graphic Design – by Josef Muller-Brockmann

Making and Breaking the Grid – by Timothy Samara

Grid Systems: Principles of Organizing Type – Kimberly Elam        

A great article over at A List Apart on how to set type using baselines.