Twitter Flickr Tumblr Pinterest Dribbble

Designing Grid Systems For Flash

I love grids. I’ve been design­ing with grids for some time now and I’m not sure what I would do with­out a well designed grid sys­tem. I’ve read how peo­ple accuse grids of “lim­it­ing” the design, but I dis­agree with that. Those peo­ple don’t under­stand grids or how they should be used. A grid should not drive a design, the oppo­site is actu­ally true. A grid sys­tem should be cre­ated based on the over­all objec­tives of the design. I’ve heard peo­ple say that grids force a design to be “too struc­tured” and not organic enough. If used cor­rectly, a well designed grid sys­tem can be as “organic” as you want it to be. You can use cir­cles in your entire design and the grid would still work. It’s extremely flex­i­ble. Grids give pur­pose to the posi­tion­ing of the con­tent on the page. There is a rea­son why that copy block is 10 pix­els below the image. It all has purpose.

I’ve decided that I’m going to write a lit­tle some­thing up for those peo­ple inter­ested in grids. I’m going to walk you through the process of cre­at­ing a grid for a Flash based site that will work for screen res­o­lu­tions of 1024x768 and up. The beauty of cre­at­ing a grid for Flash is that you can cre­ate a fixed grid and don’t have to be con­cerned with the user chang­ing type sizes and screw­ing up the entire grid of the site. The only time you have to be con­cerned with a fixed grid is if you build a Flash site where the con­tents of the site repo­si­tions based on the size of the browser win­dow, in which case you would have to fig­ure out a fluid grid which is some­thing I haven’t done yet but plan to do in the future.

Can­vas Dimen­sions
The first step in the process is to fig­ure out which screen res­o­lu­tion you want to design your site for, which in turn will help you decide on the dimen­sions of the grid. The stan­dard dimen­sions I used is 946x610. It might seem like an arbi­trary size but it has a pur­pose. 946x610 gives you a nice size can­vas that won’t get cut off on a 1024x768 screen and it divides up well, both ver­ti­cally and hor­i­zon­tally, into thirds and forths. On a side note, I really wish peo­ple would use higher screen res­o­lu­tions cause design­ing for such a small screen is get­ting old. It’s like hav­ing to design with web safe col­ors. Let’s go folks! Crank those screens up!

The Grid
Ok let’s start mak­ing this grid. Now that I have a 946x610 can­vas I can start divid­ing it up into columns and rows. I first start with the columns and divide the space hor­i­zon­tally using the rule of thirds, which is based around The Golden Sec­tion. When you divide the can­vas into thirds with a 10 pixel bor­der all around and 10 pixel gut­ters, 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 pix­els wide.

steps

Then I divide these 6 columns in half using a lighter col­ored 10 pixel gut­ter which cre­ates 12 columns that are 68 pix­els wide. At this point I have a grid that can be divided hor­i­zon­tally into thirds and fourths which gives me a great deal of flex­i­bil­ity. Also, the width of 3 columns (224px) is ideal for copy blocks. Based on typog­ra­phy stan­dards, you want to have about 8 – 10 words in a line for opti­mal leg­i­bil­ity which this width allows at cer­tain type sizes.

steps

Thirds
steps

Forths
steps

From here I divide the grid ver­ti­cally into 12 rows that are 40 pix­els in height which also can be divided into thirds and fourths. Khoi Vinh has men­tioned on his site that he doesn’t divide the can­vas ver­ti­cally but since this is for Flash and the can­vas is fixed, I think divid­ing ver­ti­cally is impor­tant because not only do I have a hor­i­zon­tal struc­ture but now I also have a ver­ti­cal one as well. So now I have a flex­i­ble grid that gives me a lot of options both ver­ti­cally and horizontally.

steps

Base­lines
The final step I take in mak­ing my grid is a some­thing most peo­ple don’t do, which is adding base­lines for type. I learned this from my Swedish pals Jens Karls­son and James Wide­gren while work­ing at The Big Space­ship. The rea­son why I use base­lines is to give myself some sort of struc­ture for the copy on the page. The base­lines are 1 pixel and are spaced out 10 pix­els apart from each other which includes the base­line itself. So if you mea­sure from the bot­tom of one base­line to the bot­tom of the next base­line you’ll get a spac­ing of 10 pix­els, which works with the over­all gut­ter siz­ing of the grid. When lay­ing out the copy, I lineup the bot­tom of the text right on the base­line and not above it.

100% crop
steps

The base­lines give me some guid­ance with lead­ing, as long as the lead­ing size is based on the mul­ti­ples of 5. So if I set my lead­ing to 10 points, each line will fall on a base­line. If I set my lead­ing to 15 points, every other line will fall on a base­line. You can see an exam­ple in the image below. Base­lines allow all the text on the entire page to work together, giv­ing you an under­lin­ing copy structure.

10 point lead­ing
steps

15 point lead­ing
steps

Con­clu­sion
I now have a com­plete grid sys­tem that is extremely flex­i­ble. Click here to see a full size ver­sion of the final grid. Once I have my grid all set I can start lay­ing out my design. Here is a quick design I cre­ated using the grid:

Design with grid over­lay
Design only

Well that’s it. I hope this lit­tle tuto­r­ial was help­ful. Grid sys­tems are very easy to make, if you first think it out, and are an impor­tant 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 lay­erd PSD file to explore and mess around with. Feel free to leave comments.

Cre­at­ing a key­board short­cut with Pho­to­shop Actions
One thing I like to do to speed up pro­duc­tiv­ity is to cre­ate key­board short­cuts using Actions to hide/show the Grid layer instead of hav­ing to go to the lay­ers palette each time. I’m a short­cut freak so this works well for me. You need to cre­ate two sep­a­rate Actions, each with it’s own key com­mand. The first Action you need to cre­ate is the one that turns the Grid layer on. I set the func­tion key for the first Action to COMMAND + F12 but you can set it to what­ever works for you. The sec­ond Actions turns the Grid Layer off and I set the func­tion key to COMMAND + SHIFT + F12. I try to keep it as close as pos­si­ble to the first action short­cut so I can eas­ily switch between the two. Now when you press Com­mand + F12, the action will show the Grid layer and when you press COMMAND + SHIFT + F12 the action will hide it. You can down­load the Action file and load it into Pho­to­shop. Enjoy.

Ref­er­ences
Here are some great arti­cles and books about cre­at­ing and using grid systems.

Five Sim­ple Steps To Design­ing Grid Systems

The Golden Section

Why Use A Grid?

The Fun­ni­est Grid You Ever Saw

Grid Com­put­ing… and Design

Set­ting Type on the Web to a Base­line Grid

Grid Sys­tems in Graphic Design — by Josef Muller-Brockmann

Mak­ing and Break­ing the Grid — by Tim­o­thy Samara

Grid Sys­tems: Prin­ci­ples of Orga­niz­ing Type — Kim­berly Elam        

22 Comments on "Designing Grid Systems For Flash"

  • eben says

    nice tuto­r­ial. looks like a new tony c site is in the works, along with a new url?

  • Antonio says

    Awe­some man, thanks for the link.

  • Fausty says

    Lov­ing the blog friend. B asked if you’d seen this, so I’m linkin it up: http://​www​.sub​trac​tion​.com/​a​r​c​h​i​v​e​s​/​2​0​0​7​/​0​4​0​2​_​l​a​y​e​r​s​_​c​a​k​e​.​php

    Going out to see http://​www​.strait​jack​ets​.com/ wish you and Kim could come hang :(
    I’ll be in NYC May 24-29th so pen­cil me in, brotha!!!

  • More grid resources!! Thanks very much.. :)

  • Rossa says

    Wow, Really help­ful tuto­r­ial. I’m design­ing a flash site for a col­lege project and I will be sure to link it here when I’m fin­ished, Cheers Mate

  • Rossa says

    Dum­b­ass ques­tion though. Do you make the grid in Pho­to­shop and import it into Flash or do you cre­ate it in flash? Please don’t hurt me :)

  • Antonio says

    Rossa, I cre­ated the grid in Pho­to­shop. Just save it as a JPG and import it into Flash and set it as a back­ground layer.

  • Rossa says

    Cool, Thank you

  • chris says

    hi

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

  • Steve says

    Anto­nio,
    thanks for the link.

    I set-up grids of sim­i­lar nature.

    But, just because I can’t sleep at night if type doesn’t sit nicely on the base­line: if I were using your rule of divis­i­ble by 5, i’d per­son­ally set the base­line to 2.5. Which tends to give more flex­i­bil­ity in the lead­ing (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 car­riage returns between para­graphs, in mul­ti­ple columns.
    I tend to pre­fer to over­all text den­sity with half space returns, but then it throws out the base­line completely.

    Any sug­ges­tions to resolve this other than hav­ing the iden­ti­cal num­ber of para­graphs, or indents?

    Thanks,

    Steve

  • Antonio says

    Steve I’m not sure I fol­low. With a full return, it should keep every­thing on the base­line since the space cre­ated by the return is the same as the space with a line o text.

  • Steve says

    that’s cor­rect, but visu­ally i some­times pre­fer
    the return to be half the space of the leading.

    A return that is the same as the lead­ing often cre­ates too much space between paragraphs.

    if you follow…

  • Antonio says

    Ah I see. Well that’s a tough one. I’m not sure you can have every­thing fall on a base­line when you reduce the space. Per­son­ally I like the space cre­ated, it makes it eas­ier to read. When the para­graphs get too close it starts to run into each other.

  • Steve says

    I sup­pose it depends on the spe­cific design.
    Maybe I should change my pref­er­ence.
    Or find another solution.

  • I’m a grid sys­tem fanatic myself and find­ing your actions based pho­to­shop file made my life a lit­tle bet­ter (and easier)

    thanx!

  • Antonio says

    Michiel glad I could help make your life eas­ier. Enjoy.

  • john says

    I thought 960 was the opti­mal with for 1024x768?

  • Dan says

    Thanks for this, I found it helpful.

    I’ve always been into design but am only just learn­ing about the the­ory — I have appar­ently been run­ning for a few years before learn­ing to walk, so to speak, and I was won­der­ing what books you would rec­om­mend on the sub­ject of grids?

    Also, I am aware that a lot of design­ers don’t use grid sys­tems for the rea­sons you state at the start of the arti­cle. How do these design­ers go about orga­niz­ing the ele­ments of their work? Is it done purely by eye and ‘feel’ or is there some other the­ory that they use?

    Thanks again

  • sooran says

    Very Good !
    Tanks …

    This post very Helped me

  • Chris says

    It seems like many of the images that are sup­posed to be in the arti­cle are miss­ing. Per­haps a casu­alty of the new design?

  • laero says

    thank you for this post!