Skip to content

Latest commit

 

History

History
96 lines (52 loc) · 5.85 KB

design-file_organization.md

File metadata and controls

96 lines (52 loc) · 5.85 KB

Folder Structure & File Naming

Root

  • Projects
  • Internal

Root / -Projects

This is where all of the Sparkbox projects live. Current projects are all listed using the full name of the client and/or project.

When a project is completed, it is moved into an -Archive folder.

This division of projects allows all users access to every current and past project. It also gives the option for utilizing Dropbox’s Smart Sync feature, meaning each user can decide which files they want to store locally or in the cloud.

Root / -Projects / Project Name

When you create a new project folder, the root project directory should contain six folders (with two others that are optional).

  • -UI Explorations is kept at the top thanks to the dash notation. It is where all exploratory design files go. When beginning a project, we often create a variety of different directions before settling on a final concept. That work can be done in here without changing established symbols and design patterns.
  • -UI Iterations is where a project moves once a visual direction has been decided on. Here there is a master sketch file that holds the symbol library, and it can be further broken up into sub-folders if the project has multiple projects within it that need separate designs.
  • Assets for design contains any assets relevant to the design files (inspiration, images, fonts, etc.).
  • Assets for web contains any exported assets that developers might need when building the site (icons, compressed images, logos, etc.).
  • Assets from client includes any assets that were delivered by the client (original logo, brand guidelines, etc.).
  • Documentation includes any documentation relevant to the project (link to Google Drive with kickoff notes, budget, process images, meeting notes, retros, etc.).
  • Brand Design (optional) contains any brand design work that Sparkbox has done.
  • Wireframe / UX (optional) includes a link to wireframes Sparkbox has created for this project or the actual files.

Root / -Projects / Project Name / -UI Explorations

Within the UI Design (and Brand Design) folders, files are named with a consistent pattern so that it is easy to know which is most current while still maintaining a project’s history. A new version of a file is added whenever there is a milestone in the project. For example, if the design direction changes, after a demo, etc.

The goal is to no longer use an Archive tab within Sketch and instead use files to show the archived state. This allows us to use clean symbols and have smaller working files while still keeping a historical view of the project.

Whoever is working on a particular file adds their initials at the end so that multiple designers can be working on the same project without overwriting each other.

There is never a “final” file. Instead, the most recent numbered file is the most current file.

Root / -Projects / Project Name / -UI Iterations

There are two ways the -UI Iterations folder could be structured. Every -UI Iterations folder will contain a Symbol Library file, which will serve as the source of truth for all symbols and consistent styles across the project. It can either have a list of versioned files that use that symbol library, or it can have sub-folders like -Foundry or -Newsletter that represent specific parts of a larger project. These sub-folders should be used when the project is too large to contain in one Sketch file or to make it easier for multiple designers to work at the same time.

Root / Internal

This folder holds all relevant assets that any Sparkbox designer might need access to or find helpful as they work on projects. Current internal projects live in this folder as well and are indexed with a -. Here’s an example of how this folder could be structured:

  • Foundry Images
  • Brand
  • Bookshelf
  • Dribbble
  • Photos
  • Resources
  • Swag and Decor

Root / Internal / -Foundry Images

The Foundry Images folder contains these folders:

  • Exported Final Images includes all the exports of approved Foundry images in their compressed format
  • Working Images includes all the active art files
  • In Article Images includes in-article images for posts that contain those. Inside this folder is a folder for each post that is named in the same format as a Foundry image (see below).
  • Video Graphics includes graphics and artwork produced for videos. Inside this folder is a folder for each post that is named in the same format as a Foundry image (see below).

Foundry images and in-article image folders are named using the following convention:

Author's First Initial-Last Name_year-month

Example: r-tarr_19-10.jpg

Conclusion

This structure should be re-evaluated if the system is no longer helping to keep us organized or supporting the way we work. It should never create more work but instead make it easier for us to work together.

Reference