The CS6 Desktop Brand System

It takes well over a year to design, execute, deliver, and ensure the proper implementation of the roughly 5,000 or so assets it takes to get a CS release out the door (we’re already thinking about CS7). Along the away, there are innumerable institutional, technological, and political hurdles to overcome. It can be daunting, but we do everything we can to get it made with as few design compromises as possible.

We know that every release requires change and that the change will make some people unhappy. Like many of you, we are life-long users and fans of the tools, and we do our best to create something that we can be proud of, knowing full well that some people will not agree with our choices. Then again, if no one reacts negatively, it’s probably not very interesting.

In this regard, we consider our work for CS6 a success. We achieved our design goals, met the technical requirements, and shipped it more or less in the form we imagined. If you’ve ever done design work for a big company, you will understand why this is cause for celebration.

As we write this, CS6 has just shipped, and the first reactions are starting to appear on the web. Though much of this may be new to you, we’ve been staring at it for more than a year and have come to really love these bright little icons, illustrative splashes, and other elements. We hope you will too.

Goals & Requirements

Whenever we prepare for a Creative Suite release, we start off with a list of technical requirements and design goals. Here’s what we wanted to accomplish from an experience standpoint:

  • Expressive. The product splash screens for CS3 and CS4 were basically extensions of the product icons. This helped establish the powerful color system that we now rely on for our brand. Having done this for two releases, there was some leeway in CS5 to do something a little different, and we had an opportunity to push it even further for CS6. We wanted to get back to the more expressive nature of pre-CS Adobe products while keeping what we loved about the past few iterations.
  • Interaction with the desktop. Our work lives in and interacts with the OS. We were interested in what ways we might exploit the parameters and limitations of those interactions.
  • Back to squares. The folded-plane icons of CS5 were a reaction to the splash screens. While we liked the aesthetic, there are a ton of reasons to avoid non-square forms for brand assets. For instance, the CS5 icons tend to be awkward as avatars for social media and don’t translate to mobile environments.
  • Creating a Creative Suite brand segment. After we launched CS3, the default move for Adobe applications was to simply throw them on a square and give them a two-letter designation. That worked great when we had 20-ish products, but we’ve now got well over 100 and have long abandoned this practice. We wanted to create something that would be unique to Creative Suite.
  • A more cohesive connection to marketing imagery / packaging. More on this later, but in a nutshell, we wanted to partner as closely as possible with our marketing department and external agencies to try to make the two experiences relate to each other.

Our work is functional and must be optimized for the contexts in which it will be consumed. There’s a lot of ins and outs, but the basic requirements are fairly straightforward:

  • Legible. Application icons should be distinguishable from one another at small icon sizes, on file icons, and in the OS. Icons must be differentiable beyond color and should be legible for color blind persons via shape, letter-forms, tone, or other method.
  • Differentiable. Application icons must be visually distinguishable from the previous two version’s icons since many customers run concurrent versions of a product on one machine.
  • Flexible. There must be enough flexibility in the branding system to accommodate the variations across the product line and allow for appropriate icons for products, product line extensions, technologies,  servers, and a large range of file types.
  • Credible. The branding system must be credible to our creative audience. This doesn’t mean everyone has to like it, or that it is non-controversial. It means that it adheres to core design principles around typography, color, composition, etc. In other words, we should make something we’re proud of.
  • Consistent. The equity of our brand is built through consistent execution. While allowing for the occasional technical limitation, the icons, splash screens, and other high-visibility branding areas should vary as little as possible from product to product or should vary in a highly prescribed way. Each product is part of a system, the sum of which defines our brand experience.

We Start With Color

None of us were part of the team that rebranded Creative Suite for CS3 (that work was done by our friend and colleague Ryan Hicks). Like many people, when we first saw the CS3 rebrand with the now iconic two-letter mnemonic system, we weren’t all that impressed. However, once we had it on our desktops and spent some time with it we fell in love. It was a system that embraced timeless design, clear communication, and modernism. The icons became the most identifiable part of your desktop, with each tool easily distinguishable. Other people loved the system too and were drawn to the colored squares—they are copied, transformed, and turned into tzotchkes on a daily basis.

Whenever we start thinking about a new Creative Suite release, we like to start with the colors—and by extension—the icons.  Since we wanted the CS offerings to all feel like part of a family—a toolbox—we thought it appropriate to place them within a single, continuous, logical color spectrum. It’s hard to talk about color without a good visual reference, so let’s start with the color choices from CS3 and Cs5:

Color wheels from CS3 and CS5

In terms of value and saturation, prior vintages varied quite a bit. What we wanted was something more like this:

We began creating a variety of color models, like these saturation tests:

Early saturation tests

And from there we worked on figure-ground relationships:

figure / ground tests

We finally landed on the forms you see below. These icons are bright and bold. We love this and pushed it as hard as we could. If you see just one or two, they stick out a bit, but when lined up chromatically (as so many of us like to do), they own the dock… or any other context.

There’s also a subtle bit of transparency in the tiles which is most notable in the dock and in the app switcher. That transparency enables them to interact with elements in the OS (a theme that plays out in other elements as well) and it means that their color will vary slightly, depending on where they appear.

CS6 icons against various backgrounds

Arranging the CS6 icons around a color wheel demonstrates their (relatively) equal distribution and the fact that they all share the same level of brightness and contrast. You’ll notice there’s a bit more space between Dreamweaver and Fireworks as the in-between colors are hard for most people to differentiate (these products are traditionally green and yellow, respectively). There are a lot of these little trade-offs.

Color range

The Splash

The splash screens have (almost) always been the centerpiece of the desktop brand experience. Some people say they are a relic of a bygone era, or bely an experience that is bloated, but we still love them and believe they’re an immutable part of the Adobe experience—and heritage—for better or worse.

For many years, Adobe’s splash screens were illustrative and intricate and, for their time, were pretty impressive pieces of digital artwork. They taunted you, suggesting that if only you were skilled enough at Photoshop or Illustrator then you, too, could create something like this.

When Adobe and Macromedia merged, they needed a new system that could accomodate a much larger tool set, and the illustrative work was wisely abandoned in favor of a systematic approach. As a result, the splash screens for CS3 and CS4 largely became an extension of the icon.

Pursuing this approach through CS3 and CS4 established a pattern that gave us a little bit of freedom to try something new with CS5. We kept the geometry idea, but lost the rectangles. It was a bit of a departure, but not too much of one.

What we wanted to do this time was extend things just a bit further. We debated at length about whether it was more appropriate to do something evolutionary, as with CS5, or to break the mold a bit. We didn’t want to make something new just for the sake of making something new.

The Continuum of Expressiveness

The Continuum of Expressiveness

Experiments, Experiments, Experiments

Holy cow, did we try some things. First, we played with the idea of extending the geometric language from CS5, experimenting with dozens of grids and schemes, some more practical than others.

Since we were interested in texture, we started exploring organic forms.

Next, we began experiments on how the two languages might work together.

Ultimately, however, we found that the complexity of the textures worked best with simple geometry. We decided to start thinking about the splash screens as a canvas of sorts—a simple echo of the icon as it had been in CS3 and CS4. The two letter mnemonic system used by Adobe is reminiscent of the two letters used in the Periodic Table of Elements. Coupled with the textures, the splash screens began to feel like a visual representation of “elements” of creativity.

Bridging the Gap

About the time we were starting to hone in on the basic design language that would inform our work for CS6, we started checking in with our colleagues on the marketing side of the house, and they showed us some early versions of the imagery they were working on. Their work centered around human faces being used as a sort of canvas in much the same way we were thinking of our splash screens as a canvas. From that point forward, we collaborated closely with them to make sure the textures and colors were aligned for each product.

We began making textures by extracting bits and pieces from the marketing imagery that was being executed in parallel to our work. This is easier said than done. We couldn’t rely on any layer effects like “multiply” to get the transparency, since ultimately, we needed to output PNG files with their own alpha, and the textures had to work against any background, since we can’t account for how our user’s desktop might look.

As an example, here’s the imagery for AfterEffects and the textural component we crafted from dozens of original photographs:

After Effects ArtworkAfter Effects texture

And here’s that same textural language integrated into the actual splash screen:

After Effects Splash

Other Pieces

The icons and splash screens always get the most attention, but there are a lot of smaller elements to the system as well. These include file type icons, install assets, welcome banners, “About” screens, and other little pieces you’ve probably never considered.

The file icons have had a pretty consistent look for a number of years now and this was really the first opportunity we’ve had to take a fresh look at them. We’ve been doing a lot of “flattening out” of our work over the last few years and decided to extend that into these icons as well. The flat look also works particularly well when reduced down to 16 pixels, the most common size seen in the OS.

The “About” screens also got a new treatment this round and most of our product teams have standardized how these are handled. Like the other elements, they make use of transparency:

To give you a sense of how many brand assets are created for a given product, here’s a cross-section of how the system played out for Dreamweaver:

Show and Tell

Without further ado, here are all of the splash screens, presented in chromatic order:

Credits

The Adobe Brand Experience design team is Shawn Cheris (manager, designer), Sonja Hernandez (designer), and Sam Wick (designer). CS6 would have been infinitely more challenging without the superb support from our (former) Project Manager, Bradee Evans. Special thanks to Kim Pimmel, who was kind enough to provide us with a hard drive full of his incredible photography for prototyping. His work is the basis for the Encore imagery.

We had the full support of our management, Ty Lettau (Director, Experience Design) and Michael Gough (VP, Experience Design).

Adobe’s Brand Strategy team, Siri Lackovic and Alison Tre, are invaluable partners who help us get things out the door, among other feats.

We collaborated closely with our colleagues from marketing, Eddie Yuen and John Caponi, who in turn provided art direction to Tolleson Design for the packaging and marketing imagery.

 

205 Responses to "The CS6 Desktop Brand System"