Organize Your Web Design Projects

If you want to complete projects with any degree of efficiency, you need to get organized. Create a system, use it, and back up frequently. I recently re-organized my client files (or started to anyway; these things take time) so that they all have the same file structure. Now I’m wondering why I put this project off for as long as I did.

Benefits of Organizing Your Web Design Projects

Having a system to keep your web designs in order will help you and your clients.

• You can find things quickly and easily
• Builds trust with your clients; they might even look to you when they misplace items
• With regular and redundant backups, you’ll never lose any work
• Reusable frameworks allow you to get to work faster without reinventing the wheel for every project

File Structure

For my system, I’m using five folder, each preceded with a number so they are sorted correctly in the folder. Several of these folders have sub-folders. For the sake of simplicity, the folder names are bolded, and my notes are in plain text.

• Client/Project Folder – e.g. Ted’s Drywall Website
• 1 – Documents – This houses any documents related to the client
• Proposals – Copies of any proposals sent to the client, and all versions thereof.
• Contracts – Copies of all contracts sent to the client; I typically have an unsigned Word and PDF version, then a scanned PDF of the signed contract
• Invoices – Invoiced saved as Excel files and PDFs sent to the client
• Other – Anything that doesn’t fit elsewhere, such as email correspondence I want a copy of
• 2 – Inspiration – I put anything I use for inspiration here, such as color pallets, screenshots, and photos
• 3 – Materials – This is any material provided by the client or created by me for the project
• Content – Textual content for the site, and any supplemental materials like magazine articles
• Imagery – Photos, logos, icons, etc
• Other – Anything else, like Flash animations, audio and video files, lists of links, etc
• 4 – Design – Anything creative built during the design phase
• Wireframes – Wireframes of different modules of the project (e.g. home page, contact form)
• Mockups – Mockup of different modules of the project (e.g. home page, contact form)
• Other – Photoshop files for project imagery
• 5 – Development – This is where the actual website is stored; while this will vary project to project, it will mirror what’s on the webserver and generally follows the same basic structure
• Images – All images for the site
• Scripts – All external Javascript files
• Stylesheets – All CSS files
• Common – Common site elements like headers, sidebars, etc. that are included at the server level

So that’s my system right now. I’ll probably adapt it over time as my needs change, but for now it’s working quite well. I’ve already used it to dig out old files a few times, and I’m sure the utility will only grow as time passes.