On the Adobe Design Brand team, we create branding for all of our desktop, mobile, and web products. A branded element can be anything from the two-letter product logos you see on your dock to the splash screen and icons within the user experience of the product itself.

An often overlooked but highly visible feature is the file type icon. A file type is a name given to a specific kind of file that an application can create, such as .DOC for a Word file. The file type icon is the icon assigned to the file type and what is displayed on your screen when you save or open the actual file.

With the newest release of Creative Cloud this fall, users will see that all of our file type icons have a fresh, new look! In this article, I’ll delve into the thinking and process behind our latest redesign of Adobe’s file type icon system, and share insights about the challenges we face with evolving a brand system across a huge family of products.

Identifying the Issue

Many customers might not realize that Adobe has more than 100 products and services across three clouds: Creative Cloud, Document Cloud, and Experience Cloud.

This means that one small change in the design system can create hundreds of changes across the board.

When it comes to file type icons, people often only consider the primary file types of an application, like:

.PSD for Photoshop,

.AI for Illustrator, or

.INDD for InDesign

However, most of our products can import and export a variety of secondary file types as well (for example, Photoshop alone has over 120 different file type icons mapped in its registry).

To optimize for different operating system requirements, our file type icons also need to be manually pixel-snapped at 10 different sizes and then delivered as a set of rasterized .PNGs that get packaged up into .ICNS (Mac) and .ICO (Windows) files.

When we factor in the number of sizes and formats for each file type icon, we’re looking at over 7,000 assets to modify and manage with each release cycle.

At the rate at which Creative Cloud’s product line has been growing over the last four years, it became clear that the amount of effort required for creating and maintaining these file type icons in the existing workflow was no longer scalable.

Step 1: Audit and Investigate

Before we could start redesigning the system, we had to investigate what we’re currently using in our products. We reached out to every product team to help us conduct an audit of all their file type icons.

Inconsistencies were everywhere, and they were likely a result of two factors:

Different teams owning each product family and no longer aligning on the design, and As new products and file types come online, individual icons are created as one-off designs.

With the information gathered from our audit, we built a bird’s eye view of the existing file type architecture.

First, we organized the file type icons by product family and cross-referenced them to see which secondary file types were shared between multiple applications so that we could eliminate duplicate icons. By doing this we were able to cut the number of secondary file type icons down to 65%.