Dear Ueno: How do you organize your design files?

Dear Ueno is an advice column for people who for some weird reason think we know what we’re doing. Read more about all this, or check out our old advice.

Ricki Xie asks via email:

How do you organize your folder and design workflow for projects and collaboration between internal and external teams? And do you have a naming convention for files? (Don’t tell me it’s 123-design-final-FINAL-final.sketch).

Carolyn Zhang, designer at Ueno NY, happily replies:

Hey Ricki (and the many other people who have emailed with similar questions)!

Once upon a time, in the very early days of Ueno, we used Google Drive to store everything from design files to meeting notes to QA spreadsheets, and it was good. Until one day, the entire folder for Reuters TV — our biggest client at the time — disappeared after someone tried to unsync their local copy. (User error or bug? Mysteries of the universe.) Thankfully, someone had an offline version, and we were able to restore most of it. We switched to Dropbox the next day.

So now, our design and tech teams use Dropbox for storing files and assets. The production and operations teams still use Google Drive to organize documents like contracts and schedules, because it’s so integrated with Google Docs.

Project folder structure

Each client has their own Dropbox Shared folder, which is shared with our Dropbox team of all Ueno employees. There are exceptions, of course — Uber-large companies (😉) may have a different Shared folder per project depending on NDAs and collaborators.* At the end of every year, we move inactive project folders to a mega Shared folder like 2018 Projects to keep old projects easy to browse.

(*This is because with Dropbox, there’s no way to set different sharing permissions within a Shared folder. e.g., I can’t invite a freelance illustrator to an Illustration subfolder without inviting them to the entire Shared folder for the client. So we do what makes sense in each situation.)

Each project folder starts out with this template:

Client Name
  └ _Prototypes or _Motion 
  └ _Visuals
    └ _Archive
    └ Exports
      └ YYYYMMDD
  └ _Wireframes
    └ _Archive
    └ Exports
      └ YYYYMMDD
  └ Assets
    └ FPO
  └ Case Study
  └ Fonts
  └ From Client
  └ Notes
  └ Presentations

And if we have two projects for the same client, it usually ends up looking like this:

Client Name
  └ Project 1 (e.g. "Product") 
    └ _Prototypes
    └ etc.
  └ Project 2(e.g. "Marketing") 
    └ _Motion
    └ etc.

This makes it easy to reference assets, palettes, and research that could be relevant to both projects for the same client.

Most of the action happens in _Wireframes, _Visuals, and _Prototypes, so they’re marked with an underscore to bring them to the top of the alphabetized list.

To keep folders easy to scan, we regularly move unused designs and assets to _Archive folders.

Of course, the project team can adapt this structure to their own needs. Often this means adding more top-level folders like Moodboards and References, and sub-folders within _Visuals to mark out different sections of the designs: 00 Onboarding, 01 Dashboard, etc.

What we definitely don’t do, however, are organize folders by designer (except for very early explorations where everyone’s going crazy), and write dates in words (e.g. “May 5th”), or use Final anywhere. If we’re handing off design files to a client, that usually goes in a Handoff folder, and we send over a Dropbox link.

(Okay, I know some people here use Final. I mean, there’s usually a better way, but do whatever makes the most sense in your situation.)

Design file naming

The words in the file name go from least to most specific, and we include the client and project in the name so an individually-downloaded file is still easily identifiable. Depending whether the project calls for Photoshop or Sketch, we name individual versions a bit differently.

PSDs

Our Photoshop files usually contain just one artboard per file, and designers usually maintain individual files for each page or section. We use version numbers to indicate which file is most up-to-date. PSD files that go in _Visuals or _Wireframes are usually named something like [ClientName]-[ProjectName]-[PlatformName]-[OptionalDescriptors]-[VersionNumber][YourInitials].psd.

Examples: ReutersTV-Website-Mobile-12kym.psd, LP-Destinations-City-5ht.psd

Sketch files

Because Sketch has good support for Artboards and Pages, our designers usually work within a few big Sketch files, create different pages for different versions or sections of work, and merge their designs to a master file (kind of like in Git). So the we flip the version numbers and initials:[ClientName]-[ProjectName]-[PlatformName]-[OptionalDescriptors]-[YourInitials][VersionNumber].sketch

Examples: Reuters-Android-Settings-CZ.sketch , Sothebys-Wireframes-SJ2.sketch, Uninterrupted-iOS-Master.sketch

Collaborating between internal and external teams

It depends on the level of involvement with the external team. Are they a freelancer embedded with Ueno? We’ll probably invite them to the project Dropbox folder so they can sync their files as they work. Are they an external tech team that just needs to look at specs and exports? We’ll probably use Invision, Zeplin, or share links to download handoff docs.

We rarely need to give clients edit access to Dropbox folders — instead, we share download links to individual files/folders as necessary.

That’s all, folks!

Hope this was helpful. Feel free to comment with suggestions or more questions!

Carolyn Zhang is a designer at Ueno in New York. You may recognize her from such Ueno blog posts as Designing a Culture of Mentorship, How do I learn Illustration, Tips & tricks for tongue-tied designers, 7 lessons learned and unlearned from my computer science education, and her latest classic,
Back from vacation? Here’s how to give feedback on work that happened while you were out. Want to applaud Carolyn in person? Because Ueno is hiring.

You’ve got questions. We’ve got answers. Email hi@ueno.co with the subject line “Dear Ueno,” or tweet at us with the hashtag #DearUeno. Include your (optionally fake) name, location, and profession. Thanks.

Ueno in your inbox? Sign up for our newsletter.