Goals & Requirements

Below you'll find what Adobe 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.

Shawn Cheris explains further:

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.

Start With Color

Below I'll let Shawn Cheris take us through the process of the creation of the new Creative Suite release.

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:

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:

And from there we worked on figure-ground relationships:

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.

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.

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.

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:

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

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.

File icons

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

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.

My personal thoughts

The first time I laid eyes on the new CS6 Adobe icons my gut feeling was telling me that I preferred the previous series. If I try to analyze why, I think it has mostly to do with my personal preference towards vibrant colors. The CS5 icons are brighter, and because of that they also feel lighter. For example, take the Illustrator icon, I really liked the orange compared to the brown they have chosen now. It all feels rather dark, and less "happy" if you know what I mean. On the other hand, I notice there is a better consistency in how they applied the two letters on the background in terms of color. In CS5 it could either be a darker or lighter color, and the contrast between both was rather subtle. The new CS6 icons however, have a very high contrast, maybe just a little bit too hard and flashy for my personal taste, but it surely makes them very legible. So in terms of visibility and legibility they've done a really good job.

As for the splash screens, they also didn't give me the enthusiasm I had with the CS5 ones. Their vibrant colors, simple geometric lines, and surreal depth really did it. With these new screens, I feel there is definitely a new concept in place, but not sure if I really like it. Maybe it's the dark color palette that throws me off a little, but I'm also not a big fan of this general organic feel and randomness of all of the compositions. It's just a style I'm personally less fond of. Maybe it needs some time getting used to? With that said, it doesn't mean this new design isn't strong though. They all have this consistent new look, each with their own effect. In that respect they suceeded very well.