I like to think of myself as a pretty organized person – ok I admit I’m pretty much borderline OCD when it comes to having everything in its right place. So one thing that has always interested me is how best to structure and organize my design/web projects.
As a freelancer I’ve worked in-house for lots of different design agencies and I’m always curious to see how they keep all their projects organized and what naming conventions they use. I’ve seen lots of good examples and lots of bad. Hint: If your files always have names like “design_final_05a_FINAL.psd” you are probably doing something wrong.
I’ve gathered all the best practices I’ve seen and put them together in a ZIP file which I use as a starting point for all my projects. Feel free to download it and incorporate it into your workflow:
I’ll go ahead and explain all the parts to it below as well as give some neat tips and tricks for staying organized and sane.
The above is what “project_template.zip” should look like once you have unzipped it. Replace “Project Template” with the name of your project.
Here it is with all of the folders expanded. I’ll go over each item starting from the top.
This stores all project files that aren’t deliverables – it’s also common to see it named “Resources” or “Reference” but I like the name “Assets”.
- “_Old”: I go into more detail about this later on but basically this folder is where you store all the old and backup versions of your files. It starts with an underscore to always keep it at the top of the folder.
- “Design”: Keep all your design source files here, like PSDs, Illustrator files, etc. I’m including a 960 grid PSD I created which I use as a starting template for a lot of web design projects. Learn more about the 960 grid system here.
- “Notes.txt”: I like to keep all the project specs together in one central location. One tip I like to do is when I have a client email with important project information in it, I paste it into this text file. This keeps me from having to go back to my email and dig though everything every time I need to look stuff up about what the client said. Also keeps me from constantly checking my email which is a huge distraction and time waster.
- “Zip”: For most projects I’ll have a few ZIP files that the client sends over – after I unzip them I store all the original ZIPs here in case I need to revert back to them.
This is for all files that will be uploaded to the web server for the final project. It’s also common to have it named “bin”, “web” or “deliverables”. I prefer the name “deploy” since the name is more clear as to what exactly it’s for. Also notice how everything in here is named with all lowercase letters which is standard for all files deployed to the web.
- “css”: All CSS files go here.
- “img”: For all your images. It’s also common for it to be named “images” but I like the 3-letter version better since it is more consistent with the rest of these names.
- “inc”: All include files go here – mostly for doing dynamic/PHP websites.
- “index.html”: This is the root file for the project.
- “project_template.swf”: A sample SWF file that is embedded in “index.html”.
- “xml”: All XML files go here.
All project source files go here, which for me is typically FLA and ActionScript classes. I set the FLAs to publish to the “deploy” folder to keep everything separated and organized. I’m still amazed at how many developers I see who still keep everything in the same folder then have to move/rename things once they are ready to upload. If you keep your “deploy” and “src” folders separated you’ll never have to move or rename things again.
- “project_template.fla”: A sample FLA set to publish to the “deploy” folder.
Other organization tips & tricks
The above is typically how my “_Old” folder will look for storing backups of old versions of my files. Obviously if you are using a CVS respository for versioning then you probably won’t need this. But this is a simple way of keeping previous versions of files and having backups around in case you need to revert back to something.
For a PSD file named “home.psd” for example, the latest version will simply be called “home.psd” and will be stored in the “Design” folder. Periodically I’ll copy and paste versions into the “_Old” folder and name them “home_01.psd”, “home_02.psd”, etc. The most current version won’t have any numbers after it. It especially won’t have the word “final” in it since designs tend to never stay final for very long. I’ve seen some designers include the date in the filename like “design_10-7-2009.psd” so they know which one is the most current. That never made much sense to me since right in the folder it will usually show the date last modified. If you just keep one current version in the “Design” folder with a normal name that should be all you need to tell that it is the latest version.
To backup my “deploy” and “src” folders I simply create folders named “01″, “02″, etc and copy and paste the “deploy” and “src” folders together inside. See the above image for an example of what I mean.
Another thing I’ve learned is to store all my files in the default “Documents” folder on my computer. I used to have my “Personal” and “Work” folders kept directly on my desktop but I quickly realized that was a bad idea after accidentally dragging my entire “Work” folder to the trash when trying to delete some MP3s on my desktop. Luckily I caught it right after it happened but it could have been disastrous. Now I keep my actual folders in the “Documents” folder and create aliases (shortcuts on the PC) on my desktop to link to them. That way if they get deleted it’s no big deal since it’s just an alias.
This is how my “Work” folder is organized:
Business & Finance
For all tax info, contracts, agreements, paperwork, forms, etc.
All my projects organized by client.
Where I keep all my design resources like fonts, icons, photos, textures, patterns, backgrounds, Photoshop brushes, ActionScript libraries/frameworks, etc.
Also what I like to do for quick access to my current projects is create aliases on my desktop for all projects I am working on. This helps me see what is currently on my plate and I won’t forget about it since it is in plain sight on my desktop.
If you are wondering why my desktop background is plain boring grey it’s for a neutral background when working in Photoshop. On the PC Photoshop has a solid background when you are working in the program (or at least it used to – haven’t used Photoshop on the PC in ages) but on a Mac all the windows show through to the desktop. So if I’m working on a design or especially a color scheme, having a color desktop background will throw me off. I swear I’ll start subconsciously choosing colors that match and compliment my desktop colors without even realizing it. Neutral grey prevents this.
Anyway I hope people will find the above useful for staying organized. I realize my system won’t work for everyone but it seems to work really well for me and the types of projects I do. I’m always changing and optimizing my workflow so if anyone has any comments or suggestions for improvement please let me know in the comments!