Grid Based Design for Flash Templates
Using grids for jumpstarting your template layouts has become quite popular among the HTML/CSS crowd. Some people swear by it, some vehemently oppose it, while others tend to just build their own structure from scratch while staying true to the rules of a grid.
What is a grid based design?
A grid is basically the structure of a page layout that serves as a framework that can be built upon. Hence, grid based design is the art of organizing and aligning your content on that framework. Interpretations might differ from people, so you are free to come up with your own. But at the core, the idea remains the same which is to use a set layout for achieving coherency in alignment and function.
What are the benefits?
Even though the adoption of grid based design has been slow on the web most agree that it leads to content being more easily understood. It might take a few more years before grid based design becomes as commonplace as it is in print media.
Where can I get started?
The easiest way is of course to get busy Googling it, luckily I did it for you already. So here’s a quick list of resources you can use for designing your next Flash based template using a grid.
Articles on grid based design:
- Designing With Grid-Based Approach from Smashing Magazine
- Grid based design 101 from Most Inspired
- Five simple steps to designing grid systems from Mark Boulton
- Outside the grid from A list Apart
Example of grid based design
- 30 blogs with grid based design from CSS Juice
- 32 column based designs from Web Designer Wall
- Grid based designs from down under from Tutorial Blog
- Design by grid from Design by Grid
Resources on grids
- The grid system
- Grid based resources from Vandelay Design Blog
- The grid layout on Wikipedia
- Six creative grid techniques from Smashing Magazine
Grid frameworks
- 960.gs
- Fluid 960
- Designing Interactive grid
- 224 grid layouts {this might make your head hurt a little}
- Yahoo grids
- Blueprint CSS
- Grid generator
OK, that should keep most of you satisfied for some time.
Grids in Flash templates
You can easily employ grid based design in Flash by going over the resources above and using either of the frameworks as a starting point or building one of your own. Naturally you would have to port it into Flash.
With the current lot of templates in FlashDen I see a lot of space for files with this direction. You can come up with some pretty creative templates by using a grid based layout.
While Flash has assisted in breaking quite a few norms, and is a great medium to experiment new ways of doing things on the web, it is still not widely accepted for regular web development. Most developers still tend to stick with HTML/CSS/JS. One of the main reasons also has to do with the fact that those development tools are platform independent.
Grid layouts are definitely not akin to the Holy Grail of web design but it steers you in the right direction of perhaps using Flash to do something that most have not used it do, so far.
Remember, it’s OK if your Flash SWF makes the browser scroll a bit 
7
Comments
Thanks for the post, I appreciate it!
“Remember, it’s OK if your Flash SWF makes the browser scroll a bit”
I personally think thats a fail if a Flash site starts using the Browser scrollbars the only exception being if the page has been resized and is now too small…
Otherwise scroll in Flash if you have to, much nicer and stops the grosse OS scrollbars ruining your life
personally i agree with MSFX but then you never know what valid reason someone might come up with for creating a longer than the browser flash site.
.. my two cents. if it does go longer than the window, please, please don’t use textFields with scrollbars in the design… one scrollbar per interface outta be a rule
i think
please bring them on …. Im ready.. Tomez has a new as3 template that I think does some great grid work
MSFX +1
Thank God someone on this site is BEGINNING to bring up the issue of — gasp — solid, professional, grid-based design. It is extremely rare to find excellent designers who understand basic, minimalist, sleek design, but also know how to code well in Flash. By and large (I am sorry to say) the Flash site designs up on the Flash Templates section are, to be kind, a tad sub-optimal.
H
@Howard C
I can’t agree with you 100% as I do find that a lot of templates files are very well thought out. That being said, I also believe that there is a lot of room for improvement.
One can only write about it so much, it’s up to the designers and developers off this community to take the next steps.
@MSFX above
I can’t agree with you on that point. Scrollbars are as synonymous with the Internet as the “Back” button is to a web browser. Most people will choose to scroll rather than click.