Dave Woods - Freelance Web Design Warwickshire

Project folder structure for a web designer

I’ve always been fairly well organised when it comes to projects but up until recently, I haven’t had a standardised way of structuring my folders which occasionally leads to hunting for that piece of documentation that’s hiding in a folder buried deep in a directory structure. I’m now using a method that is consistent across all my projects and thought I’d share it here in the hope that it helps other web designers to manage their documents and graphics.

Document Structure

First, here’s the structure and then I’ll explain what kind of document or graphics I place where:

  • Client Name
    • Project
      • 01 – Consultancy
      • 02 – Information Architecture
      • 03 – Content
      • 04 – Branding
        • Fonts
        • Guidelines
        • Logo
      • 05 – Design
        • Graphics
        • Stock Photography
      • 06 – Code
      • 07 – Marketing
        • Email
        • SEO
        • Social Media
      • 08 – Analytics
      • 09 – Hosting

And you can get a copy of this directory structure by downloading my folder structure zip file so feel free to use it if it applies to your projects.

Root Level

At the root level, I create a folder with the name of the client so that within that folder I can organise their work by project. This might not apply to all freelancers but I do work with some design agencies or companies who have a number of different websites so this helps to keep all their work in one place.

01 – Consultancy

This folder is to keep things organised at the beginning of a project and will contain documents like the Proposal and Contract. This may vary from project to project as simple PSD to HTML/CSS work is unlikely to need a proposal.

02 – Information Architecture

In most cases this simply includes a single document which contains the structure of the website, usually in an unordered list which would represent the site map.

03 – Content

If I’m going to be responsible for adding the content then this is where it all lives until it’s added to the website. Once the Information Architecture has been defined, I’d usually create a separate folder for each section of the site to keep things organised.

04 – Branding

This is where I like to keep all the files received by the client when discussing ideas about the look and feel of the site. So any fonts, branding guidelines or logo’s that the client currently has are dropped in here.

05 – Design

This is usually the folder that contains the initial bulk of the project work by myself. The graphic folder contained within here is where any creative work that I design live (including PSD layouts or wireframes).

06 – Code

The Code folder is usually where the final deliverable lives and is where all the HTML, CSS, JavaScript and PHP is organised and turned into a full working website.

07 – Marketing

Not applicable to all projects but occasionally there is a further requirement from a marketing perspective. This could be in the form of HTML email newsletters, SEO work or Social Media Marketing. The SEO folder that lives within here also contains an Analysis, Keyword Research and Link Building folder to keep other documents organised within the SEO process.

08 – Analytics

I’ve not actually used this as of yet but thought it would be handy for any landing page optimisation work and documentation and am sure that it’ll be of use on future projects that I’ve got lined up.

09 – Hosting

The hosting folder is purely for documentation and contains any information regarding the clients hosting details. For example, what domains they have, when they expire, what email addresses they have registered with these accounts, billing information etc.

Summary

I’m sure that as other pieces of work arrive, there will be things that I hadn’t thought of and I’ll need to adapt the structure a little but I think this provides a good starting point for a project.

I’d be interested to hear how other people organise their documents, images and code so please feel free to post any comments below.

16 comments on “Project folder structure for a web designer

  1. Cheryl Oppenheim

    This is very similar to a structure I’ve used for many years. The only difference is the addition of another layer. We start with a folder for the Client then inside that have separate folder for the Job (JobNumber/Project Title). Within that folder would be those folders you have above. This allows you to store all the jobs for that client within one folder.

    Folder structure is just but the first step – naming conventions and version control should follow. Ours… job number_File Name_Version.Extension 1234_BAsketballImage_v1.jpg or 1234_Wireframes_v2.vis

    Job Numbers are always a source of confusion for many firms. Our system is simple – consective running numbers. The number is assigned to the project and the client. So while a client may have non-consecutive number in their folder there is absolutely no duplication of numbers or concern over client name abbreviations in the numbers.

  2. Dave Woods Post author

    Hi Cheryl and thanks for the comment.

    I think what you’re describing is what I have above? I currently have Client and then Project, followed by the folders for documents and graphics.

    I definitely agree that the naming conventions are just as important, as I’m the only person dealing with the files though I tend to use a much simpler method by using the date on the front of the filename, e.g. yyyymmdd-proposal.docx. For work I’m sending the client, I usually do the same thing with zip files and then file them away (so should probably have included that within my folder structure as well).

    I also use SVN for version control so that does get around the issue of naming conventions and version control to some extent.

    Thanks for the feedback Cheryl and sharing your methods 🙂

  3. Pingback: Organize your workflow for design production – nina mehta

  4. Ken Thompson

    Great Post! Exactly what I was looking for. I’m a fan for life now. Quick question. How do you use SVN in relation to your folder hierarchy? Do you version control the entire project folder or just the code? It doesn’t seem that you keep the repositories with the project. Thanks.

  5. Dave Woods Post author

    I’d use SVN just on the Code folder personally but don’t think there’s any reason why you couldn’t use it on everything if you wanted. I use the date as a prefix to all my documentation and then have this run as an automatic backup so that works fine as version control for me but SVN would also be a good solution.

  6. Will Hattingh

    I love the folder structure that you use and mine is almost 100% the same, I keep a zip file within my template zip file called template project which is used to quickly add a new project for a client. For instance if I’m adding a new CMS as a different project for the client I can just quickly unzip my project zip file that contains the folder structure that you currently have.

    One addition to this is I keep an additional folder to that of the projects called _MAIL at the top level of the client which contains the outlook data files as I communicate with the client. I also keep multiple profiles in outlook for each client, that is if the client requires me to have an email box. For smaller projects this would probably never be required, however I do consulting for some clients where we act as a go between the client and the clients vendors, so essentially we act as employees and as such we have to have employee email. Which makes the _MAIL folder incredibly useful, especially since if a year after we are done with the project and I need access to an old email that was sent then I can just open the datafile directly in outlook even though I may have deleted that outlook profile already.

    So to sum it all up here is my project structure
    |>Client Name
    |-> _Mail
    |-> _Template Project.zip
    |-> Project 1 – JobNumber
    |–> Project folder structure similar to yours.
    |-> Project 2 – JobNumber
    |–> Project folder structure similar to yours.

    I develop and work through multiple workstations & laptops so I stick the entire client folder within subversion, that way everything stays in sync.

    If I develop directly on my laptop it makes it easy to point apache’s DocumentRoot directly at the Code folder, that way if I update from my svn repo I automagically get the latest code and can view and display it to customer if need be.

  7. Dave Woods Post author

    Hi Will, thanks for your detailed response. Getting my email organised it probably one of the next things on my list of things to do as at the moment I just export my accounts to one PST file so should probably get that a bit more orgasnised for finding old emails. Thanks for the tip.

  8. Ajith

    Thanks Dave, For a newbie like me who is struggling to manage data behind the scenes of a website and make a start, its a short and simple framework which I’ve been looking for.

    Saved a lot of reading 🙂

    Cheers,
    Ajith

  9. Rob

    Dave, thanks for sharing your working folder. I’m in the process of setting up a generic folder structure like yours. But, I was wondering how you go about separating your research ie: Personas, Usability reports, Competitive Analysis, Flow charts and wireframes.

  10. Dave Woods Post author

    Hi Rob, I’d probably drop those in a subfolder in a combination of consultancy and design. If it’s purely documentation then I’d drop it all into consultancy as that’s more of a deliverable prior to the project starting whereas something like wireframes or flow charts might be more suited to the design section.

    In any case, these are merely top level folders that I use and then I use subfolders where appropriate.

  11. Matthew Blest

    The only one I would add to this is Billing or Invoices, i can keep stuff in a finance program (or in e-mail..) but it’s good to have a copy of an invoice attached to the project I’m working on.