Twitter Flickr Tumblr Pinterest

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 1024x768 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 946x610. It might seem like an arbitrary size but it has a purpose. 946x610 gives you a nice size canvas that won't get cut off on a 1024x768 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 946x610 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        

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!