CS5 Desktop Brand
April 28 2010
Current Projects, Post

cs5 desktop

The Adobe / Macromedia merger (some say "acquisition") created a massive product brand and identity strategy challenge: two distinctly different companies became one, with the combined product offering somewhere in the neighborhood of a hundred unique identities, which all must evolve into a cohesive and functional system (which in turn must also represent Adobe as a proud parent brand.)


The Foundation.

Considering that any given creative workflow likely involves at least a few Adobe apps simultaneously, their desktop iconography plays a critical role in supporting that work. At its core, we're creating a system of buttons and identifiers which must both coexist and be differentiated from one another. Solving the identity crisis was deemed a user experience problem first, a brand problem second.

cs5 in application switcher


The direction reduced a hundred product's legacies of identity and brand - some new, some nearly two decades strong - into a system of type and color, two things close to Adobe's heart. We also effectively kicked off a civil war amongst opining designers... where's the butterfly? The eyeball? Venus? Type doesn't communicate!

However, by the time CS4 rolled around, things had calmed considerably. Our pragmatic approach had turned out to be a successful answer to a problem far larger than most folks understood. pillows were made.

CS5 represented an opportunity to explore what we could build on this foundation of color and type.


From the Direction...

CS5 kicked off late in 2008 with, for the first time, a proper team in place; Dave Nelson and Shawn Cheris joined me for all the creative work, and two new PMs were signed on to coordinate our efforts with the rest of the company.

We knew we wanted to expand on the language of type and color and break from the monolithic rectilinear expression of the CS3 and CS4 systems. We also wanted to bring some artistic character present in the older product versions back into the identity system while leveraging the successful recognition patterns we've established with CS3 and CS4.

The experience and business requirements established our practical and expressive goals:

    distinctive - distinguishable from previous versions, recognizable, own-able
    systematic - extensible, flexible, purposeful
    professional - accomplished, skillful, sophisticated
    refined - cultured, polished, discerning, elegant
    expressive - alluring, delightful, engaging
    unified - systematic, integrated, uniform, consistent
    unique - inventive, surprising


... to the concept...

The icons are so reductive and purposeful there's not much we can radically change about them. LIttle colored squares have come to be Adobe's most expressive and nimble brand ambassadors so their form won't change radically. The typeface Clean is new and not changing, the colors can't shift far from the associations we've established, and the icons still need to work at tiny sizes on busy desktops. An additional accent color help to further differentiate the sometimes crowded color spaces (the blue apps) while giving us more to play with in the visual language.


creative suite app icon evolution


With the icons relatively locked down, we turned our attention to the splash screens. The splashes are sort of second in line after packaging as far as perceived brand glory is concerned, but the reality is somewhat different. While there is much to-do about packaging and things on shelves, the aspects of brand that our customers live with day-to-day and see the most are the splashes and the icons.


For influences and points of reference we dug into graphic design history, modern sculpture, and industrial design.

Aicher's vast grid-based language of figures and layouts for the 1972 Olympics shows that a grid can serve as a basis for an elegant and expressive system. Form and dimension have been explored in the spaces and vectors of Serra's sculptures and the dynamic surfacing from BMW's fabric-skinned Gina light concept.

cs5 in application switchercs5 in application switcher

cs5 in application switchercs5 in application switcher

Various visual treaments were explored, from photographic to graphical to generative textures and treatments of surfacing and opacities. The real 'aha' moment came as soon as we started to question dimension itself. An initial angular sketch subsequently branched off into a multitude of directions; some carefully built from grids, some much more chaotic.

[ some splash sketches, the final grid, the kit of parts, shot of type samples in hallway. ]

cs5 concept boards


...To Reality

Producing assets for nearly a hundred separate software products takes enormous discipline. Discipline in what a few people can commit to executing in terms of fancy design, and discipline in coordinating and scheduling a hundred separate engineering development cycles and their deadlines.

And to keep things interesting, Dave bails just before our production schedule was set to kick off. Shawn and I are now an army of two.

Our survival was dependent on the carefully-hewn master files we created for all the hand-built primary assets such as app icons and splash screens. The files leveraged clever layer structures and the attributes management Fireworks does best.

[ icon master file - 6 sizes ]


Dave's parting gift was to coordinate with our in-house engineer Tim Kulkulski in building a set of tools we could use to manage and composite source files for the 'secondary' file and plugin icons. A massive tabular database of file types cross-references their associations with specific graphic layers, product-colors, and mime-type flags. The flags on the file icons are dynamically rendered in size-specific, pixel-corrected custom weights of our new typeface Clean, all created by Adobe's type team. Composites are generated and subsequently cranked into ico and icns assets.

fl cs5 elements

We have become, in so many words, an outrageously efficient icon factory, pumped up on caffeine, razor sharp pixels, and a couple AIR apps.

Efficiencies were built in everywhere else we could as well. A parallel effort was underway to fix Adobe's abysmal install experience. One requirement of the new technology was a simplification of required branded installer assets. We reduced the individual deliverables here by a factor of 10.

All in all, with a two man show plus some effective PM work by Vero and Moe, we cranked out some 10,000 assets, nailed deliverable deadlines, and babysat the implementation issues that arise from a hundred engineering teams all doing things differently.

CS5 is my third iteration of Adobe's product identity system. As I'm now off with another team fixing the Adobe.com quandary, this is possibly the last iteration for which I'll be in the critical lead and design manager role. The project was one of the most enjoyable and satisfying I've had in my nearly seven years of working at Macromedia/Adobe.

The Work.

cs5 splashes

[ icon array, primaries and secondaries - Flash? Illustrator? Ps... ]
[ the work... bunch of per-app roundups, all splashes, etc ]

Leave a comment

HELLO.
Notespark
October 29 2010
Works 2.0 nearly done
May 27 2010
Inu Not For Anyone
May 25 2010
CS5 Desktop Brand
April 28 2010
Silence Television
April 23 2010
Adobe.com Transformation
April 14 2010