Project folder-structure-


Published on

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Project folder-structure-

  1. 1. SearchHome Blog Services Portfolio About ContactProject folder structure for a webdesignerJanuary 26th, 2010 · 5:05 pm @ Dave Woods - 7 CommentsI’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 leadsto hunting for that piece of documentation that’s hiding in a folder buried deep in adirectory structure. I’m now using a method that is consistent across all my projectsand thought I’d share it here in the hope that it helps other web designers to managetheir documents and graphics.Document StructureFirst, here’s the structure and then I’ll explain what kind of document or graphics Iplace 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 structurezip file so feel free to use it if it applies to your projects.Root LevelAt the root level, I create a folder with the name of the client so that within that folderI can organise their work by project. This might not apply to all freelancers but I dowork with some design agencies or companies who have a number of differentwebsites so this helps to keep all their work in one place.01 – ConsultancyThis folder is to keep things organised at the beginning of a project and will containdocuments like the Proposal and Contract. This may vary from project to project assimple PSD to HTML/CSS work is unlikely to need a proposal.CategoriesCSS•HTML•Javascript•SEO•Web Design•Latest ArticlesShould Web Designers DropIE6 Support?•Google: Have they•13 Google Chrome Extensionsfor a Web Designer•IE9 Preview•Perspectives on Cross-CulturalWeb Design•How to become a FreelanceWeb Designer•Blank browser windows forPhotoshop mockups•Web Browser News•Using em’s for font sizing•Project folder structure for aweb designer•FacebookPage 1 of 5Project folder structure for a web designer8/17/2010
  2. 2. 02 – Information ArchitectureIn most cases this simply includes a single document which contains the structure ofthe website, usually in an unordered list which would represent the site map.03 – ContentIf I’m going to be responsible for adding the content then this is where it all lives untilit’s added to the website. Once the Information Architecture has been defined, I’dusually create a separate folder for each section of the site to keep things organised.04 – BrandingThis is where I like to keep all the files received by the client when discussing ideasabout the look and feel of the site. So any fonts, branding guidelines or logo’s thatthe client currently has are dropped in here.05 – DesignThis 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 – CodeThe Code folder is usually where the final deliverable lives and is where all theHTML, CSS, JavaScript and PHP is organised and turned into a full workingwebsite.07 – MarketingNot applicable to all projects but occasionally there is a further requirement from amarketing perspective. This could be in the form of HTML email newsletters, SEOwork or Social Media Marketing. The SEO folder that lives within here also containsan Analysis, Keyword Research and Link Building folder to keep other documentsorganised within the SEO process.08 – AnalyticsI’ve not actually used this as of yet but thought it would be handy for any landingpage optimisation work and documentation and am sure that it’ll be of use on futureprojects that I’ve got lined up.09 – HostingThe hosting folder is purely for documentation and contains any informationregarding the clients hosting details. For example, what domains they have, whenthey expire, what email addresses they have registered with these accounts, billinginformation etc.SummaryI’m sure that as other pieces of work arrive, there will be things that I hadn’t thoughtof and I’ll need to adapt the structure a little but I think this provides a good startingpoint for a project.I’d be interested to hear how other people organise their documents, images andcode so please feel free to post any comments below.Share and Enjoy:Related LinksPage 2 of 5Project folder structure for a web designer8/17/2010
  3. 3. 7 Comments → “Project folder structure for a web designer”Cheryl Oppenheim6 months ago1.This is very similar to a structure I’ve used for many years. The only differenceis the addition of another layer. We start with a folder for the Client then insidethat have separate folder for the Job (JobNumber/Project Title). Within thatfolder would be those folders you have above. This allows you to store all thejobs for that client within one folder.Folder structure is just but the first step – naming conventions and versioncontrol should follow. Ours… job number_File Name_Version.Extension1234_BAsketballImage_v1.jpg or 1234_Wireframes_v2.visJob Numbers are always a source of confusion for many firms. Our system issimple – consective running numbers. The number is assigned to the projectand the client. So while a client may have non-consecutive number in theirfolder there is absolutely no duplication of numbers or concern over clientname abbreviations in the numbers.Dave Woods6 months ago2.Hi Cheryl and thanks for the comment.I think what you’re describing is what I have above? I currently have Client andthen Project, followed by the folders for documents and graphics.I definitely agree that the naming conventions are just as important, as I’m theonly person dealing with the files though I tend to use a much simpler methodby 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 andthen file them away (so should probably have included that within my folderstructure as well).I also use SVN for version control so that does get around the issue of namingconventions and version control to some extent.Thanks for the feedback Cheryl and sharing your methodsOrganize your workflow for design production – nina mehta6 months ago3.[...] Other structures Developing a Sensible Folder Structure Folder Structureand Project Organization Best Practices Project folder structure for a webdesigner [...]Ken Thompson5 months ago4.Great Post! Exactly what I was looking for. I’m a fan for life now. Quickquestion. How do you use SVN in relation to your folder hierarchy? Do youversion control the entire project folder or just the code? It doesn’t seem thatyou keep the repositories with the project. Thanks.Page 3 of 5Project folder structure for a web designer8/17/2010
  4. 4. Dave Woods5 months ago5.I’d use SVN just on the Code folder personally but don’t think there’s anyreason why you couldn’t use it on everything if you wanted. I use the date as aprefix to all my documentation and then have this run as an automatic backupso that works fine as version control for me but SVN would also be a goodsolution.Will Hattingh5 months ago6.I love the folder structure that you use and mine is almost 100% the same, Ikeep a zip file within my template zip file called template project which is usedto quickly add a new project for a client. For instance if I’m adding a new CMSas a different project for the client I can just quickly unzip my project zip filethat 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 Icommunicate with the client. I also keep multiple profiles in outlook for eachclient, that is if the client requires me to have an email box. For smallerprojects this would probably never be required, however I do consulting forsome 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 employeeemail. Which makes the _MAIL folder incredibly useful, especially since if ayear after we are done with the project and I need access to an old email thatwas sent then I can just open the datafile directly in outlook even though I mayhave deleted that outlook profile already.So to sum it all up here is my project structure|>Client Name|-> _Mail|-> _Template|-> 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 entireclient folder within subversion, that way everything stays in sync.If I develop directly on my laptop it makes it easy to point apache’sDocumentRoot directly at the Code folder, that way if I update from my svnrepo I automagically get the latest code and can view and display it tocustomer if need be.Dave Woods5 months ago7.Hi Will, thanks for your detailed response. Getting my email organised itprobably one of the next things on my list of things to do as at the moment Ijust export my accounts to one PST file so should probably get that a bit moreorgasnised for finding old emails. Thanks for the tip.Leave a ReplyName *Page 4 of 5Project folder structure for a web designer8/17/2010
  5. 5. Mail *WebsiteAdd CommentWelcomeHi, Im Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businessesthroughout the world.I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that aredesigned and delivered to the highest standard.Latest CommentsDave 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 PostsUsing ems for font sizing [...]•HTML5 Tutorial - Getting S [...]•Rounded Corners in Interne [...]• Redesign [...]•Should Web Designers Drop [...]•Page 5 of 5Project folder structure for a web designer8/17/2010