1. Search
Home Blog Services Portfolio About Contact
Project folder structure for a web
designer
January 26th, 2010 · 5:05 pm @ Dave Woods - 7 Comments
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.
Categories
CSS•
HTML•
Javascript•
SEO•
Web Design•
Latest Articles
Should Web Designers Drop
IE6 Support?
•
Google: Have they copied
Bing.com?
•
13 Google Chrome Extensions
for a Web Designer
•
IE9 Preview•
Perspectives on Cross-Cultural
Web Design
•
How to become a Freelance
Web Designer
•
Blank browser windows for
Photoshop mockups
•
Web Browser News•
Using em’s for font sizing•
Project folder structure for a
web designer
•
Facebook
Page 1 of 5Project folder structure for a web designer
8/17/2010http://www.dave-woods.co.uk/index.php/project-folder-structure-for-a-web-designer/

2. 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.
Share and Enjoy:
Related Links
Page 2 of 5Project folder structure for a web designer
8/17/2010http://www.dave-woods.co.uk/index.php/project-folder-structure-for-a-web-designer/

3. 7 Comments → “Project folder structure for a web designer”
Cheryl Oppenheim
6 months ago
1.
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.
Dave Woods
6 months ago
2.
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
Organize your workflow for design production – nina mehta
6 months ago
3.
[...] Other structures Developing a Sensible Folder Structure Folder Structure
and Project Organization Best Practices Project folder structure for a web
designer [...]
Ken Thompson
5 months ago
4.
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.
Page 3 of 5Project folder structure for a web designer
8/17/2010http://www.dave-woods.co.uk/index.php/project-folder-structure-for-a-web-designer/

4. Dave Woods
5 months ago
5.
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.
Will Hattingh
5 months ago
6.
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.
Dave Woods
5 months ago
7.
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.
Leave a Reply
Name *
Page 4 of 5Project folder structure for a web designer
8/17/2010http://www.dave-woods.co.uk/index.php/project-folder-structure-for-a-web-designer/

5. Mail *
Website
Add Comment
Welcome
Hi, I'm Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businesses
throughout the world.
I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that are
designed and delivered to the highest standard.
Latest Comments
Dave Woods on 100% Height Layout Using CSS•
darell on 100% Height Layout Using CSS•
Dave Woods on CSS Rounded Corners Tutorial•
sumant on CSS Rounded Corners Tutorial•
Popular Posts
Using em's for font sizing [...]•
HTML5 Tutorial - Getting S [...]•
Rounded Corners in Interne [...]•
Dave-Woods.co.uk Redesign [...]•
Should Web Designers Drop [...]•
Page 5 of 5Project folder structure for a web designer
8/17/2010http://www.dave-woods.co.uk/index.php/project-folder-structure-for-a-web-designer/