External File Organization For Web Designers

Today I’d like to share some methods I’ve implemented over the past few years, to keep a growing number of Photoshop and associated project files well organized and easily accessible to myself and others. As a web designer, you may be dealing with multiple versions of multiple concepts for given client projects. Not only that, but you may be dealing with many clients, and thus, many files that build up over a long period of time. Often, you’ll need to go back and access older files to updated them or borrow from them. If you’re a smart designer, you’ll recycle / modify to save time.  There’s no reason to re-invent the wheel every time. Having an organized file structure not only allows you unfettered easy access to the brilliant template library that is your past work, but also allows you fellow designers and developers to jump in or take over as needed when working on teams.

Base setup

Create a folder called Design. Inside of this folder, create a folder for each of your clients.

Now, inside of your Client folder, create folders as needed at your discretion based on the client’s project variety. In this example, I made folders for  Assets, Documentation, Mockups and Wireframes. Those are usually always used, in some cases there might be additional folders. In this example I have Logo and Stock folders inside of Assets however I often use a Fonts folder and Documentation folder as well. Inside of the Stock folder, I create two folders, Provided, and Purchased. Anything the client provides goes into provided, and anything downloaded from istockphoto.com goes into purchased.

Organize your projects

Now that you have a basic file hierarchy set up, let’s dive into the Mockups folder for a given client and take a look at a logical organization structure. Again, this will vary from client to client, but in essence the objective is to make a folder for each type of project. In this example, I have folders set up for Ads, Emails, Facebook, and Website.

Use dates and numbers, not hard to decipher names

Some projects like Ads for example, might have a simple organization structure. Inside of the Ads folder I’ll arrange folders first by Year, then Month (with the month number in front so they’re in the right order), then Campaign Name, Dimensions, and Versions. I use dates for projects that I do repeatedly for a client over time–like emails and ads.

Notice I number the versions of each PSD? There is no “LastestMockup2.psd” or FINALmockup.psd” in folders! I know at a glance the progression of versions and that the highest number is the latest and “FINAL” version, always. Gotta love all caps don’t you? Okay, I use caps for internal file organization in Photoshop to denote my top level folders–so they’re not all bad.

Separate new concepts out from versions

In situations where you’ll come back to a file later and update it, I’ll do a Save As to the next number. However, if I’m doing a whole different concept, AKA big theme changes, I’ll break the folders down to separate concepts.

That way, I’m not getting lost wading through a lot of versions looking for different concepts–each concept gets it’s own folder. Sometimes I’ll event hyphenate the Concept folders with a descriptor. (Especially in the case of many concepts).

Name appropriately for hand-off

Finally, when the time comes to hand off a file to another designer or developer (since older versions of a project may only be relevant to you) Make sure to change the numbered file to a descriptive name. I’ll often use the site’s navigation to name files. Home.psd or Store Locations > Store Details.psd to denote a path. That way, your compadre won’t tear their hair out trying to sort identify which PSD is which amongst a bunch of files.

Create without fear and locate archived elements quickly

I can’t even tell you how many times I’ve been in the middle of a design and needed an element or template that I used for a previous project. Why take the time to build that arrow icon again when I know used it for a certain client not so long ago? So there’s your primer on file organization and I hope this helps keep your PSDs in tip top order. No more wondering which file is the latest! No more digging around for “that light blue concept”. Need that email from last Christmas? No problem! An organized folder hierarchy takes the stress off you and allows you to try that that new layout idea without fear of losing previous versions or not being able to locate them. With just a little set-up, you can save a lot of time searching down the line.

What ways do you keep many files orderly?