Designing Grid Systems For Flash

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.

steps

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

steps

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.

steps

Thirds
steps

Forths
steps

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.

steps

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
steps

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
steps

15 point leading
steps

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        

Posted on Posted in Design, Grid Systems, Typography

57 thoughts on “Designing Grid Systems For Flash”

  6. Wow, Really helpful tutorial. I’m designing a flash site for a college project and I will be sure to link it here when I’m finished, Cheers Mate

  7. Dumbass question though. Do you make the grid in Photoshop and import it into Flash or do you create it in flash? Please don’t hurt me 🙂

  10. hi

    thanks for the link to this page, i have downloaded the file and cant wait to have a play around. cheers!

  11. Antonio,
    thanks for the link.

    I set-up grids of similar nature.

    But, just because I can’t sleep at night if type doesn’t sit nicely on the baseline: if I were using your rule of divisible by 5, i’d personally set the baseline to 2.5. Which tends to give more flexibility in the leading (and peace of mind) this keeps every line crisp on the baseline.

    I mainly work in print: one thing that really bug’s me is full carriage returns between paragraphs, in multiple columns.
    I tend to prefer to overall text density with half space returns, but then it throws out the baseline completely.

    Any suggestions to resolve this other than having the identical number of paragraphs, or indents?

    Thanks,

    Steve

  12. Steve I’m not sure I follow. With a full return, it should keep everything on the baseline since the space created by the return is the same as the space with a line o text.

  13. that’s correct, but visually i sometimes prefer
    the return to be half the space of the leading.

    A return that is the same as the leading often creates too much space between paragraphs.

    if you follow…

  14. Ah I see. Well that’s a tough one. I’m not sure you can have everything fall on a baseline when you reduce the space. Personally I like the space created, it makes it easier to read. When the paragraphs get too close it starts to run into each other.

  15. I suppose it depends on the specific design.
    Maybe I should change my preference.
    Or find another solution.

  19. Thanks for this, I found it helpful.

    I’ve always been into design but am only just learning about the theory – I have apparently been running for a few years before learning to walk, so to speak, and I was wondering what books you would recommend on the subject of grids?

    Also, I am aware that a lot of designers don’t use grid systems for the reasons you state at the start of the article. How do these designers go about organizing the elements of their work? Is it done purely by eye and ‘feel’ or is there some other theory that they use?

    Thanks again

  21. It seems like many of the images that are supposed to be in the article are missing. Perhaps a casualty of the new design?

Comments are closed.