Folder Structure and Project Organization Best Practices

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:

» Download project_template.zip

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.

Project template

The above is what “project_template.zip” should look like once you have unzipped it. Replace “Project Template” with the name of your project.

Project template expanded

Here it is with all of the folders expanded. I’ll go over each item starting from the top.

“Assets”
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.

“deploy”
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.
  • “js”: All JavaScript files go here. The “swfobject.js” file here is the industry standard for inserting Flash into HTML pages.
  • “project_template.swf”: A sample SWF file that is embedded in “index.html”.
  • “xml”: All XML files go here.

“src”
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

Old

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.

Documents

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.

Projects
All my projects organized by client.

Resources
Where I keep all my design resources like fonts, icons, photos, textures, patterns, backgrounds, Photoshop brushes, ActionScript libraries/frameworks, etc.

Desktop

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!

Related posts:

  1. Introducing Type & Grids and My Thoughts on the Future of Flash, HTML5 and Responsive Design
  2. 7 Tips to Make Your Flash Site iPhone and iPad Friendly

19 Responses to “Folder Structure and Project Organization Best Practices”


  1. 1 emily

    cool post! we use a similar folder system for projects at the agency where i work. getting all the designers to actually follow it and stay organized is another story… :)

  2. 2 twe4ked

    Thanks! I love seeing how other people organise their folders, you have a fairly similar system to me :) You have made me want to clean my desktop though, thanks!

  3. 3 john

    Very nice, and spooky as I use a very similar structure. Only difference is that I only allow /src to contain code, and create a /lib folder for the .fla, bitmaps, audio, etc. /assets is for all other orignals and client comps….

    I also avoid capitals in folders/files, but that’s a personal preference.

  4. 4 Jay

    @John

    Yeah I’ve seen others use a “lib” folder – I might consider doing that. For folders/files that will end up on the web (and my src and deploy folders since it seems to be the standard) I always use all lowercase but for other folders I like to use a starting capital just cos I think it looks nicer and matches the default system folders. :)

  5. 5 Keith

    ha, good stuff. you’re def OCD like me – i have a very similar set-up with a few naming variations. you do a few things differently that i really like though and i have the feeling they will work their way into future projects. also, i find it amusing that there’s no ‘swf’ folder.

  6. 6 Jay

    @Keith

    It’s funny I used to use a “swf” folder but I ended up getting rid of it. I really should use one since I do mostly Flash work. :) I ran into lots of problems though passing off files to clients and not having the SWFs in the root directory would mess them up sometimes. It still makes sense to use it for some projects but for most of the work I do having a separate folder just ends making things more complicated for the person I pass it off to.

    -Jay

  7. 7 stanley Wood

    Brilliant.

    Was just working out this same thing when I thought I’d see if someone else had been stressing out the same problem.

    Thanks a lot for this;)

  8. 8 mk2

    Well, nice to know that I’m not the only one who’s obsessive compulsive. :D

  9. 9 Haakon

    It just strikes me as beeing a laboury-way of organizing, having to “save out files” (and then resaving the file back to original name (save as: file_01.ext, and to continue working and saving having to save as: file.ext again…) and also having to
    copy out folders (create and copy files and folders…)
    also I’m missing file sorting to a bigger extent than Design and Deploy.. what about if sorting photoshop files from text documents etc..?
    I’m working on projects that easily count over 1000 files (not system generated) and
    i’m just not sure if this organization will solve the sturcture issue for our projects…
    however it pleases me to see different ways of tackling this issue!

  10. 10 Jay

    @Haakon

    Sorry if that was confusing – by “save out” I simply meant duplicate (or copy and paste). In this system you never do “Save as…”. You just work with the original file the entire time and then copy and paste whenever you want to make backups. Copy and pasting literally takes 2 seconds so it’s not very labor intensive. :)

    If you have a project that will have lots of text files then by all means create a “Text” folder in your “Assets” folder. Every project is different and will have different folder requirements.

    -Jay

  11. 11 Damir

    Awesome post! Helped cure many headaches later on…

  12. 12 Greg - Antifreeze Design

    Thanks for the OCD. Some good ideas there. I also don’t have a real need for CVS yet, so I’ve created a (mac only) Automator app that I keep right inside my top folder. It takes the name of the folder (“SRC” in this case) and adds the date_time to the front, so all I have to do is click it, and it makes an alphabetized back-up right there. Slick and easy.

    e.g.:
    20100104_48391_SRC
    20100107_34502_SRC
    bak_StormFlash/SRC.app

  13. 13 Eddie Zhang

    Great post! It’s pretty good solution for managing my files.

  14. 14 oddant

    cool organization, however as a personal note I prefer offsetting the include directory one folder up in the website hierarchy, sounds more secure.

  15. 15 async3

    Good post, you really are in the line of GTD. If u dont know it already, Im sure u will love it.

  16. 16 Richard

    Have you update this wonderful post sense 2009? What does your website “File Folder Structure” look like today for website design and updating a website that was designed 6 months ago?

  1. 1 Folder Structure and Project Organization Best Practices | Warm … | PhotoShopped
  2. 2 Tweets that mention Folder Structure and Project Organization Best Practices | Warm Forest Flash Blog -- Topsy.com
  3. 3 Organize your workflow for design production – nina mehta

Leave a Reply