The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output.

Balance is key to file organization–it’s a means to an end. Besides SEO of a static web site or ease of future editing, most of the time your file organization isn’t going to impact the final product. I’ve seen both sides of the coin:

• Artistic Pilers: one folder file organization where that person has taken the visual metaphor of the desktop a little too far, “creating a well-named folder is not very creative”
• Obsessive Compulsive Filers: the overcompensation that there are too many files in a folder if you have to scroll or look for a file.

The source folder

My source folder has an abbreviated name of the project. All the subfolders within my source folder start with an underscore. This is because under OS-X folders are not sorted first (this is very annoying!).

• __jobNumber: (folder) Sometimes I receive job numbers for my projects after I began them. If you don’t have the job number before you begin work, then do not place the job number in the name of the main folder. This will invalidate all linked files within the folder. Naming a sub folder with the job number will still allow a search for that job number. Remember, do not change the name of the project folder!
• _copy: (folder) Place the Word Documents and the text files that you have created from them here. In general, you will want to create text documents before pasting copy into an HTML page to to rid yourself of the Word character encoding.
• _flash: (folder) Place Adobe Flash files here (SWFs and FLAs) and move the finalized SWFs to the “live folder.” If you have many external file dependencies, it may be more productive to work with the source files in the “live folder.”
• _flash_source: (folder) Place images and any files that your Flash files link to. If you keep all these linked files here, you can update them by overwriting the old files and clicking Update from within the Flash library.
• _fromSuper: (folder) Place original layout files (such as Adobe Illustrator and Photoshop) from your creative director here. There have been too many times in the past that I’ve overwritten the original and had to ask for it again from my supervisor. Another option could be a _fromClient folder.
• _layout: (folder) Place the edited layout files here, and take time to name these files correctly, so that you can refer to them later on.
• _old: (folder) Place any files you want to keep, but don’t want to clutter up the other folders here
• Notice to Future Designers: (file) If you want to tell future designers any important information, write a note here. Suggestions include your name and contact information and the path name to your working folder.

The live folder

When working with web sites, your “live folder” will need to be in your local servers document folder.

• images: (folder) Place your graphics here. I recommend naming them close to the DOM of their usage
• css: (folder) Place your IE hacks files, PNG fixes, and CSS files here
• js: (folder) Place your JavaScript files here
• index.html: (file) HTML template containing header information such as meta tags and structural markup such as frameworks/grids/wrappers

Current project folders

You are going to want to get to these folders as fast as you possibly can. If you work on a Macintosh, place your source folder and your live folder on the left side of the Finder window. If you work on a Windows computer, place place your source folder and your live folder on the Start Bar or the Places Bar. On my Windows XP machine my Start Bar looks similar to the OS-X dock, since I have so many folder shortcuts (large icons) on it.

In conclusion

I hope these ideas better prepare you for starting new projects and increase your productivity by not placing all your files in one folder–while also not having to create the same folders when you begin your project or while you are in the middle of working. If you have more suggestions to add to this file framework, please respond below.

You have the option to embed images into Adobe Illustrator or to link them. If you embed them, then your file will be large (a 500MB AI file is an everyday occurrence in my work). The other is to link to the image file, but if you hand the file off to another person, the linked images will not be stored with it. One option to is to have a central repository located on a network for images. All new images are placed there. This can sometimes be cumbersome not to have a copy of the image on your local machine–consider image manipulations and having to manage file versions centrally. This script solves the problem of collecting linked images for output. This script collects external image links into a single “Links” folder. You can then give that folder and the subsequent source file (AI) to another person and the external links will work.

Hopefully, you are not using Adobe Illustrator source files (AI) to pre-press print work, but if you are this will aid in collecting linked images for that purpose too.

Caveats

This script does not collect fonts or other files, only images. If your image is within an opacity mask this script will not be able to find it. Illustrator Package Script has been tested on Adobe Illustrator CS2 and Adobe Illustrator CS3 only.

I did not write this script. This script was written by Pavel Rassadin. You can download the original source for this Illustrator Package Script from his website.