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.

Get your web design files organized

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.

4 Responses to “Organize Your Web Design Projects”

  1. Websites Adelaide

    I agree with the writer. A person should know how to organize works or projects. like on this one, this article will help web designers on how they are going to manage their works. This will probably a big help to them. Great job!

  2. Chandan

    Hi I have a question if I want to keep yearly how much project and sales are done, how can I organize the folder?

    • David

      Hi Chandan,
      I’d just add another levels to the folder. So under 2014 you’d have Client A, Client B, etc. Then a 2013 folder, etc.

    • David

      I’ve been thinking about this question more, and figured I should outline what I do.

      In my client folder, I separate things into active and inactive clients. I keep all the active clients in the main directory, and move everyone I’m not working on into inactive. This helps clear out the mess, and let’s me properly focus on the work I’m actually doing right now, instead of the work I finished a year ago.

      As a general rule, I don’t like separating projects out by year because many of my projects span multiple years, so dividing them up just makes more work when it comes to finding my resources.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>