Skip to main content

Organising files and folders for web design projects

Looking for that fantastic design file from 2 years ago but you have no idea where it could be stored? Juggling multiple projects and want to feel more in control and organised?

A systemic approach for organising files and folders speeds up your workflow. It prevents errors, like using an outdated design file or old client content. There is consistency and makes finding what you need simple and predictable.

Why I use a systemic approach?

Predictable filing
I’m not expecting every single project to contain the same folders and files. A systemic approach keeps things clear, and I stay sane.

Easy to find
I wanted a system that fits with how I search for files.
The client > the project > a specific sprint/phase > a file.

Fits into my workflow
I use Dropbox on Mac and iOS, working from any device. Dropbox File Requests get files from clients. Dropbox Share and Transfer send client files.

Reusable
I have a standard project folder template that I duplicate for each new project. There are different templates for web and branding projects.

Having empty folders means there is a place ready when it comes to saving files. It makes me more likely to put things in the right place.

Folder numbers

  • Within an active project, I use numbers to allow sorting in chronological order or by priority.
  • Numbers follow the order of completion. Standard naming applies when no set order is needed.
  • Using the year and month in folder names is not clear because projects get delayed, but the sprint is always clear.
  • Numbers change if the project has different requirements. Site updates may not need the code or training folders.

Master and Exports folders

Work requires editing , then sending to the client.

The Masters folder houses internal files (Illustrator, Pages, Word, Keynote) like contracts, designs templates, training docs and presentations.

The Exports folder is where client-ready versions of files go.

Example:
I edit contracts in Apple Pages. That file stays in 00 Admin/01 Masters/Contract.pages. I export a PDF to 00Admin/02 Exports/Contract.pdf

Combining folder numbers with Masters and Exports works for any folder type. I use it for folders outside client projects. Each project proposal has 01 Incoming, 02 Masters and 03 Exports folders.

1. Current Projects

Folders are broken down as:

  • Client
    • Sub brands or project type
      • Project name project number

Example with sub-brand: HD/Designable/website-123

Example with project type: HD/Web/website-redesign-123

The sub-brand or project type helps when there are multiple projects for the same client. I may have a project where we are doing a website, logo and print design work. When this happens, I’ll use three project type folders.

  • Client-name/Web/projectName-projectNumber
  • Client-name/Brand/projectName-projectNumber
  • Client-name/Print/projectName-projectNumber

2. Client Archive

On completion, projects move to the Client Archive folder. Dropbox online only avoids taking up storage on devices but allows file browsing.

Projects get filed:
A-Z > client name > sub brand or type of work > year of completion > Project name.

Within the client name folder, there is 00 Assets. This is for brand assets like logos, fonts or anything that is client-specific. Assets makes it easy to find a logo or font for the next project with that client.

3. Active Project

Project number

Every quote sent has an individual number. Once a quote is accepted, this becomes the project number. The project number is used for contract, schedule and added to the end of the project folder name.
projectName-projectNumber

The number is added at the end to allow sorting projects by A-Z. The project number is not that important, but it is good to have as a reference in case we need to search for contracts, quotes.

00 Admin

This is business-related and includes quotes, account setup form, contracts, invoices.

Within this folder, I have 01 Masters and 02 Exports.

Any files hosted elsewhere (like our accounting system) get downloaded to the Exports folder.

01 Incoming

Anything the client sends is stored here.

I’ll copy and rename what I need to the 03 Design > 01 Assets folder.

Knowing where the file originated from can save time when you need to go back and ask for a higher resolution image or EPS copy of a logo.

Dropbox File Requests are sent to clients for content that has a deadline date. Files are saved to 01 Incoming/From Dropbox.

Any files sent through Basecamp, email or any other system are copied to the Incoming folder. This means when it’s time to move onto the next sprint; there’s one place to find all client files.

02 Research

The Research folder is a collection of briefs, meeting notes, surveys, interviews and Zoom recordings.

03 Design

The Assets folder contains subfolders for fonts, images, icons, UI kits. There is no priority needed for these folder types, so standard names work fine.

Adobe XD is my UI app of choice. Adobe Creative Cloud saves thirty days of designs, making it easy to revert to previous designs. Before a significant design update, I’ll save a local copy of the XD file to 03 Design/02 Masters and add the date to the file name. On project completion, I will save a final copy of the XD file to this folder and remove any old files.

04 For Client contains presentation files, device mockups, screenshots, recordings or anything else relevant when showing the client design.

04 Code

Coding is first done using Local by Flywheel, then moved to a test server. BitBucket takes care of version control and backups. The code folder is useful when exporting design assets from the approved design and ready to be used in the code.

Images get run through Pichi (an amazing Mac image optimisation app). The 04 Code/Images/02 Optimised folder holds site ready images for web development.

Plugins unique to this project go here too.

05 Training

Contains folders for training documents and recordings from training sessions.

06 Launch

There is a launch checklist document inside 01 Masters. When completed, a PDF copy is exported to 02 Exports.

07 Promote

This for any great design work, making it easier to share on Dribbble, Behance, social media and blog posts.


All Articles