Block 81 Archive Block 81 Archive

This is Block 81's archive of past articles. Once in a while we may add more, but it's rare.

Block 81 is a design studio producing beautifully crafted websites and brands for independent businesses and startups.

How We Do: Project File Organization



I’m a neat-freak. At least when it comes to my office and the files we need for our day-to-day work. Somehow at the beginning of my career I made it through a few years of no real organization for client project files. I chalk it up to not knowing any better. It really didn’t take that long for it to drive me up the wall and find a standard I could implement regularly. And that’s what this article is about: how we organize our project files here at Block 81.

Admittedly, we’re a core team of two and I’m usually the one in charge of all that so I pretty much can set this up however I want. It’s a perk of being the one in charge. But as we look to grow this year and beyond, it’s important to standardize now rather than wait until our larger future team is wondering where that one file went for that one client. The focus here, then, is to keep things as consistent and predictable as possible while leaving some room for a tad of flexibility.

Client & Project Folders

Let’s start with the basic client folder:

Pretty straightforward, eh? Just the client company name. That’s it. So let’s dive deeper into the Acme Inc. folder:

Each client could have any number of project folders – it all depends on the work we’re doing for them. Since the majority of work we do is web design and development, for the purposes of this article, we’re going to stick to one project.

So what are the two folders shown above?

  • _Assets: this is where we keep “global” assets that would likely get used across a multitude of projects, such as logos and style guides. Generally the contents in this folder are client-provided.
  • Project folder: this is where all the files pertinent to the particular project get stored.

The Project Folder

Looking inside the website project folder for Acme Inc., we see the following sub-folders:

  • _Business: here we store contracts, scope documents, contractor info, etc.
  • Content: the contents of this folder will vary depending on whether or not we write the copy for a client’s website, but it will contain copies of the copy for the site (drafts, final text, etc.).
  • Design: this folder contains several subfolders that hold various versions of the design files and mockups for the project. I’ll go over those in a moment.
  • Development: admittedly, this folder sometimes doesn’t exist because we may not have anything relevant to put it in it. The Notes folder here contains scans or text files of notes that were taken during any development meetings with the client or internally. And the Resources folder could contain code snippets or links to code examples for specific functionality we might end up using.
  • IA/UX: here we keep a few subfolders specific to the information architecture and user experience phase(s) of the project. More on those folders later.
  • Photos: similar to the Content folder, the contents of the Photos folder will vary depending on where the photos come from. Sometimes the client will provide the photos, sometimes we’ll use stock images, and sometimes we’ll take photos ourselves. Whatever the case, we generally keep two subfolders here (not shown above): original and live work. The original folder will hold all the photos in their original, untouched states. The live work folder will be either raw or PSD copies of the images with edits we’ve made (color correction, cropping, effects, etc.).
  • Portfolio Shots: most of our work will go into our portfolio so as we start to head toward the end of a project, we’ll take screenshots or create specific imagery for our portfolio. Those all get stored here. It just makes sense to keep them with the project since the assets for the project are in the same general area.
  • User Guide: we provide our clients with user guides for managing website, generally in video format, but sometimes in written form. All those assets go here.

The Design Folder

The design folder can vary if the design for a web project is being created by an agency that hired us. That said, we try and stick to the following organization:

  • Inspiration: this is where we keep screenshots of design elements, links to sites or design styles the client likes, etc. This is starting to feel a little archaic though, and I believe that at some point in the relatively near future we’ll be using InVision Boards (we heart InVision!).
  • Iterations: this folder contains the different rounds or iterations for design in subfolders like so:




    Each file under each round folder is essentially an export of an artboard from Sketch. Those get uploaded to InVision for presentation, review, and approval. (I’ll go over artboard and file names in a bit.)
  • Live Work: this is where our “raw” artwork files go – Sketch files, PSDs, AI, EPS, etc. Whatever we create, it goes here.
  • Notes: any notes that we have regarding design, whether gathered from a client meeting or an internal discussion, they go here.
  • Style Tiles: for better or worse, we don’t always create style tiles for projects (sometimes, for instance, we will but as a mostly an internal exercise). When we do, however, those files go in here.

The IA/UX Folder

The IA/UX folder can contain a variety of subfolders and files depending on our role in the project (sometimes we’re contracted by larger agencies to do just development, for example, and they produce all the IA/UX deliverables). Like the design folder though, we try to stick to a consistent organization.

  • Iterations: whether we’re creating sitemaps or wireframes or other UX documents, we’ll generally store iterations here.
  • Notes: notes that we’ve gathered from meetings about IA or UX go in here.
  • Sitemap: this is a kind of “live work” folder akin to the one in the Design folder. Here we store the raw, editable sitemap file(s).
  • Wireframes: this contains all of our raw, editable wireframe files

Folder & File Naming

How folders and files are named is just as important as the organization itself. For the most part, subfolders are named as you see in the previous images. Folders with an underscore prefix contain the underscore so that they stay toward the top of the respective parent folder. The global assets folder is a perfect example of this. Keeping it toward the top makes it super easy to find global assets that need to be included in any project. Same with the _Business folder within the project.

The only folder that has a pretty strict naming convention is the project folder itself:

Essentially, the project folder name becomes the project code or number made up of the following (sans last bullet).

  • The first three letters are the client code. We use three to four letters for this, usually made up of the first letter of each word in the name. If a client’s company name is only two words (such as Acme Inc), we’ll add an X to the end. Sometimes, particularly for one-word company names, we’ll use the first three letters of the company name.
  • The next two digits are the two digits of the year the project started. So if a project started in 2016, the two digits would be 16.
  • The following three digits are for the project number count. For example, if the website is the first project we’ve done for Acme, then the number is 001. If another project is going to start, the next number would be 002, followed by 003 and so on.
  • Finally we have the project name, which is separated from the project number by a space. This can be just about anything that makes sense, but we tend to keep it simple (e.g., website, brochure, branding, stationery, etc.)

We name our files a bit differently depending on the kind of file. 

As you may have caught earlier, we design in Sketch. The name of the whole Sketch file doesn’t matter too much, but for consistency we tend to do something like this:

Pretty simple. What’s more critical with our Sketch design files is how we name the artboards themselves since those get exported for client presentation. For that we use this formula:

Notice that we don’t include a version number. That’s because, as mentioned previously, we store them all in folders for that particular design version round. For other files that get delivered to clients, we do use a version number:

Other types of files may not need version numbers, such as notes. For those kinds of files, we use a date stamping method:

We use the yy/mm/dd format for the date stamp so that the files stay in chronological order. Additionally, there may be variations to this naming convention depending on the file. It generally fits that model though.

How do you organize your project folders and files?

This method isn’t the end-all, be-all of file organization of course. Just like people organize their offices and workspaces in a variety of ways, there are many different ways of organizing your files. Our system isn’t perfect by any means, but it could be a good starting point if you haven’t really been using a consistent system. The key is to be consistent so that you can find just about any file quickly. Do you have a specific system or method organize your files? Tweet at us!




« Back