Project Folder

Project Folder
A picture of a computer monitor displaying the project folders in Windows Explorer.

Upon archiving stuff in my old hard drive, I encountered my equally old (circa 2004) template of Project Folder. Over those years in designing websites, I’ve personally developed a system for organizing project files.

Project Folder v1.0

This particular Project Folder was structured as such:

  • Project Folder: renamed to the [Project Name]
    • Archive: screenshots, document files, research resources, miscellany
    • HTML: the front-end stuff like HTML, CSS, media assets
    • Source: the source files like Photoshop, Illustrator files
    • Templates: image mock-ups in JPEG, PNG

Fast forward to 2008 – I was at the Chikka office for a Senior UI Designer interview. One of the questions I was asked was how I organized my design and development files or if I did. I proudly discussed Project Folder v1.0 since I developed it myself.

Project Folder v2.0

When I joined the team at Chikka, I learned to use a similar system (which was used by developers) and from what I remember, it was patterned after repositories.

  • Project Folder: renamed to the [Project Name]
    • comps: contains wireframes, studies, mock-ups, design artifacts, and any file ready to be sent out for approval
    • docs: contains documents from product developers such as Business Rules, Use Cases, screenshots, pegs, font files
    • dev: contains HTML/CSS/JS files
      • branches: contains the temporary/experimental development files
      • trunk: contains the latest version of the development files
    • raw: contains the source files of artworks, graphics (PSD, AI, PNG)

This approach was way better and more appropriate in a web development setting so I also adapted it to my freelance work.

Shortly after, mobile became a “thing”. Suddenly, from a couple of platforms, Pandora’s box was wide open. Our team needed to adapt – first, in the file management level.

Project Folder v3.0

The significant change I made was simply an addition of another folder to categorize the platform type the project fell under. For example:

  • Project Folder
    • Android
      • comps
      • docs
      • dev
      • raw
    • iPhone
    • Web

For you designers and developers out there, do you have a similar approach? How does your file management system vary from project to project?


Leave a Reply

Your email address will not be published. Required fields are marked *